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

<script setup lang="ts">
import type { ToolbarMode } from "@enesis/editor"
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`)

const mode = ref<ToolbarMode | undefined>("fixed")
</script>

<template>
  <UPage>
    <UPageHeader
      title="EditorToolbar"
      description="Formatting toolbar with active state tracking, undo/redo, and three layout modes."
    />

    <UPageBody>
      <div class="space-y-8">
        <section class="space-y-4">
          <p class="text-sm text-muted leading-relaxed">
            The toolbar is rendered via the <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">#toolbar</code> slot on <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">Editor</code>.
            It receives <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">handlers</code>, <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>, and <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">undo</code>/<code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">redo</code> from the focused block.
            The <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">mode</code> prop controls the toolbar layout:
            <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">fixed</code> (default, sticky to editor top),
            <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">bubble</code> (appears on text selection), or
            <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">floating</code> (appears on empty lines).
          </p>

          <div class="rounded-lg border border-default dark:bg-neutral-950/50 p-4 sm:p-8 rounded-t-md">
            <div class="flex items-center gap-2 mb-4">
              <span class="text-sm text-muted">Mode:</span>
              <UButton
                v-for="m in (['fixed', 'bubble', 'floating'] as const)"
                :key="m"
                size="xs"
                :variant="(mode === m) ? 'solid' : 'outline'"
                :color="(mode === m) ? 'primary' : 'neutral'"
                @click="mode = mode === m ? undefined : m"
              >
                {{ m }}
              </UButton>
            </div>

            <Editor v-model:content="content" :focused="true" marker-mode="always-visible">
              <template #toolbar="{ handlers, selectionVersion, canUndo, canRedo, undo, redo }">
                <EditorToolbar
                  :mode="mode"
                  :handlers="handlers"
                  :selection-version="selectionVersion"
                  :can-undo="canUndo"
                  :can-redo="canRedo"
                  :undo="undo"
                  :redo="redo"
                />
              </template>
            </Editor>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Props</h2>
          <div class="rounded-lg border border-default overflow-hidden">
            <table class="w-full border-separate border-spacing-0 rounded-md text-sm">
              <thead class="bg-muted">
                <tr>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Prop</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Type</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Default</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Description</th>
                </tr>
              </thead>
              <tbody>
                 <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">mode</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">'fixed' | 'bubble' | 'floating'</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">'fixed'</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Toolbar layout mode</td></tr>
                 <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">handlers</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">FormattingHandlers</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Handlers from focused block</td></tr>
                 <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">selectionVersion</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">number</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Re-compute active states on cursor move</td></tr>
                 <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">canUndo / canRedo</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">boolean</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Enable undo/redo buttons</td></tr>
                 <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">undo / redo</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">() => void</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Undo/redo callbacks</td></tr>
              </tbody>
            </table>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Button Groups</h2>
          <div class="rounded-lg border border-default overflow-hidden">
            <table class="w-full border-separate border-spacing-0 rounded-md text-sm">
              <thead class="bg-muted">
                <tr>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Group</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Buttons</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Description</th>
                </tr>
              </thead>
              <tbody>
                <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">History</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">Undo, Redo</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Undo/redo stack</td></tr>
                <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">Block</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">Heading, Task</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Heading level dropdown, task toggle</td></tr>
                <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">Inline</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">Bold, Italic, Code, Strike, Highlight</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Inline formatting toggles</td></tr>
                <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">Insert</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">Link, Inline Math, Block Math</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Insert markdown syntax</td></tr>
                <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">References</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">Page Ref, Block Ref, Tag</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Prompt-based insertion</td></tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </UPageBody>
  </UPage>
</template>