Editor

<script lang="ts">
  // Note the sub-export: 'sv5ui/editor', not 'sv5ui'.
  import { Editor } from 'sv5ui/editor';

  let value = $state('<p>Start writing…</p>');
</script>

<Editor bind:value placeholder="Write something amazing…" />

<script lang="ts">
  import { Editor } from 'sv5ui/editor';
  import type { EditorJSON } from 'sv5ui/editor';

  // HTML (default) - value is a string
  let htmlValue = $state('<p>Hello <strong>world</strong></p>');

  // JSON - value is a Tiptap document
  let jsonValue = $state<string | EditorJSON>({ type: 'doc', content: [
    { type: 'paragraph', content: [{ type: 'text', text: 'Structured!' }] }
  ]});

  // Markdown - string of Markdown (uses tiptap-markdown)
  let mdValue = $state('# Heading\n\nA **Markdown** paragraph.');
</script>

<Editor bind:value={htmlValue} output="html" />
<Editor bind:value={jsonValue} output="json" />
<Editor bind:value={mdValue}   output="markdown" />

<!-- Default toolbar - every common action -->
<Editor toolbar />

<!-- Custom subset - order matters, '|' inserts a vertical separator -->
<Editor toolbar={['bold', 'italic', 'underline', '|', 'h1', 'h2', '|', 'link']} />

<!-- Hide the toolbar (pair with bubbleMenu for floating controls) -->
<Editor toolbar={false} bubbleMenu />

<!-- Stick the toolbar to the top of the page on scroll -->
<Editor stickyToolbar />

<!-- Floating mini-toolbar that appears on text selection. -->
<Editor toolbar={false} bubbleMenu />

<!-- Combine placeholder with a character counter + hard cap. -->
<Editor
  placeholder="Tell us about your weekend…"
  showCount
  maxLength={280}
/>

<script lang="ts">
  import { Editor } from 'sv5ui/editor';

  async function uploadImage(file: File): Promise<string> {
    const fd = new FormData();
    fd.append('file', file);
    const res = await fetch('/api/upload', { method: 'POST', body: fd });
    const { url } = await res.json();
    return url;
  }
</script>

<!-- One handler covers all three routes that produce a file: the toolbar
     picker, a paste and a drop. Paste several images at once and they are
     uploaded one after another and inserted in order, rather than racing
     each other. A dropped image lands where it was dropped, not where the
     caret happened to be. -->
<Editor
  image
  onImageUpload={uploadImage}
  onImageUploadError={(error) => toast.add({ title: 'Upload failed', color: 'error' })}
  toolbar={['bold', 'italic', '|', 'link', 'image', '|', 'undo', 'redo']}
/>

<!-- Without onImageUpload nothing is intercepted: a pasted image falls
     through to the editor's own handling, and the toolbar button opens the
     URL dialog instead of a file picker. -->

<script lang="ts">
  import { Editor } from 'sv5ui/editor';
</script>

<!-- imageCrop opens an ImageCropper in a modal before onImageUpload runs,
     so what leaves the browser is the cropped file rather than the original.
     true uses the defaults. -->
<Editor image imageCrop onImageUpload={uploadImage} />

<!-- An object configures both the dialog and the export. maxWidth is the
     one to reach for first: it caps what the server receives without asking
     the writer to think about pixels. -->
<Editor
  image
  imageCrop={{
    aspect: 16 / 9,
    mode: 'fixed',
    title: 'Crop before upload',
    description: 'Drag to reposition, scroll to zoom.',
    confirmLabel: 'Insert image',
    output: { maxWidth: 1200, quality: 0.85 }
  }}
  onImageUpload={uploadImage}
/>

<!-- Applies to the toolbar picker, a paste and a drop alike. Inserting an
     image by URL never goes through the cropper, since reading pixels back
     out of a remote image needs CORS headers the host may not send.

     The dialog opens with the crop frame on the whole image, so pressing
     Insert without dragging keeps the original rather than quietly cropping
     it. That is ImageCropper's initialFrame="full", set by the dialog. -->

<!-- The three URL dialogs are real forms: a labelled input, a required
     marker, an icon and help text. The link dialog has an optional Display
     text field, prefilled with whatever is selected in the document.

     Insert link          Link URL   Include the protocol, for example https://
     Edit link            Link URL   same, with an Update button
     Insert image (URL)   Image URL
     Embed YouTube        Video URL

     The URL input takes focus when the dialog opens, and no error is shown
     until the field is actually left, so an empty dialog never greets the
     writer with a complaint. -->

<Editor
  image
  youtube
  toolbar={['bold', 'italic', '|', 'link', 'image', 'youtube', '|', 'undo', 'redo']}
/>

