editor/apps/tauri/src/components/AppEditor.vue

<script setup lang="ts">
import { Editor, EditorToolbar } from "@enesis/editor"

const content = defineModel<string>("content", { required: true })
const resolvedRefs = new Set(["Known Page", "Documentation"])

function onPageRefClick({ pageName }: { pageName: string }) {
  console.log("page-ref-clicked", pageName)
}

function onBlockRefClick({ blockId }: { blockId: string }) {
  console.log("block-ref-clicked", blockId)
}

function onTagClick({ tag }: { tag: string }) {
  console.log("tag-clicked", tag)
}
</script>

<template>
  <div class="flex flex-col flex-1 min-h-0 p-4 sm:p-6 dark:bg-neutral-950/50">
    <Editor
      v-model:content="content"
      marker-mode="live-preview"
      :focused="true"
      :resolved-refs="resolvedRefs"
      :resolved-refs-version="resolvedRefs.size"
      @page-ref-clicked="onPageRefClick"
      @block-ref-clicked="onBlockRefClick"
      @tag-clicked="onTagClick"
    >
      <template #toolbar="{ handlers, selectionVersion, canUndo, canRedo, undo, redo }">
        <EditorToolbar
          mode="bubble"
          :handlers="handlers"
          :selection-version="selectionVersion"
          :can-undo="canUndo"
          :can-redo="canRedo"
          :undo="undo"
          :redo="redo"
        />
      </template>
    </Editor>
  </div>
</template>