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

const content = ref(`# Heading 1
## Heading 2

Paragraph with **bold**, *italic*, \`code\`, ~~strikethrough~~, ^^highlight^^, $math$, and [links](https://example.com).

> Simple blockquote

> [!NOTE] Callout with left border accent

TODO Task states are supported
DONE Completed tasks

![Diagram](https://picsum.photos/seed/editor/400/200)

| Col A | Col B |
|---|---|
| Data | More data |

\`\`\`python
def hello():
    print("Hello!")
\`\`\`

[[Resolved Page]] and [[Unresolved Reference]] and #tag

((unknown-block-id))

author:: Editor Block Demo
`)

const resolvedRefs = new Set(["Resolved Page", "known-block-id"])

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

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

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

<template>
  <UPage>
    <UPageHeader
      title="EditorBlock"
      description="A single ProseMirror block editor with markdown decoration rendering."
    />

    <UPageBody>
      <div class="space-y-8">
        <section class="space-y-4">
          <p class="text-sm text-muted leading-relaxed">
            Each <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">EditorBlock</code> manages a block of markdown in its own ProseMirror instance.
            Decorations render bold, italic, links, tables, code blocks, callouts, references, tags, math, and properties.
          </p>

          <div class="rounded-lg border border-default dark:bg-neutral-950/50 p-4 sm:p-8 rounded-t-md">
            <EditorBlock
              v-model:content="content"
              cursor-position="start"
              marker-mode="always-visible"
              :resolved-refs="resolvedRefs"
              :resolved-refs-version="resolvedRefs.size"
              @page-ref-clicked="onPageRefClick"
              @block-ref-clicked="onBlockRefClick"
              @tag-clicked="onTagClick"
            />
          </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">Markdown content (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 the block and show active decorations; re-focuses when the prop changes</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">cursorPosition</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">'start' \| 'end' \| 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">Cursor placement on 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">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">debug</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">Debug namespace filter</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>
                  <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">resolvedRefs</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">Set&lt;string&gt;</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">Known refs — missing entries render with dashed underline</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">resolvedRefsVersion</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">Bump to re-check refs across all blocks</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">resolveAsset</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">(file: File) => Promise&lt;string&gt;</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">Upload handler — resolves dropped/pasted files to a URL</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">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">string</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">Content 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">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">Block 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">content-change-op</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">{ blockId, previousContent, newContent, timestamp }</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">Content change metadata for history tracking</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">first-para-height</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">Height of first paragraph, for drag-handle alignment</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">split</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">{ before, after }</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">Enter split the 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">merge-previous</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">Backspace at start</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">delete-if-empty</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">Backspace on empty 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">indent / outdent</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">Tab / Shift+Tab</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">arrow-up-from-start</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">Cursor at first line</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">arrow-down-from-end</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">Cursor at last line</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">pattern-open</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">PatternOpenPayload</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">Trigger detected (/, [[, ((, #)</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">pattern-update</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">PatternUpdatePayload</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">Pattern query/range updated as user types</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">pattern-close</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">PatternClosePayload</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">Pattern session ended</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">page-ref-clicked</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">{ pageName, alias? }</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">Clicked a [[page]] chip</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-ref-clicked</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">{ 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">Clicked a ((block)) chip</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">tag-clicked</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">{ tag }</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">Clicked a #tag chip</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, KaTeX error, parser crash</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">asset-dropped</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">{ file, pos }</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">File dropped/pasted, no resolveAsset prop</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">view</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">EditorView</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">Raw ProseMirror view</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">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">(pos?) => 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">Programmatic 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">getContent</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 text-muted">Current markdown</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">setContent</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">(md) => 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">Replace content externally</td></tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </UPageBody>
  </UPage>
</template>