<!-- Enable the extension AND include 'table' in the toolbar array. -->
<Editor
  tables
  toolbar={['bold', 'italic', '|', 'h2', 'h3', '|', 'bulletList', 'orderedList', '|', 'link', 'table', '|', 'undo', 'redo']}
/>

<!-- Enable the extension AND include 'youtube' in the toolbar array. -->
<Editor
  youtube
  toolbar={['bold', 'italic', '|', 'h2', 'h3', '|', 'bulletList', 'orderedList', '|', 'link', 'youtube', '|', 'undo', 'redo']}
/>

<script lang="ts">
  import { Editor } from 'sv5ui/editor';
  import type { MentionItem } from 'sv5ui/editor';

  const users: MentionItem[] = [
    { id: 'alice', label: 'Alice Martin', avatar: 'https://i.pravatar.cc/40?u=alice' },
    { id: 'bob',   label: 'Bob Wilson',   avatar: 'https://i.pravatar.cc/40?u=bob' },
    { id: 'carol', label: 'Carol Lee',    avatar: 'https://i.pravatar.cc/40?u=carol' }
  ];

  async function lookup(query: string): Promise<MentionItem[]> {
    const q = query.toLowerCase();
    return users.filter((u) =>
      u.label.toLowerCase().includes(q) || u.id.toLowerCase().includes(q)
    );
  }
</script>

<Editor onMention={lookup} placeholder="Type @ to mention someone…" />

<script lang="ts">
  import { Editor, buildDefaultSlashCommands } from 'sv5ui/editor';
  import type { SlashCommand } from 'sv5ui/editor';

  // Extend the defaults with one custom command.
  const commands: SlashCommand[] = [
    ...buildDefaultSlashCommands({ image: true, tables: true, youtube: true }),
    {
      id: 'todo',
      label: 'TODO note',
      description: 'Insert a yellow TODO callout',
      icon: 'lucide:list-todo',
      keywords: ['todo', 'task'],
      run: ({ editor }) => {
        editor.chain().focus()
          .insertContent('<p><mark>TODO: </mark></p>')
          .run();
      }
    }
  ];
</script>

<Editor slash slashCommands={commands} image tables youtube />

<!-- Hover any block to reveal a drag handle on the left. Reorder
     paragraphs, headings, lists, tables, etc. -->
<Editor dragHandle />

<script lang="ts">
  import { Editor } from 'sv5ui/editor';
  import { FormField } from 'sv5ui';

  let value = $state('');
  const error = $derived(value.replace(/<[^>]*>/g, '').trim().length === 0
    ? 'Body is required'
    : '');
</script>

<FormField label="Body" required help="Markdown / rich text" {error}>
  <Editor bind:value placeholder="Write a description…" />
</FormField>

<script lang="ts">
  import { Editor } from 'sv5ui/editor';
  import type { EditorApi } from 'sv5ui/editor';
  import { Button } from 'sv5ui';

  let value = $state('<p>Edit me…</p>');
  let api = $state<EditorApi>();
</script>

<Editor bind:value bind:api />

<div class="flex flex-wrap gap-2">
  <Button label="Bold"    onclick={() => api?.run('bold')} />
  <Button label="H1"      onclick={() => api?.run('h1')} />
  <Button label="Clear"   color="error" variant="outline" onclick={() => api?.clear()} />
  <Button label="Focus end" onclick={() => api?.focus('end')} />
  <Button label="Insert text" onclick={() => api?.insert('Inserted! ')} />
</div>

<!-- Reactive editor state -->
<p>
  Chars: {api?.state.charCount ?? 0} ·
  Words: {api?.state.wordCount ?? 0} ·
  {api?.state.active.bold ? 'bold ' : ''}
  {api?.state.active.italic ? 'italic ' : ''}
</p>

<script lang="ts">
  import { Editor } from 'sv5ui/editor';
  import { Button } from 'sv5ui';
</script>

<!-- Fully custom toolbar - the snippet receives reactive `state` and `api`. -->
<Editor>
  {#snippet toolbarSlot({ state, api })}
    <div class="bg-surface-container/30 flex items-center gap-1 border-b border-on-surface/15 p-1">
      <Button
        size="xs" variant={state.active.bold ? 'solid' : 'ghost'}
        icon="lucide:bold" onclick={() => api.run('bold')}
        aria-pressed={state.active.bold} aria-label="Bold"
      />
      <Button
        size="xs" variant={state.active.italic ? 'solid' : 'ghost'}
        icon="lucide:italic" onclick={() => api.run('italic')}
        aria-pressed={state.active.italic} aria-label="Italic"
      />
      <span class="text-on-surface/40 ml-auto px-2 text-xs">
        {state.wordCount} words
      </span>
    </div>
  {/snippet}
</Editor>