Vizel API / vue/src / useVizelMarkdown

Function: useVizelMarkdown()

function useVizelMarkdown(getEditor, options?): UseVizelMarkdownResult;

Defined in: packages/vue/src/composables/useVizelMarkdown.ts:84

Vue composable for bidirectional Markdown synchronization with the editor.

Parameters

Parameter	Type	Description
getEditor	() => Editor | null | undefined	Function to get the editor instance
options	UseVizelMarkdownOptions	Sync options

Returns

UseVizelMarkdownResult

Markdown state and control functions

Examples

<script setup lang="ts">
import { useVizelEditor, useVizelMarkdown, VizelEditor } from '@vizel/vue';

const editor = useVizelEditor();
const { markdown, setMarkdown, isPending } = useVizelMarkdown(() => editor.value, {
  debounceMs: 300,
});
</script>

<template>
  <VizelEditor :editor="editor" />
  <textarea
    :value="markdown"
    @input="setMarkdown(($event.target as HTMLTextAreaElement).value)"
  />
  <span v-if="isPending">Syncing...</span>
</template>

<script setup lang="ts">
// With initial markdown value
const { markdown, setMarkdown } = useVizelMarkdown(() => editor.value, {
  initialValue: "# Hello World",
  transformDiagrams: true,
});
</script>