svelora 2.1.0

package/dist/Editor/editor.slash.svelte.js

@@ -0,0 +1,299 @@
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { Extension } from '@tiptap/core';
+import { Suggestion } from '@tiptap/suggestion';
+import { mount, unmount } from 'svelte';
+import { httpUrlSchema, youtubeUrlSchema } from './editor.schemas.js';
+import SlashPopup from './SlashPopup.svelte';
+function defaultPromptUrl(opts) {
+    if (typeof window === 'undefined')
+        return Promise.resolve(null);
+    return Promise.resolve(window.prompt(opts.title, opts.initialValue ?? opts.placeholder ?? ''));
+}
+export function buildDefaultSlashCommands(ctx = {}) {
+    const commands = [
+        {
+            id: 'paragraph',
+            label: 'Text',
+            description: 'Plain paragraph',
+            icon: 'lucide:pilcrow',
+            keywords: ['p', 'text', 'paragraph'],
+            run: ({ editor }) => editor.chain().focus().setParagraph().run()
+        },
+        {
+            id: 'h1',
+            label: 'Heading 1',
+            description: 'Large section heading',
+            icon: 'lucide:heading-1',
+            keywords: ['h1', 'header', 'title'],
+            run: ({ editor }) => editor.chain().focus().toggleHeading({ level: 1 }).run()
+        },
+        {
+            id: 'h2',
+            label: 'Heading 2',
+            description: 'Medium section heading',
+            icon: 'lucide:heading-2',
+            keywords: ['h2', 'subtitle'],
+            run: ({ editor }) => editor.chain().focus().toggleHeading({ level: 2 }).run()
+        },
+        {
+            id: 'h3',
+            label: 'Heading 3',
+            description: 'Small section heading',
+            icon: 'lucide:heading-3',
+            keywords: ['h3'],
+            run: ({ editor }) => editor.chain().focus().toggleHeading({ level: 3 }).run()
+        },
+        {
+            id: 'bulletList',
+            label: 'Bullet list',
+            description: 'Unordered list',
+            icon: 'lucide:list',
+            keywords: ['ul', 'bullet', 'list'],
+            run: ({ editor }) => editor.chain().focus().toggleBulletList().run()
+        },
+        {
+            id: 'orderedList',
+            label: 'Numbered list',
+            description: 'Ordered list',
+            icon: 'lucide:list-ordered',
+            keywords: ['ol', 'numbered', 'ordered'],
+            run: ({ editor }) => editor.chain().focus().toggleOrderedList().run()
+        },
+        {
+            id: 'blockquote',
+            label: 'Quote',
+            description: 'Highlight a passage',
+            icon: 'lucide:quote',
+            keywords: ['quote', 'blockquote'],
+            run: ({ editor }) => editor.chain().focus().toggleBlockquote().run()
+        },
+        {
+            id: 'codeBlock',
+            label: 'Code block',
+            description: 'Fenced code with syntax highlighting',
+            icon: 'lucide:square-code',
+            keywords: ['code', 'pre', 'fence'],
+            run: ({ editor }) => editor.chain().focus().toggleCodeBlock().run()
+        },
+        {
+            id: 'horizontalRule',
+            label: 'Divider',
+            description: 'Horizontal rule',
+            icon: 'lucide:minus',
+            keywords: ['hr', 'divider', 'rule', 'separator'],
+            run: ({ editor }) => editor.chain().focus().setHorizontalRule().run()
+        }
+    ];
+    const promptUrl = ctx.promptUrl ?? defaultPromptUrl;
+    if (ctx.image) {
+        commands.push({
+            id: 'image',
+            label: 'Image',
+            description: 'Insert an image from URL',
+            icon: 'lucide:image',
+            keywords: ['image', 'picture', 'photo'],
+            run: async ({ editor }) => {
+                const url = await promptUrl({
+                    title: 'Image URL',
+                    placeholder: 'https://example.com/image.png',
+                    schema: httpUrlSchema
+                });
+                if (!url)
+                    return;
+                editor.chain().focus().setImage({ src: url }).run();
+            }
+        });
+    }
+    if (ctx.tables) {
+        commands.push({
+            id: 'table',
+            label: 'Table',
+            description: 'Insert a 3×3 table',
+            icon: 'lucide:table',
+            keywords: ['table', 'grid'],
+            run: ({ editor }) => {
+                editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+            }
+        });
+    }
+    if (ctx.youtube) {
+        commands.push({
+            id: 'youtube',
+            label: 'YouTube',
+            description: 'Embed a YouTube video',
+            icon: 'lucide:youtube',
+            keywords: ['youtube', 'video', 'embed'],
+            run: async ({ editor }) => {
+                const url = await promptUrl({
+                    title: 'Embed YouTube video',
+                    description: 'Paste the share link or full URL.',
+                    placeholder: 'https://youtu.be/...',
+                    confirmLabel: 'Embed',
+                    schema: youtubeUrlSchema
+                });
+                if (!url)
+                    return;
+                editor.commands.setYoutubeVideo({ src: url });
+            }
+        });
+    }
+    return commands;
+}
+let slashSeq = 0;
+function substringFilter(commands, query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return commands;
+    return commands.filter((cmd) => {
+        if (cmd.label.toLowerCase().includes(q))
+            return true;
+        if (cmd.description?.toLowerCase().includes(q))
+            return true;
+        if (cmd.keywords?.some((k) => k.toLowerCase().includes(q)))
+            return true;
+        return cmd.id.toLowerCase().includes(q);
+    });
+}
+function buildSuggestionRender() {
+    let handle = null;
+    return {
+        onStart: (props) => {
+            if (typeof document === 'undefined')
+                return;
+            const seq = ++slashSeq;
+            const listboxId = `svelora-slash-listbox-${seq}`;
+            const optionIdPrefix = `svelora-slash-${seq}-`;
+            const editorDom = props.editor.view.dom;
+            const container = document.createElement('div');
+            container.setAttribute('data-editor-slash-container', '');
+            container.style.cssText = 'position:absolute;top:0;left:0;z-index:50;';
+            document.body.appendChild(container);
+            const state = $state({
+                items: props.items,
+                selectedIndex: 0,
+                listboxId,
+                optionIdPrefix,
+                onPick: (i) => {
+                    const cmd = state.items[i];
+                    if (!cmd)
+                        return;
+                    props.command(cmd);
+                }
+            });
+            const component = mount(SlashPopup, {
+                target: container,
+                props: state
+            });
+            editorDom.setAttribute('aria-controls', listboxId);
+            editorDom.setAttribute('aria-expanded', 'true');
+            const stopActiveDescendant = $effect.root(() => {
+                $effect(() => {
+                    if (state.items.length > 0) {
+                        editorDom.setAttribute('aria-activedescendant', `${optionIdPrefix}${state.selectedIndex}`);
+                    }
+                    else {
+                        editorDom.removeAttribute('aria-activedescendant');
+                    }
+                });
+            });
+            handle = {
+                container,
+                component,
+                state,
+                cleanup: null,
+                editorDom,
+                stopActiveDescendant
+            };
+            const rect = props.clientRect?.();
+            if (rect) {
+                const virtualEl = { getBoundingClientRect: () => rect };
+                handle.cleanup = autoUpdate(virtualEl, container, () => {
+                    void computePosition(virtualEl, container, {
+                        placement: 'bottom-start',
+                        middleware: [offset(6), flip(), shift({ padding: 8 })]
+                    }).then(({ x, y }) => {
+                        container.style.left = `${x}px`;
+                        container.style.top = `${y}px`;
+                    });
+                });
+            }
+        },
+        onUpdate: (props) => {
+            if (!handle)
+                return;
+            handle.state.items = props.items;
+            handle.state.selectedIndex = 0;
+        },
+        onKeyDown: (props) => {
+            if (!handle)
+                return false;
+            const len = Math.max(handle.state.items.length, 1);
+            if (props.event.key === 'ArrowDown') {
+                handle.state.selectedIndex = (handle.state.selectedIndex + 1) % len;
+                return true;
+            }
+            if (props.event.key === 'ArrowUp') {
+                handle.state.selectedIndex = (handle.state.selectedIndex + len - 1) % len;
+                return true;
+            }
+            if (props.event.key === 'Enter') {
+                handle.state.onPick(handle.state.selectedIndex);
+                return true;
+            }
+            return false;
+        },
+        onExit: () => {
+            if (!handle)
+                return;
+            handle.cleanup?.();
+            handle.stopActiveDescendant?.();
+            if (handle.editorDom) {
+                handle.editorDom.removeAttribute('aria-controls');
+                handle.editorDom.removeAttribute('aria-expanded');
+                handle.editorDom.removeAttribute('aria-activedescendant');
+            }
+            unmount(handle.component);
+            handle.container.remove();
+            handle = null;
+        }
+    };
+}
+export const SlashCommandsExtension = Extension.create({
+    name: 'slashCommands',
+    addOptions() {
+        return {
+            suggestion: {
+                char: '/',
+                startOfLine: false,
+                allowSpaces: false,
+                command: ({ editor, range, props }) => {
+                    editor.chain().focus().deleteRange(range).run();
+                    props.run({ editor });
+                }
+            }
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            Suggestion({
+                editor: this.editor,
+                ...this.options.suggestion
+            })
+        ];
+    }
+});
+export function buildSlashExtension(commands, trigger = '/') {
+    return SlashCommandsExtension.configure({
+        suggestion: {
+            char: trigger,
+            startOfLine: false,
+            allowSpaces: false,
+            items: ({ query }) => substringFilter(commands, query),
+            render: buildSuggestionRender,
+            command: ({ editor, range, props }) => {
+                editor.chain().focus().deleteRange(range).run();
+                props.run({ editor });
+            }
+        }
+    });
+}

