svelora 3.0.1 → 3.0.2

package/dist/Editor/Editor.svelte

@@ -1,581 +1,446 @@
-<script lang="ts" module>import type { EditorProps } from './editor.types.js';
-export type Props = EditorProps;
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { type AnyExtension, Editor } from '@tiptap/core'
-    import BubbleMenuExt from '@tiptap/extension-bubble-menu'
-    import { untrack } from 'svelte'
-    import { getComponentConfig } from '../config.js'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Tooltip from '../Tooltip/Tooltip.svelte'
-    import EditorUrlPrompt from './EditorUrlPrompt.svelte'
-    import { buildExtensions } from './editor.extensions.js'
-    import {
-        httpUrlSchema,
-        isSafeImageSrc,
-        type UrlSchema, 
-        youtubeUrlSchema
-    } from './editor.schemas.js'
-    import { buildDefaultSlashCommands } from './editor.slash.svelte.js'
-    import { buildMentionSuggestion } from './editor.suggestion.js'
-    import { DEFAULT_TOOLBAR, TOOLBAR_ACTIONS, type ToolbarActionDef } from './editor.toolbar.js'
-    import type {
-        EditorApi,
-        EditorJSON,
-        EditorReactiveState,
-        ToolbarAction
-    } from './editor.types.js'
-    import { editorDefaults, editorVariants } from './editor.variants.js'
-
-    const config = getComponentConfig('editor', editorDefaults)
-
-    let {
-        ref = $bindable(null),
-        api = $bindable(),
-        value = $bindable(),
-        output = 'html',
-        placeholder,
-        id,
-        name,
-        onValueChange,
-        onFocus,
-        onBlur,
-        readonly = false,
-        disabled = false,
-        autofocus = false,
-        maxLength,
-        showCount = false,
-        toolbar = true,
-        stickyToolbar = false,
-        bubbleMenu = false,
-        headingLevels = [1, 2, 3],
-        autolink = true,
-        linkOpenInNewTab = true,
-        markdownAllowHtml = false,
-        image = false,
-        onImageUpload,
-        onImageUploadError,
-        tables = false,
-        onMention,
-        mentionTrigger = '@',
-        slash = false,
-        slashCommands,
-        slashTrigger = '/',
-        youtube = false,
-        dragHandle = false,
-        extensions: extraExtensions,
-        extensionsOverride,
-        size = config.defaultVariants.size ?? 'md',
-        color = config.defaultVariants.color ?? 'primary',
-        class: className,
-        ui,
-        toolbarSlot,
-        bubbleMenuSlot,
-        header,
-        footer,
-        ...restProps
-    }: Props = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    const resolvedOutput = untrack(() => output)
-
-    function getMarkdownStorage(ed: Editor): { getMarkdown?: () => string } | undefined {
-        return (ed.storage as unknown as Record<string, unknown>).markdown as
-            | { getMarkdown?: () => string }
-            | undefined
-    }
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    let contentElement: HTMLDivElement | null = $state(null)
-    let bubbleElement: HTMLDivElement | null = $state(null)
-    let editor: Editor | null = $state(null)
-
-    let editorState = $state<EditorReactiveState>({
-        active: {},
-        can: { undo: false, redo: false },
-        charCount: 0,
-        wordCount: 0,
-        isEmpty: true,
-        isFocused: false
-    })
-
-    function syncState(ed: Editor): void {
-        const cc = ed.storage.characterCount
-        const can = ed.can()
-        editorState = {
-            active: {
-                bold: ed.isActive('bold'),
-                italic: ed.isActive('italic'),
-                underline: ed.isActive('underline'),
-                strike: ed.isActive('strike'),
-                code: ed.isActive('code'),
-                h1: ed.isActive('heading', { level: 1 }),
-                h2: ed.isActive('heading', { level: 2 }),
-                h3: ed.isActive('heading', { level: 3 }),
-                paragraph: ed.isActive('paragraph'),
-                bulletList: ed.isActive('bulletList'),
-                orderedList: ed.isActive('orderedList'),
-                blockquote: ed.isActive('blockquote'),
-                codeBlock: ed.isActive('codeBlock'),
-                link: ed.isActive('link'),
-                alignLeft: ed.isActive({ textAlign: 'left' }),
-                alignCenter: ed.isActive({ textAlign: 'center' }),
-                alignRight: ed.isActive({ textAlign: 'right' }),
-                alignJustify: ed.isActive({ textAlign: 'justify' }),
-                image: ed.isActive('image'),
-                table: ed.isActive('table'),
-                youtube: ed.isActive('youtube')
-            },
-            can: {
-                undo: can.undo(),
-                redo: can.redo()
-            },
-            charCount: typeof cc?.characters === 'function' ? cc.characters() : 0,
-            wordCount: typeof cc?.words === 'function' ? cc.words() : 0,
-            isEmpty: ed.isEmpty,
-            isFocused: ed.isFocused
-        }
-    }
-
-    function serialize(ed: Editor): string | EditorJSON {
-        if (resolvedOutput === 'json') return ed.getJSON() as EditorJSON
-        if (resolvedOutput === 'markdown') {
-            const md = getMarkdownStorage(ed)
-            if (md && typeof md.getMarkdown === 'function') {
-                return md.getMarkdown()
-            }
-            return ed.getHTML()
-        }
-        return ed.getHTML()
-    }
-
-    function isContentEqual(a: unknown, b: unknown): boolean {
-        if (a === b) return true
-        if (typeof a !== typeof b) return false
-        if (typeof a === 'string' && typeof b === 'string') return a === b
-        try {
-            return JSON.stringify(a) === JSON.stringify(b)
-        } catch {
-            return false
-        }
-    }
-
-    function resolveSlashCommands() {
-        if (slashCommands) return slashCommands
-        if (!slash) return undefined
-        return buildDefaultSlashCommands({
-            image,
-            tables,
-            youtube,
-            promptUrl: (opts) =>
-                new Promise<string | null>((resolve) => {
-                    let done = false
-                    const settle = (value: string | null): void => {
-                        if (done) return
-                        done = true
-                        resolve(value)
-                    }
-                    openUrlPrompt({
-                        ...opts,
-                        onConfirm: (value) => settle(value),
-                        onCancel: () => settle(null)
-                    })
-                })
-        })
-    }
-
-    function resolveExtensions(): AnyExtension[] | Promise<AnyExtension[]> {
-        if (extensionsOverride) return extensionsOverride
-        return buildExtensions({
-            headingLevels,
-            placeholder,
-            autolink,
-            linkOpenInNewTab,
-            maxLength,
-            image,
-            tables,
-            youtube,
-            dragHandle,
-            markdown: resolvedOutput === 'markdown',
-            markdownAllowHtml,
-            mentionTrigger,
-            mentionSuggestion: onMention
-                ? buildMentionSuggestion({ onQuery: onMention })
-                : undefined,
-            slashCommands: resolveSlashCommands(),
-            slashTrigger,
-            extra: [
-                ...(extraExtensions ?? []),
-                ...(bubbleMenu && bubbleElement
-                    ? [
-                          BubbleMenuExt.configure({
-                              element: bubbleElement,
-                              options: {
-                                  placement: 'top'
-                              }
-                          })
-                      ]
-                    : [])
-            ]
-        })
-    }
-
-    let suppressUpdate = false
-    let lastEmitted: string | EditorJSON | undefined
-
-    $effect(() => {
-        if (!contentElement) return
-
-        const initialContent = untrack(() => value ?? '')
-        const initialEditable = untrack(() => !disabled && !readonly)
-        const initialAutofocus = untrack(() => autofocus)
-        const initialAttrs = untrack(() => ({
-            id: resolvedId,
-            ...(resolvedName ? { 'data-name': resolvedName } : {}),
-            ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}),
-            ...(hasError ? { 'aria-invalid': 'true' } : {})
-        }))
-        const el = contentElement
-        const result = untrack(() => resolveExtensions())
-
-        let ed: Editor | null = null
-        let cancelled = false
-
-        const create = (exts: AnyExtension[]) => {
-            if (cancelled) return
-            ed = new Editor({
-                element: el,
-                extensions: exts,
-                content: initialContent,
-                editable: initialEditable,
-                autofocus: initialAutofocus,
-                editorProps: {
-                    attributes: initialAttrs as Record<string, string>
-                },
-                onCreate: ({ editor: e }) => syncState(e),
-                onUpdate: ({ editor: e }) => {
-                    syncState(e)
-                    if (suppressUpdate) return
-                    const serialized = serialize(e)
-                    lastEmitted = serialized
-                    value = serialized
-                    emit.onInput()
-                    onValueChange?.(serialized)
-                },
-                onSelectionUpdate: ({ editor: e }) => syncState(e),
-                onFocus: ({ editor: e }) => {
-                    syncState(e)
-                    emit.onFocus()
-                    onFocus?.()
-                },
-                onBlur: ({ editor: e }) => {
-                    syncState(e)
-                    emit.onBlur()
-                    onBlur?.()
-                }
-            })
-            editor = ed
-        }
-
-        if (result instanceof Promise) {
-            result.then(create)
-        } else {
-            create(result)
-        }
-
-        return () => {
-            cancelled = true
-            ed?.destroy()
-            editor = null
-        }
-    })
-
-    $effect(() => {
-        if (!editor) return
-        const target = !disabled && !readonly
-        if (editor.isEditable !== target) {
-            editor.setEditable(target)
-        }
-    })
-
-    $effect(() => {
-        if (!contentElement) return
-        const pm = contentElement.querySelector('.ProseMirror') as HTMLElement | null
-        if (!pm) return
-        if (hasError) pm.setAttribute('aria-invalid', 'true')
-        else pm.removeAttribute('aria-invalid')
-        if (ariaDescribedBy) pm.setAttribute('aria-describedby', ariaDescribedBy)
-        else pm.removeAttribute('aria-describedby')
-        if (resolvedId) pm.setAttribute('id', resolvedId)
-    })
-
-    $effect(() => {
-        if (!editor) return
-        if (value === undefined) return
-        if (typeof value === 'string' && value === lastEmitted) return
-        const current = serialize(editor)
-        if (isContentEqual(current, value)) return
-        suppressUpdate = true
-        editor.commands.setContent(value as string | EditorJSON, { emitUpdate: false })
-        suppressUpdate = false
-        syncState(editor)
-    })
-
-    const apiInstance: EditorApi = {
-        get editor() {
-            return editor
-        },
-        get state() {
-            return editorState
-        },
-        focus(position) {
-            editor?.commands.focus(position)
-        },
-        run(action) {
-            if (!editor) return
-            TOOLBAR_ACTIONS[action].run(editor)
-        },
-        getValue(format) {
-            if (!editor) return resolvedOutput === 'json' ? ({} as EditorJSON) : ''
-            const fmt = format ?? resolvedOutput
-            if (fmt === 'json') return editor.getJSON() as EditorJSON
-            if (fmt === 'markdown') {
-                const md = getMarkdownStorage(editor)
-                if (md && typeof md.getMarkdown === 'function') return md.getMarkdown()
-                return editor.getHTML()
-            }
-            return editor.getHTML()
-        },
-        setValue(next) {
-            if (!editor) return
-            suppressUpdate = true
-            editor.commands.setContent(next as string | EditorJSON, { emitUpdate: false })
-            suppressUpdate = false
-            syncState(editor)
-        },
-        clear() {
-            editor?.chain().focus().clearContent().run()
-        },
-        insert(content) {
-            editor
-                ?.chain()
-                .focus()
-                .insertContent(content as string | EditorJSON)
-                .run()
-        }
-    }
-
-    api = apiInstance
-
-    const resolvedToolbar = $derived.by<(ToolbarAction | '|')[]>(() => {
-        if (toolbar === false) return []
-        if (toolbar === true) return DEFAULT_TOOLBAR
-        return toolbar as (ToolbarAction | '|')[]
-    })
-
-    const classes = $derived.by(() => {
-        const slots = editorVariants({
-            size,
-            color: resolvedColor,
-            sticky: stickyToolbar
-        })
-        const c = config.slots
-        const u = ui ?? {}
-        return {
-            root: slots.root({ class: [c.root, className, u.root] }),
-            toolbar: slots.toolbar({ class: [c.toolbar, u.toolbar] }),
-            toolbarButton: slots.toolbarButton({ class: [c.toolbarButton, u.toolbarButton] }),
-            toolbarSeparator: slots.toolbarSeparator({
-                class: [c.toolbarSeparator, u.toolbarSeparator]
-            }),
-            content: slots.content({ class: [c.content, u.content] }),
-            footer: slots.footer({ class: [c.footer, u.footer] }),
-            countLabel: slots.countLabel({ class: [c.countLabel, u.countLabel] }),
-            bubbleMenu: slots.bubbleMenu({ class: [c.bubbleMenu, u.bubbleMenu] })
-        }
-    })
-
-    interface UrlPromptState {
-        open: boolean
-        title: string
-        description?: string
-        placeholder: string
-        initialValue: string
-        confirmLabel: string
-        schema?: UrlSchema
-        onConfirm?: (url: string) => void
-        onCancel?: () => void
-    }
-
-    let urlPrompt = $state<UrlPromptState>({
-        open: false,
-        title: 'Enter URL',
-        placeholder: 'https://',
-        initialValue: '',
-        confirmLabel: 'Insert'
-    })
-
-    function openUrlPrompt(opts: {
-        title: string
-        description?: string
-        placeholder?: string
-        initialValue?: string
-        confirmLabel?: string
-        schema?: UrlSchema
-        onConfirm: (url: string) => void
-        onCancel?: () => void
-    }): void {
-        urlPrompt = {
-            open: true,
-            title: opts.title,
-            description: opts.description,
-            placeholder: opts.placeholder ?? 'https://',
-            initialValue: opts.initialValue ?? '',
-            confirmLabel: opts.confirmLabel ?? 'Insert',
-            schema: opts.schema,
-            onConfirm: opts.onConfirm,
-            onCancel: opts.onCancel
-        }
-    }
-
-    let fileInput: HTMLInputElement | null = $state(null)
-
-    async function handleFileSelected(event: Event): Promise<void> {
-        if (!editor) return
-        const input = event.currentTarget as HTMLInputElement
-        const file = input.files?.[0]
-        input.value = ''
-        if (!file) return
-        if (!onImageUpload) return
-        try {
-            const url = await onImageUpload(file)
-            if (!isSafeImageSrc(url)) {
-                console.warn(
-                    `[svelora] Blocked unsafe image src returned by onImageUpload: ${url}`
-                )
-                return
-            }
-            editor.chain().focus().setImage({ src: url }).run()
-        } catch (err) {
-            if (onImageUploadError) {
-                onImageUploadError(err)
-            } else {
-            }
-        }
-    }
-
-    function openImagePicker(): void {
-        if (!editor) return
-        if (!onImageUpload) {
-            openUrlPrompt({
-                title: 'Image URL',
-                placeholder: 'https://example.com/image.png',
-                schema: httpUrlSchema,
-                onConfirm: (url) => {
-                    editor?.chain().focus().setImage({ src: url }).run()
-                }
-            })
-            return
-        }
-        fileInput?.click()
-    }
-
-    function openYoutubePrompt(): void {
-        if (!editor) return
-        openUrlPrompt({
-            title: 'Embed YouTube video',
-            description: 'Paste the share link or full URL.',
-            placeholder: 'https://youtu.be/...',
-            confirmLabel: 'Embed',
-            schema: youtubeUrlSchema,
-            onConfirm: (url) => {
-                editor?.commands.setYoutubeVideo({ src: url })
-            }
-        })
-    }
-
-    function openLinkPrompt(): void {
-        if (!editor) return
-        const previous = (editor.getAttributes('link').href as string | undefined) ?? ''
-        openUrlPrompt({
-            title: 'Insert link',
-            placeholder: 'https://',
-            initialValue: previous,
-            schema: httpUrlSchema,
-            onConfirm: (url) => {
-                editor?.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
-            }
-        })
-    }
-
-    let tableMenuOpen = $state(false)
-    let tablePickerRows = $state(0)
-    let tablePickerCols = $state(0)
-    let tablePickerEl: HTMLDivElement | null = $state(null)
-    let tableButtonEl: HTMLButtonElement | null = $state(null)
-    const TABLE_MAX_ROWS = 8
-    const TABLE_MAX_COLS = 8
-
-    function insertTable(rows: number, cols: number): void {
-        if (!editor) return
-        editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run()
-        tableMenuOpen = false
-        tablePickerRows = 0
-        tablePickerCols = 0
-    }
-
-    $effect(() => {
-        if (!tableMenuOpen) return
-        function onDocPointerDown(event: PointerEvent): void {
-            const target = event.target as Node | null
-            if (!target) return
-            if (tablePickerEl?.contains(target)) return
-            if (tableButtonEl?.contains(target)) return
-            tableMenuOpen = false
-            tablePickerRows = 0
-            tablePickerCols = 0
-        }
-        document.addEventListener('pointerdown', onDocPointerDown, true)
-        return () => document.removeEventListener('pointerdown', onDocPointerDown, true)
-    })
-
-    function runAction(def: ToolbarActionDef, id: ToolbarAction): void {
-        if (!editor) return
-        if (id === 'image') {
-            openImagePicker()
-            return
-        }
-        if (id === 'youtube') {
-            openYoutubePrompt()
-            return
-        }
-        if (id === 'link') {
-            openLinkPrompt()
-            return
-        }
-        if (id === 'table') {
-            tableMenuOpen = !tableMenuOpen
-            return
-        }
-        def.run(editor)
-    }
+<script lang="ts">import { Editor } from "@tiptap/core";
+import BubbleMenuExt from "@tiptap/extension-bubble-menu";
+import { untrack } from "svelte";
+import { getComponentConfig } from "../config.js";
+import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import Icon from "../Icon/Icon.svelte";
+import Tooltip from "../Tooltip/Tooltip.svelte";
+import EditorUrlPrompt from "./EditorUrlPrompt.svelte";
+import { buildExtensions } from "./editor.extensions.js";
+import { httpUrlSchema, isSafeImageSrc, youtubeUrlSchema } from "./editor.schemas.js";
+import { buildDefaultSlashCommands } from "./editor.slash.svelte.js";
+import { buildMentionSuggestion } from "./editor.suggestion.js";
+import { DEFAULT_TOOLBAR, TOOLBAR_ACTIONS } from "./editor.toolbar.js";
+import { editorDefaults, editorVariants } from "./editor.variants.js";
+const config = getComponentConfig("editor", editorDefaults);
+let { ref = $bindable(null), api = $bindable(), value = $bindable(), output = "html", placeholder, id, name, onValueChange, onFocus, onBlur, readonly = false, disabled = false, autofocus = false, maxLength, showCount = false, toolbar = true, stickyToolbar = false, bubbleMenu = false, headingLevels = [
+	1,
+	2,
+	3
+], autolink = true, linkOpenInNewTab = true, markdownAllowHtml = false, image = false, onImageUpload, onImageUploadError, tables = false, onMention, mentionTrigger = "@", slash = false, slashCommands, slashTrigger = "/", youtube = false, dragHandle = false, extensions: extraExtensions, extensionsOverride, size = config.defaultVariants.size ?? "md", color = config.defaultVariants.color ?? "primary", class: className, ui, toolbarSlot, bubbleMenuSlot, header, footer, ...restProps } = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const resolvedOutput = untrack(() => output);
+function getMarkdownStorage(ed) {
+	return ed.storage.markdown;
+}
+const hasError = $derived(formFieldContext?.error !== undefined && formFieldContext?.error !== false);
+const resolvedColor = $derived(hasError ? "error" : color);
+const resolvedId = $derived(id ?? formFieldContext?.ariaId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const ariaDescribedBy = $derived(!formFieldContext ? undefined : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`);
+let contentElement = $state(null);
+let bubbleElement = $state(null);
+let editor = $state(null);
+let editorState = $state({
+	active: {},
+	can: {
+		undo: false,
+		redo: false
+	},
+	charCount: 0,
+	wordCount: 0,
+	isEmpty: true,
+	isFocused: false
+});
+function syncState(ed) {
+	const cc = ed.storage.characterCount;
+	const can = ed.can();
+	editorState = {
+		active: {
+			bold: ed.isActive("bold"),
+			italic: ed.isActive("italic"),
+			underline: ed.isActive("underline"),
+			strike: ed.isActive("strike"),
+			code: ed.isActive("code"),
+			h1: ed.isActive("heading", { level: 1 }),
+			h2: ed.isActive("heading", { level: 2 }),
+			h3: ed.isActive("heading", { level: 3 }),
+			paragraph: ed.isActive("paragraph"),
+			bulletList: ed.isActive("bulletList"),
+			orderedList: ed.isActive("orderedList"),
+			blockquote: ed.isActive("blockquote"),
+			codeBlock: ed.isActive("codeBlock"),
+			link: ed.isActive("link"),
+			alignLeft: ed.isActive({ textAlign: "left" }),
+			alignCenter: ed.isActive({ textAlign: "center" }),
+			alignRight: ed.isActive({ textAlign: "right" }),
+			alignJustify: ed.isActive({ textAlign: "justify" }),
+			image: ed.isActive("image"),
+			table: ed.isActive("table"),
+			youtube: ed.isActive("youtube")
+		},
+		can: {
+			undo: can.undo(),
+			redo: can.redo()
+		},
+		charCount: typeof cc?.characters === "function" ? cc.characters() : 0,
+		wordCount: typeof cc?.words === "function" ? cc.words() : 0,
+		isEmpty: ed.isEmpty,
+		isFocused: ed.isFocused
+	};
+}
+function serialize(ed) {
+	if (resolvedOutput === "json") return ed.getJSON();
+	if (resolvedOutput === "markdown") {
+		const md = getMarkdownStorage(ed);
+		if (md && typeof md.getMarkdown === "function") {
+			return md.getMarkdown();
+		}
+		return ed.getHTML();
+	}
+	return ed.getHTML();
+}
+function isContentEqual(a, b) {
+	if (a === b) return true;
+	if (typeof a !== typeof b) return false;
+	if (typeof a === "string" && typeof b === "string") return a === b;
+	try {
+		return JSON.stringify(a) === JSON.stringify(b);
+	} catch {
+		return false;
+	}
+}
+function resolveSlashCommands() {
+	if (slashCommands) return slashCommands;
+	if (!slash) return undefined;
+	return buildDefaultSlashCommands({
+		image,
+		tables,
+		youtube,
+		promptUrl: (opts) => new Promise((resolve) => {
+			let done = false;
+			const settle = (value) => {
+				if (done) return;
+				done = true;
+				resolve(value);
+			};
+			openUrlPrompt({
+				...opts,
+				onConfirm: (value) => settle(value),
+				onCancel: () => settle(null)
+			});
+		})
+	});
+}
+function resolveExtensions() {
+	if (extensionsOverride) return extensionsOverride;
+	return buildExtensions({
+		headingLevels,
+		placeholder,
+		autolink,
+		linkOpenInNewTab,
+		maxLength,
+		image,
+		tables,
+		youtube,
+		dragHandle,
+		markdown: resolvedOutput === "markdown",
+		markdownAllowHtml,
+		mentionTrigger,
+		mentionSuggestion: onMention ? buildMentionSuggestion({ onQuery: onMention }) : undefined,
+		slashCommands: resolveSlashCommands(),
+		slashTrigger,
+		extra: [...extraExtensions ?? [], ...bubbleMenu && bubbleElement ? [BubbleMenuExt.configure({
+			element: bubbleElement,
+			options: { placement: "top" }
+		})] : []]
+	});
+}
+let suppressUpdate = false;
+let lastEmitted;
+$effect(() => {
+	if (!contentElement) return;
+	const initialContent = untrack(() => value ?? "");
+	const initialEditable = untrack(() => !disabled && !readonly);
+	const initialAutofocus = untrack(() => autofocus);
+	const initialAttrs = untrack(() => ({
+		id: resolvedId,
+		...resolvedName ? { "data-name": resolvedName } : {},
+		...ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {},
+		...hasError ? { "aria-invalid": "true" } : {}
+	}));
+	const el = contentElement;
+	const result = untrack(() => resolveExtensions());
+	let ed = null;
+	let cancelled = false;
+	const create = (exts) => {
+		if (cancelled) return;
+		ed = new Editor({
+			element: el,
+			extensions: exts,
+			content: initialContent,
+			editable: initialEditable,
+			autofocus: initialAutofocus,
+			editorProps: { attributes: initialAttrs },
+			onCreate: ({ editor: e }) => syncState(e),
+			onUpdate: ({ editor: e }) => {
+				syncState(e);
+				if (suppressUpdate) return;
+				const serialized = serialize(e);
+				lastEmitted = serialized;
+				value = serialized;
+				emit.onInput();
+				onValueChange?.(serialized);
+			},
+			onSelectionUpdate: ({ editor: e }) => syncState(e),
+			onFocus: ({ editor: e }) => {
+				syncState(e);
+				emit.onFocus();
+				onFocus?.();
+			},
+			onBlur: ({ editor: e }) => {
+				syncState(e);
+				emit.onBlur();
+				onBlur?.();
+			}
+		});
+		editor = ed;
+	};
+	if (result instanceof Promise) {
+		result.then(create);
+	} else {
+		create(result);
+	}
+	return () => {
+		cancelled = true;
+		ed?.destroy();
+		editor = null;
+	};
+});
+$effect(() => {
+	if (!editor) return;
+	const target = !disabled && !readonly;
+	if (editor.isEditable !== target) {
+		editor.setEditable(target);
+	}
+});
+$effect(() => {
+	if (!contentElement) return;
+	const pm = contentElement.querySelector(".ProseMirror");
+	if (!pm) return;
+	if (hasError) pm.setAttribute("aria-invalid", "true");
+	else pm.removeAttribute("aria-invalid");
+	if (ariaDescribedBy) pm.setAttribute("aria-describedby", ariaDescribedBy);
+	else pm.removeAttribute("aria-describedby");
+	if (resolvedId) pm.setAttribute("id", resolvedId);
+});
+$effect(() => {
+	if (!editor) return;
+	if (value === undefined) return;
+	if (typeof value === "string" && value === lastEmitted) return;
+	const current = serialize(editor);
+	if (isContentEqual(current, value)) return;
+	suppressUpdate = true;
+	editor.commands.setContent(value, { emitUpdate: false });
+	suppressUpdate = false;
+	syncState(editor);
+});
+const apiInstance = {
+	get editor() {
+		return editor;
+	},
+	get state() {
+		return editorState;
+	},
+	focus(position) {
+		editor?.commands.focus(position);
+	},
+	run(action) {
+		if (!editor) return;
+		TOOLBAR_ACTIONS[action].run(editor);
+	},
+	getValue(format) {
+		if (!editor) return resolvedOutput === "json" ? {} : "";
+		const fmt = format ?? resolvedOutput;
+		if (fmt === "json") return editor.getJSON();
+		if (fmt === "markdown") {
+			const md = getMarkdownStorage(editor);
+			if (md && typeof md.getMarkdown === "function") return md.getMarkdown();
+			return editor.getHTML();
+		}
+		return editor.getHTML();
+	},
+	setValue(next) {
+		if (!editor) return;
+		suppressUpdate = true;
+		editor.commands.setContent(next, { emitUpdate: false });
+		suppressUpdate = false;
+		syncState(editor);
+	},
+	clear() {
+		editor?.chain().focus().clearContent().run();
+	},
+	insert(content) {
+		editor?.chain().focus().insertContent(content).run();
+	}
+};
+api = apiInstance;
+const resolvedToolbar = $derived.by(() => {
+	if (toolbar === false) return [];
+	if (toolbar === true) return DEFAULT_TOOLBAR;
+	return toolbar;
+});
+const classes = $derived.by(() => {
+	const slots = editorVariants({
+		size,
+		color: resolvedColor,
+		sticky: stickyToolbar
+	});
+	const c = config.slots;
+	const u = ui ?? {};
+	return {
+		root: slots.root({ class: [
+			c.root,
+			className,
+			u.root
+		] }),
+		toolbar: slots.toolbar({ class: [c.toolbar, u.toolbar] }),
+		toolbarButton: slots.toolbarButton({ class: [c.toolbarButton, u.toolbarButton] }),
+		toolbarSeparator: slots.toolbarSeparator({ class: [c.toolbarSeparator, u.toolbarSeparator] }),
+		content: slots.content({ class: [c.content, u.content] }),
+		footer: slots.footer({ class: [c.footer, u.footer] }),
+		countLabel: slots.countLabel({ class: [c.countLabel, u.countLabel] }),
+		bubbleMenu: slots.bubbleMenu({ class: [c.bubbleMenu, u.bubbleMenu] })
+	};
+});
+let urlPrompt = $state({
+	open: false,
+	title: "Enter URL",
+	placeholder: "https://",
+	initialValue: "",
+	confirmLabel: "Insert"
+});
+function openUrlPrompt(opts) {
+	urlPrompt = {
+		open: true,
+		title: opts.title,
+		description: opts.description,
+		placeholder: opts.placeholder ?? "https://",
+		initialValue: opts.initialValue ?? "",
+		confirmLabel: opts.confirmLabel ?? "Insert",
+		schema: opts.schema,
+		onConfirm: opts.onConfirm,
+		onCancel: opts.onCancel
+	};
+}
+let fileInput = $state(null);
+async function handleFileSelected(event) {
+	if (!editor) return;
+	const input = event.currentTarget;
+	const file = input.files?.[0];
+	input.value = "";
+	if (!file) return;
+	if (!onImageUpload) return;
+	try {
+		const url = await onImageUpload(file);
+		if (!isSafeImageSrc(url)) {
+			console.warn(`[svelora] Blocked unsafe image src returned by onImageUpload: ${url}`);
+			return;
+		}
+		editor.chain().focus().setImage({ src: url }).run();
+	} catch (err) {
+		if (onImageUploadError) {
+			onImageUploadError(err);
+		} else {}
+	}
+}
+function openImagePicker() {
+	if (!editor) return;
+	if (!onImageUpload) {
+		openUrlPrompt({
+			title: "Image URL",
+			placeholder: "https://example.com/image.png",
+			schema: httpUrlSchema,
+			onConfirm: (url) => {
+				editor?.chain().focus().setImage({ src: url }).run();
+			}
+		});
+		return;
+	}
+	fileInput?.click();
+}
+function openYoutubePrompt() {
+	if (!editor) return;
+	openUrlPrompt({
+		title: "Embed YouTube video",
+		description: "Paste the share link or full URL.",
+		placeholder: "https://youtu.be/...",
+		confirmLabel: "Embed",
+		schema: youtubeUrlSchema,
+		onConfirm: (url) => {
+			editor?.commands.setYoutubeVideo({ src: url });
+		}
+	});
+}
+function openLinkPrompt() {
+	if (!editor) return;
+	const previous = editor.getAttributes("link").href ?? "";
+	openUrlPrompt({
+		title: "Insert link",
+		placeholder: "https://",
+		initialValue: previous,
+		schema: httpUrlSchema,
+		onConfirm: (url) => {
+			editor?.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+		}
+	});
+}
+let tableMenuOpen = $state(false);
+let tablePickerRows = $state(0);
+let tablePickerCols = $state(0);
+let tablePickerEl = $state(null);
+let tableButtonEl = $state(null);
+const TABLE_MAX_ROWS = 8;
+const TABLE_MAX_COLS = 8;
+function insertTable(rows, cols) {
+	if (!editor) return;
+	editor.chain().focus().insertTable({
+		rows,
+		cols,
+		withHeaderRow: true
+	}).run();
+	tableMenuOpen = false;
+	tablePickerRows = 0;
+	tablePickerCols = 0;
+}
+$effect(() => {
+	if (!tableMenuOpen) return;
+	function onDocPointerDown(event) {
+		const target = event.target;
+		if (!target) return;
+		if (tablePickerEl?.contains(target)) return;
+		if (tableButtonEl?.contains(target)) return;
+		tableMenuOpen = false;
+		tablePickerRows = 0;
+		tablePickerCols = 0;
+	}
+	document.addEventListener("pointerdown", onDocPointerDown, true);
+	return () => document.removeEventListener("pointerdown", onDocPointerDown, true);
+});
+function runAction(def, id) {
+	if (!editor) return;
+	if (id === "image") {
+		openImagePicker();
+		return;
+	}
+	if (id === "youtube") {
+		openYoutubePrompt();
+		return;
+	}
+	if (id === "link") {
+		openLinkPrompt();
+		return;
+	}
+	if (id === "table") {
+		tableMenuOpen = !tableMenuOpen;
+		return;
+	}
+	def.run(editor);
+}
 </script>
 
 <div