sv5ui 1.7.0 → 1.8.0

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,142 @@
+import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom';
+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.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);
+    });
+}
+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 popupEl = createPopup();
+                    const listEl = document.createElement('div');
+                    listEl.setAttribute('role', 'listbox');
+                    popupEl.appendChild(listEl);
+                    document.body.appendChild(popupEl);
+                    state = {
+                        items: props.items,
+                        selectedIndex: 0,
+                        popupEl,
+                        listEl,
+                        cleanup: null,
+                        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();
+                    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,212 @@
+// ---------------------------------------------------------------------------
+// Fallback `run` handlers below (link/image/youtube) use window.prompt because
+// they need to gather a URL. Editor.svelte intercepts these actions and routes
+// them through the EditorUrlPrompt modal instead. The fallbacks only execute
+// when a consumer calls `api.run('link'|'image'|'youtube')` directly — at
+// which point we have no modal mount point, so window.prompt is the simplest
+// non-UI fallback.
+// ---------------------------------------------------------------------------
+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'
+];