editor/apps/dev/src/pages/toolbar.vue

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

const content =
  ref(`* **Bold**, *italic*, \`code\`, ~~strikethrough~~, ^^highlight^^, and $math$ work inline
* ## Heading 2
* TODO This task can be toggled from the toolbar
* [[Page refs]] and #tags are supported inline
* | Feature | Shortcut |
  |---|---|
  | Bold | **⌘B** |
  | Italic | *⌘I* |`)
</script>

<template>
  <UPage>
    <UPageHeader
      title="Toolbar"
      description="Formatting toolbar with active state tracking."
    />

    <UPageBody>
      <div class="space-y-8">
        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Editor with Toolbar</h2>
          <p class="text-sm text-muted leading-relaxed">
            Toolbar and editor are wired automatically via the <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">#toolbar</code> slot — no manual event handling needed.
            The Editor provides <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">handlers</code> and <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">selectionVersion</code> to the slot scope.
          </p>

          <div class="flex flex-col gap-3 rounded-lg border border-default bg-elevated p-4">
            <Editor v-model:content="content" :focused="true" marker-mode="always-visible">
              <template #toolbar="{ handlers, selectionVersion }">
                <EditorToolbar :handlers="handlers" :selection-version="selectionVersion" />
              </template>
            </Editor>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Integration Pattern</h2>
          <div class="rounded-lg border border-default overflow-hidden">
            <table class="w-full text-sm">
              <thead>
                <tr class="border-b border-default bg-elevated">
                  <th class="text-left px-4 py-2 font-medium text-muted text-xs uppercase tracking-wider">Step</th>
                  <th class="text-left px-4 py-2 font-medium text-muted text-xs uppercase tracking-wider">Description</th>
                </tr>
              </thead>
              <tbody>
                <tr class="border-b border-default">
                  <td class="px-4 py-2 font-mono text-xs">1</td>
                  <td class="px-4 py-2 text-xs text-muted">Editor detects <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">#toolbar</code> slot and renders it above the block list</td>
                </tr>
                <tr class="border-b border-default">
                  <td class="px-4 py-2 font-mono text-xs">2</td>
                  <td class="px-4 py-2 text-xs text-muted">Editor passes <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">handlers</code> and <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">selectionVersion</code> from the focused Block into the slot</td>
                </tr>
                <tr class="border-b border-default">
                  <td class="px-4 py-2 font-mono text-xs">3</td>
                  <td class="px-4 py-2 text-xs text-muted">Toolbar's <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">computed</code>s re-run, calling <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">handlers.isActive(format)</code> for each button</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Known Limitations</h2>
          <ul class="text-sm text-muted leading-relaxed space-y-2 list-disc list-inside">
            <li>Reference insertion (Page Ref, Block Ref, Tag) uses <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">window.prompt()</code> — will be replaced with the pattern plugin's suggestion menu in a future phase.</li>
            <li>Undo/redo (<kbd class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">⌘Z</kbd> / <kbd class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">⌘⇧Z</kbd>) are wired via global keyboard shortcuts. <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">canUndo</code>, <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">canRedo</code>, <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">undo</code>, and <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">redo</code> are provided via the <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">#toolbar</code> slot scope.</li>
          </ul>
        </section>
      </div>
    </UPageBody>
  </UPage>
</template>