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

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

const content = ref(`# Getting Started with the Editor

This document demonstrates all the features the editor supports.

## Text Formatting

You can use **bold**, *italic*, \`code\`, ~~strikethrough~~, and ^^highlight^^.

## Links & References

Visit [Nuxt UI](https://ui.nuxt.com) for documentation. Reference [[other pages]] and use #tags for categorization.

## Tasks & Tables

* TODO Task tracking with six states
* DOING Work in progress
* DONE Completed tasks

| Feature | Status |
|---|---|
| Tables | Done |
| Undo/Redo | Done |

\`\`\`typescript
function greet(name: string): string {
  return \`Hello, \${name}!\`
}
\`\`\`

> [!NOTE] Use callouts for important information

## Properties

author:: Editor Demo
status:: published`)
</script>

<template>
  <UPage>
    <UPageHeader
      title="Editor"
      description="Multi-block editor shell with insertion zones, toolbar, drag-to-reorder, and unified undo/redo."
    />

    <UPageBody>
      <div class="space-y-8">
        <section class="space-y-4">
          <p class="text-sm text-muted leading-relaxed">
            The <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">Editor</code> component manages a list of blocks with insertion zones between them.
            Each block is a <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">*</code> list item in the unified markdown string.
            Drag the <span class="i-lucide-grip-vertical size-4 inline-block align-middle text-muted" /> handle to reorder blocks.
          </p>

          <div class="rounded-lg border border-default dark:bg-neutral-950/50 p-4 sm:p-8 rounded-t-md overflow-hidden">
            <Editor v-model:content="content" :focused="true" marker-mode="always-visible">
              <template #toolbar="{ handlers, selectionVersion, canUndo, canRedo, undo, redo }">
                <EditorToolbar
                  :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">content</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">string</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">Full document markdown (v-model)</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">focused</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"><code class="md-code">false</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">Focus first block on mount</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">markerMode</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">'live-preview' \| 'always-visible'</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">'live-preview'</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">Decorator visibility 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">theme</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">ThemeInput</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">CSS-variable theme preset</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">keyBinding</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">KeyBinding</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">default</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">Swappable keyboard handler</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">extraPatterns</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">PatternSpec[]</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">Custom suggestion triggers</td></tr>
              </tbody>
            </table>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Slot: #toolbar</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">Binding</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">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">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 text-muted">Toggle/wrap/insert helpers</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 text-muted">Bumped 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 text-muted">Undo/redo availability</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 text-muted">Undo/redo functions</td></tr>
              </tbody>
            </table>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Events</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">Event</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Payload</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">focus</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">{ view, handlers }</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">Block gained focus</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">blur</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">All blocks lost focus</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">selection-change</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">{ from, to, empty }</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">Selection changed</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">error</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">{ code, message?, blockId? }</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">Mount failure or KaTeX error</td></tr>
              </tbody>
            </table>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Exposed Methods</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">Method</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Signature</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">undo</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 text-muted">Undo last operation</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">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 text-muted">Redo last undone operation</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">Ref&lt;boolean&gt;</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">Undo/redo availability</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">getHistoryState</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">() => { 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 text-muted">Inspect undo/redo state</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">applyHistory</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">(op) => void</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">Push operation to history stack</td></tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </UPageBody>
  </UPage>
</template>