package/dist/Editor/editor.suggestion.d.ts

@@ -0,0 +1,7 @@
+import type { SuggestionOptions } from '@tiptap/suggestion';
+import type { MentionItem } from './editor.types.js';
+interface BuildMentionSuggestionOptions {
+    onQuery: (query: string) => Promise<MentionItem[]>;
+}
+export declare function buildMentionSuggestion(options: BuildMentionSuggestionOptions): Omit<SuggestionOptions, 'editor'>;
+export {};

package/dist/Editor/editor.suggestion.js

@@ -0,0 +1,165 @@
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+let mentionSeq = 0;
+function createPopup() {
+    const popup = document.createElement('div');
+    popup.setAttribute('data-editor-mention-popup', '');
+    popup.className = [
+        'absolute z-50 min-w-44 max-w-72 overflow-hidden',
+        'rounded-lg border border-outline-variant bg-surface shadow-lg',
+        'py-1 max-h-64 overflow-y-auto'
+    ].join(' ');
+    return popup;
+}
+function renderItems(state) {
+    if (!state.listEl)
+        return;
+    state.listEl.innerHTML = '';
+    if (state.items.length === 0) {
+        const empty = document.createElement('div');
+        empty.className = 'px-3 py-2 text-sm text-on-surface-variant';
+        empty.textContent = 'No matches';
+        state.listEl.appendChild(empty);
+        return;
+    }
+    state.items.forEach((item, i) => {
+        const row = document.createElement('button');
+        row.type = 'button';
+        row.setAttribute('data-mention-item', '');
+        row.setAttribute('data-index', String(i));
+        row.setAttribute('role', 'option');
+        row.id = `${state.optionIdPrefix}${i}`;
+        row.setAttribute('aria-selected', i === state.selectedIndex ? 'true' : 'false');
+        row.className = [
+            'flex w-full items-center gap-2 px-3 py-1.5 text-sm text-start',
+            'hover:bg-surface-container-high',
+            i === state.selectedIndex
+                ? 'bg-primary-container text-on-primary-container'
+                : 'text-on-surface'
+        ].join(' ');
+        if (item.avatar) {
+            const img = document.createElement('img');
+            img.src = item.avatar;
+            img.alt = '';
+            img.className = 'size-5 rounded-full shrink-0 object-cover';
+            row.appendChild(img);
+        }
+        const label = document.createElement('span');
+        label.className = 'truncate';
+        label.textContent = item.label;
+        row.appendChild(label);
+        row.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            state.pickItem(i);
+        });
+        state.listEl?.appendChild(row);
+    });
+    if (state.editorDom && state.items.length > 0) {
+        state.editorDom.setAttribute('aria-activedescendant', `${state.optionIdPrefix}${state.selectedIndex}`);
+    }
+}
+export function buildMentionSuggestion(options) {
+    return {
+        items: async ({ query }) => {
+            try {
+                return await options.onQuery(query);
+            }
+            catch {
+                return [];
+            }
+        },
+        render: () => {
+            let state = null;
+            return {
+                onStart: (props) => {
+                    if (typeof document === 'undefined')
+                        return;
+                    const seq = ++mentionSeq;
+                    const listboxId = `ps-mention-listbox-${seq}`;
+                    const optionIdPrefix = `ps-mention-${seq}-`;
+                    const editorDom = props.editor.view.dom;
+                    const popupEl = createPopup();
+                    const listEl = document.createElement('div');
+                    listEl.setAttribute('role', 'listbox');
+                    listEl.id = listboxId;
+                    listEl.setAttribute('aria-label', 'Mentions');
+                    popupEl.appendChild(listEl);
+                    document.body.appendChild(popupEl);
+                    editorDom.setAttribute('aria-controls', listboxId);
+                    editorDom.setAttribute('aria-expanded', 'true');
+                    state = {
+                        items: props.items,
+                        selectedIndex: 0,
+                        popupEl,
+                        listEl,
+                        cleanup: null,
+                        editorDom,
+                        listboxId,
+                        optionIdPrefix,
+                        pickItem: (i) => {
+                            const it = state?.items[i];
+                            if (!it)
+                                return;
+                            props.command({ ...it });
+                        }
+                    };
+                    renderItems(state);
+                    const rect = props.clientRect?.();
+                    if (rect) {
+                        const virtualEl = {
+                            getBoundingClientRect: () => rect
+                        };
+                        state.cleanup = autoUpdate(virtualEl, popupEl, () => {
+                            void computePosition(virtualEl, popupEl, {
+                                placement: 'bottom-start',
+                                middleware: [offset(6), flip(), shift({ padding: 8 })]
+                            }).then(({ x, y }) => {
+                                popupEl.style.left = `${x}px`;
+                                popupEl.style.top = `${y}px`;
+                            });
+                        });
+                    }
+                },
+                onUpdate: (props) => {
+                    if (!state)
+                        return;
+                    state.items = props.items;
+                    state.selectedIndex = 0;
+                    renderItems(state);
+                },
+                onKeyDown: (props) => {
+                    if (!state)
+                        return false;
+                    const { event } = props;
+                    if (event.key === 'ArrowDown') {
+                        state.selectedIndex =
+                            (state.selectedIndex + 1) % Math.max(state.items.length, 1);
+                        renderItems(state);
+                        return true;
+                    }
+                    if (event.key === 'ArrowUp') {
+                        state.selectedIndex =
+                            (state.selectedIndex + state.items.length - 1) %
+                                Math.max(state.items.length, 1);
+                        renderItems(state);
+                        return true;
+                    }
+                    if (event.key === 'Enter') {
+                        state.pickItem(state.selectedIndex);
+                        return true;
+                    }
+                    return false;
+                },
+                onExit: () => {
+                    state?.cleanup?.();
+                    state?.popupEl?.remove();
+                    if (state?.editorDom) {
+                        state.editorDom.removeAttribute('aria-controls');
+                        state.editorDom.removeAttribute('aria-expanded');
+                        state.editorDom.removeAttribute('aria-activedescendant');
+                    }
+                    state = null;
+                }
+            };
+        }
+    };
+}

