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> {
    // Replace with your real upload (S3, Cloudinary, …).
    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>

<!-- IMPORTANT: enabling `image` activates the extension (paste/drop work,
     slash commands work) but does NOT auto-add the button to the toolbar.
     Include 'image' in the toolbar array to show the picker button. -->
<Editor
  image
  onImageUpload={uploadImage}
  toolbar={['bold', 'italic', '|', 'h2', 'h3', '|', 'bulletList', 'orderedList', '|', 'link', 'image', '|', '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>