package/dist/Editor/editor.toolbar.d.ts

@@ -0,0 +1,11 @@
+import type { Editor } from '@tiptap/core';
+import type { EditorReactiveState, ToolbarAction } from './editor.types.js';
+export interface ToolbarActionDef {
+    icon: string;
+    label: string;
+    isActive?: (state: EditorReactiveState) => boolean | undefined;
+    isDisabled?: (state: EditorReactiveState) => boolean | undefined;
+    run: (editor: Editor) => void;
+}
+export declare const TOOLBAR_ACTIONS: Record<ToolbarAction, ToolbarActionDef>;
+export declare const DEFAULT_TOOLBAR: (ToolbarAction | '|')[];

package/dist/Editor/editor.toolbar.js

@@ -0,0 +1,204 @@
+function promptForLink(editor) {
+    const previous = editor.getAttributes('link').href ?? 'https://';
+    const url = typeof window === 'undefined' ? null : window.prompt('URL', previous);
+    if (url === null)
+        return;
+    if (url.trim() === '') {
+        editor.chain().focus().extendMarkRange('link').unsetLink().run();
+        return;
+    }
+    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+}
+export const TOOLBAR_ACTIONS = {
+    bold: {
+        icon: 'lucide:bold',
+        label: 'Bold',
+        isActive: (s) => s.active.bold,
+        run: (ed) => ed.chain().focus().toggleBold().run()
+    },
+    italic: {
+        icon: 'lucide:italic',
+        label: 'Italic',
+        isActive: (s) => s.active.italic,
+        run: (ed) => ed.chain().focus().toggleItalic().run()
+    },
+    underline: {
+        icon: 'lucide:underline',
+        label: 'Underline',
+        isActive: (s) => s.active.underline,
+        run: (ed) => ed.chain().focus().toggleUnderline().run()
+    },
+    strike: {
+        icon: 'lucide:strikethrough',
+        label: 'Strikethrough',
+        isActive: (s) => s.active.strike,
+        run: (ed) => ed.chain().focus().toggleStrike().run()
+    },
+    code: {
+        icon: 'lucide:code',
+        label: 'Inline code',
+        isActive: (s) => s.active.code,
+        run: (ed) => ed.chain().focus().toggleCode().run()
+    },
+    h1: {
+        icon: 'lucide:heading-1',
+        label: 'Heading 1',
+        isActive: (s) => s.active.h1,
+        run: (ed) => ed.chain().focus().toggleHeading({ level: 1 }).run()
+    },
+    h2: {
+        icon: 'lucide:heading-2',
+        label: 'Heading 2',
+        isActive: (s) => s.active.h2,
+        run: (ed) => ed.chain().focus().toggleHeading({ level: 2 }).run()
+    },
+    h3: {
+        icon: 'lucide:heading-3',
+        label: 'Heading 3',
+        isActive: (s) => s.active.h3,
+        run: (ed) => ed.chain().focus().toggleHeading({ level: 3 }).run()
+    },
+    paragraph: {
+        icon: 'lucide:pilcrow',
+        label: 'Paragraph',
+        isActive: (s) => s.active.paragraph,
+        run: (ed) => ed.chain().focus().setParagraph().run()
+    },
+    bulletList: {
+        icon: 'lucide:list',
+        label: 'Bullet list',
+        isActive: (s) => s.active.bulletList,
+        run: (ed) => ed.chain().focus().toggleBulletList().run()
+    },
+    orderedList: {
+        icon: 'lucide:list-ordered',
+        label: 'Numbered list',
+        isActive: (s) => s.active.orderedList,
+        run: (ed) => ed.chain().focus().toggleOrderedList().run()
+    },
+    blockquote: {
+        icon: 'lucide:quote',
+        label: 'Quote',
+        isActive: (s) => s.active.blockquote,
+        run: (ed) => ed.chain().focus().toggleBlockquote().run()
+    },
+    codeBlock: {
+        icon: 'lucide:square-code',
+        label: 'Code block',
+        isActive: (s) => s.active.codeBlock,
+        run: (ed) => ed.chain().focus().toggleCodeBlock().run()
+    },
+    horizontalRule: {
+        icon: 'lucide:minus',
+        label: 'Horizontal rule',
+        run: (ed) => ed.chain().focus().setHorizontalRule().run()
+    },
+    link: {
+        icon: 'lucide:link',
+        label: 'Insert link',
+        isActive: (s) => s.active.link,
+        run: promptForLink
+    },
+    unlink: {
+        icon: 'lucide:unlink',
+        label: 'Remove link',
+        isDisabled: (s) => !s.active.link,
+        run: (ed) => ed.chain().focus().unsetLink().run()
+    },
+    alignLeft: {
+        icon: 'lucide:align-left',
+        label: 'Align left',
+        isActive: (s) => s.active.alignLeft,
+        run: (ed) => ed.chain().focus().setTextAlign('left').run()
+    },
+    alignCenter: {
+        icon: 'lucide:align-center',
+        label: 'Align center',
+        isActive: (s) => s.active.alignCenter,
+        run: (ed) => ed.chain().focus().setTextAlign('center').run()
+    },
+    alignRight: {
+        icon: 'lucide:align-right',
+        label: 'Align right',
+        isActive: (s) => s.active.alignRight,
+        run: (ed) => ed.chain().focus().setTextAlign('right').run()
+    },
+    alignJustify: {
+        icon: 'lucide:align-justify',
+        label: 'Align justify',
+        isActive: (s) => s.active.alignJustify,
+        run: (ed) => ed.chain().focus().setTextAlign('justify').run()
+    },
+    undo: {
+        icon: 'lucide:undo-2',
+        label: 'Undo',
+        isDisabled: (s) => !s.can.undo,
+        run: (ed) => ed.chain().focus().undo().run()
+    },
+    redo: {
+        icon: 'lucide:redo-2',
+        label: 'Redo',
+        isDisabled: (s) => !s.can.redo,
+        run: (ed) => ed.chain().focus().redo().run()
+    },
+    clearFormatting: {
+        icon: 'lucide:remove-formatting',
+        label: 'Clear formatting',
+        run: (ed) => ed.chain().focus().unsetAllMarks().clearNodes().run()
+    },
+    image: {
+        icon: 'lucide:image',
+        label: 'Insert image',
+        run: (ed) => {
+            if (typeof window === 'undefined')
+                return;
+            const url = window.prompt('Image URL', 'https://');
+            if (!url)
+                return;
+            ed.chain().focus().setImage({ src: url }).run();
+        }
+    },
+    table: {
+        icon: 'lucide:table',
+        label: 'Insert table',
+        run: (ed) => {
+            ed.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+        }
+    },
+    youtube: {
+        icon: 'lucide:youtube',
+        label: 'Insert YouTube video',
+        run: (ed) => {
+            if (typeof window === 'undefined')
+                return;
+            const url = window.prompt('YouTube URL', 'https://youtu.be/');
+            if (!url)
+                return;
+            ed.commands.setYoutubeVideo({ src: url });
+        }
+    }
+};
+export const DEFAULT_TOOLBAR = [
+    'bold',
+    'italic',
+    'underline',
+    'strike',
+    '|',
+    'h1',
+    'h2',
+    'h3',
+    '|',
+    'bulletList',
+    'orderedList',
+    'blockquote',
+    'codeBlock',
+    '|',
+    'link',
+    '|',
+    'alignLeft',
+    'alignCenter',
+    'alignRight',
+    '|',
+    'undo',
+    'redo'
+];