sv5ui 1.6.0 → 1.8.0

package/dist/Editor/Editor.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { EditorProps } from './editor.types.js';
+export type Props = EditorProps;
+import { Editor } from '@tiptap/core';
+declare const Editor: import("svelte").Component<EditorProps, {}, "ref" | "value" | "api">;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;

package/dist/Editor/EditorUrlPrompt.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+    import { untrack } from 'svelte'
+    import Modal from '../Modal/Modal.svelte'
+    import Input from '../Input/Input.svelte'
+    import Button from '../Button/Button.svelte'
+    import Form from '../Form/Form.svelte'
+    import FormField from '../FormField/FormField.svelte'
+    import type { FormApi, FormError, FormSubmitEvent } from '../Form/form.types.js'
+    import { httpUrlSchema, type UrlSchema } from './editor.schemas.js'
+
+    interface Props {
+        open: boolean
+        title?: string
+        description?: string
+        placeholder?: string
+        initialValue?: string
+        confirmLabel?: string
+        schema?: UrlSchema
+        onConfirm?: (value: string) => void
+        onCancel?: () => void
+    }
+
+    let {
+        open = $bindable(false),
+        title = 'Enter URL',
+        description,
+        placeholder = 'https://',
+        initialValue = '',
+        confirmLabel = 'Insert',
+        schema,
+        onConfirm,
+        onCancel
+    }: Props = $props()
+
+    type UrlFormState = { url: string }
+
+    let formApi = $state<FormApi<UrlFormState>>()
+    let formState = $state<UrlFormState>({ url: '' })
+    let inputRef: HTMLInputElement | null = $state(null)
+    let settled = $state(false)
+
+    const resolvedSchema = $derived(schema ?? httpUrlSchema)
+
+    $effect(() => {
+        if (open) {
+            const initial = untrack(() => initialValue)
+            formState = { url: initial }
+            settled = false
+            untrack(() => formApi?.reset())
+            requestAnimationFrame(() => inputRef?.focus())
+        } else if (!settled) {
+            settled = true
+            onCancel?.()
+        }
+    })
+
+    async function validate(state: object): Promise<FormError[]> {
+        const url = (state as Partial<UrlFormState>).url ?? ''
+        const result = await resolvedSchema['~standard'].validate(url)
+        if (result.issues) {
+            return [{ name: 'url', message: result.issues[0]?.message ?? 'Invalid value' }]
+        }
+        return []
+    }
+
+    function handleSubmit(event: FormSubmitEvent<unknown>): void {
+        const data = event.data as UrlFormState
+        settled = true
+        onConfirm?.(data.url.trim())
+        open = false
+    }
+
+    function cancel(): void {
+        settled = true
+        onCancel?.()
+        open = false
+    }
+</script>
+
+<Modal bind:open {title} {description} size="sm">
+    {#snippet body()}
+        <Form
+            bind:api={formApi}
+            bind:state={formState}
+            {validate}
+            onsubmit={handleSubmit}
+            class="py-1"
+        >
+            <FormField name="url">
+                <Input
+                    bind:ref={inputRef}
+                    bind:value={formState.url}
+                    {placeholder}
+                    class="w-full"
+                />
+            </FormField>
+        </Form>
+    {/snippet}
+    {#snippet footer()}
+        <div class="flex items-center justify-end gap-2">
+            <Button variant="ghost" size="sm" label="Cancel" onclick={cancel} />
+            <Button
+                color="primary"
+                size="sm"
+                label={confirmLabel}
+                loading={formApi?.loading}
+                onclick={() => void formApi?.submit()}
+            />
+        </div>
+    {/snippet}
+</Modal>

package/dist/Editor/EditorUrlPrompt.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type UrlSchema } from './editor.schemas.js';
+interface Props {
+    open: boolean;
+    title?: string;
+    description?: string;
+    placeholder?: string;
+    initialValue?: string;
+    confirmLabel?: string;
+    schema?: UrlSchema;
+    onConfirm?: (value: string) => void;
+    onCancel?: () => void;
+}
+declare const EditorUrlPrompt: import("svelte").Component<Props, {}, "open">;
+type EditorUrlPrompt = ReturnType<typeof EditorUrlPrompt>;
+export default EditorUrlPrompt;

package/dist/Editor/SlashPopup.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import type { SlashCommand } from './editor.types.js'
+    import Icon from '../Icon/Icon.svelte'
+
+    interface Props {
+        items: SlashCommand[]
+        selectedIndex: number
+        onPick: (index: number) => void
+    }
+
+    let { items, selectedIndex, onPick }: Props = $props()
+
+    let listEl: HTMLDivElement | null = $state(null)
+
+    $effect(() => {
+        if (!listEl) return
+        const active = listEl.querySelector(`[data-index="${selectedIndex}"]`)
+        if (!active) return
+        requestAnimationFrame(() => {
+            ;(active as HTMLElement).scrollIntoView({ block: 'nearest' })
+        })
+    })
+</script>
+
+<div
+    bind:this={listEl}
+    role="listbox"
+    data-editor-slash-popup
+    class="max-h-72 max-w-80 min-w-64 overflow-y-auto rounded-lg border border-outline-variant bg-surface py-1 shadow-lg"
+>
+    {#if items.length === 0}
+        <div class="px-3 py-2 text-sm text-on-surface-variant">No matches</div>
+    {:else}
+        {#each items as cmd, i (cmd.id)}
+            {@const active = i === selectedIndex}
+            <button
+                type="button"
+                data-slash-item
+                data-id={cmd.id}
+                data-index={i}
+                class="flex w-full items-start gap-3 px-3 py-2 text-start hover:bg-surface-container-high {active
+                    ? 'bg-primary-container text-on-primary-container'
+                    : 'text-on-surface'}"
+                onmousedown={(e) => {
+                    e.preventDefault()
+                    onPick(i)
+                }}
+            >
+                {#if cmd.icon}
+                    <span
+                        class="flex size-7 shrink-0 items-center justify-center rounded border border-outline-variant"
+                    >
+                        <Icon name={cmd.icon} class="size-4" />
+                    </span>
+                {/if}
+                <span class="flex min-w-0 flex-col">
+                    <span class="truncate text-sm font-medium">{cmd.label}</span>
+                    {#if cmd.description}
+                        <span class="truncate text-xs text-on-surface-variant"
+                            >{cmd.description}</span
+                        >
+                    {/if}
+                </span>
+            </button>
+        {/each}
+    {/if}
+</div>

package/dist/Editor/SlashPopup.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SlashCommand } from './editor.types.js';
+interface Props {
+    items: SlashCommand[];
+    selectedIndex: number;
+    onPick: (index: number) => void;
+}
+declare const SlashPopup: import("svelte").Component<Props, {}, "">;
+type SlashPopup = ReturnType<typeof SlashPopup>;
+export default SlashPopup;

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

@@ -0,0 +1,23 @@
+import type { AnyExtension } from '@tiptap/core';
+import type { SuggestionOptions } from '@tiptap/suggestion';
+import type { SlashCommand } from './editor.types.js';
+interface BuildExtensionsOptions {
+    headingLevels?: (1 | 2 | 3 | 4 | 5 | 6)[];
+    placeholder?: string;
+    autolink?: boolean;
+    linkOpenInNewTab?: boolean;
+    maxLength?: number;
+    image?: boolean;
+    tables?: boolean;
+    markdown?: boolean;
+    markdownAllowHtml?: boolean;
+    mentionSuggestion?: Omit<SuggestionOptions, 'editor'>;
+    mentionTrigger?: string;
+    slashCommands?: SlashCommand[];
+    slashTrigger?: string;
+    youtube?: boolean;
+    dragHandle?: boolean;
+    extra?: AnyExtension[];
+}
+export declare function buildExtensions(options?: BuildExtensionsOptions): AnyExtension[];
+export {};

package/dist/Editor/editor.extensions.js

@@ -0,0 +1,123 @@
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import TextAlign from '@tiptap/extension-text-align';
+import Typography from '@tiptap/extension-typography';
+import CharacterCount from '@tiptap/extension-character-count';
+import Image from '@tiptap/extension-image';
+import Mention from '@tiptap/extension-mention';
+import { Table } from '@tiptap/extension-table';
+import { TableRow } from '@tiptap/extension-table-row';
+import { TableCell } from '@tiptap/extension-table-cell';
+import { TableHeader } from '@tiptap/extension-table-header';
+import { Markdown } from 'tiptap-markdown';
+import Youtube from '@tiptap/extension-youtube';
+import { DragHandle } from '@tiptap/extension-drag-handle';
+import { buildSlashExtension } from './editor.slash.svelte.js';
+function buildCore(options) {
+    const { headingLevels = [1, 2, 3], autolink = true, linkOpenInNewTab = true, maxLength } = options;
+    return [
+        StarterKit.configure({
+            heading: { levels: headingLevels },
+            link: {
+                autolink,
+                openOnClick: false,
+                HTMLAttributes: linkOpenInNewTab
+                    ? { target: '_blank', rel: 'noopener noreferrer' }
+                    : {}
+            }
+        }),
+        TextAlign.configure({ types: ['heading', 'paragraph'] }),
+        Typography,
+        CharacterCount.configure({ limit: maxLength })
+    ];
+}
+function buildImageExt() {
+    return Image.configure({
+        inline: false,
+        allowBase64: true,
+        HTMLAttributes: { class: 'sv5ui-editor-image' }
+    });
+}
+function buildTableExts() {
+    return [
+        Table.configure({
+            resizable: true,
+            HTMLAttributes: { class: 'sv5ui-editor-table' }
+        }),
+        TableRow,
+        TableHeader,
+        TableCell
+    ];
+}
+function buildMarkdownExt(allowHtml) {
+    return Markdown.configure({
+        html: allowHtml,
+        tightLists: true,
+        bulletListMarker: '-',
+        linkify: true,
+        breaks: true,
+        transformPastedText: true,
+        transformCopiedText: false
+    });
+}
+function buildMentionExt(suggestion, trigger) {
+    return Mention.configure({
+        HTMLAttributes: { class: 'sv5ui-editor-mention' },
+        suggestion: { char: trigger, ...suggestion }
+    });
+}
+function buildYoutubeExt() {
+    return Youtube.configure({
+        controls: true,
+        nocookie: true,
+        HTMLAttributes: { class: 'sv5ui-editor-youtube' }
+    });
+}
+// lucide:grip-vertical inline SVG. Used directly because @iconify/svelte
+// component would need to be mounted via Svelte; this is a vanilla DOM helper.
+const GRIP_VERTICAL_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="5" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="19" r="1"/></svg>';
+function buildDragHandleExt() {
+    return DragHandle.configure({
+        render() {
+            const handle = document.createElement('div');
+            handle.setAttribute('data-editor-drag-handle', '');
+            handle.setAttribute('aria-label', 'Drag to reorder');
+            handle.className = [
+                'inline-flex size-6 items-center justify-center',
+                'rounded text-on-surface-variant/70',
+                'hover:bg-surface-container-high hover:text-on-surface',
+                'cursor-grab active:cursor-grabbing select-none transition-colors'
+            ].join(' ');
+            handle.innerHTML = GRIP_VERTICAL_SVG;
+            return handle;
+        }
+    });
+}
+const OPTIONAL_BUILDERS = [
+    (o) => (o.placeholder ? Placeholder.configure({ placeholder: o.placeholder }) : null),
+    (o) => (o.image ? buildImageExt() : null),
+    (o) => (o.tables ? buildTableExts() : null),
+    (o) => (o.youtube ? buildYoutubeExt() : null),
+    (o) => (o.markdown ? buildMarkdownExt(o.markdownAllowHtml ?? false) : null),
+    (o) => o.mentionSuggestion ? buildMentionExt(o.mentionSuggestion, o.mentionTrigger ?? '@') : null,
+    (o) => o.slashCommands && o.slashCommands.length > 0
+        ? buildSlashExtension(o.slashCommands, o.slashTrigger ?? '/')
+        : null,
+    (o) => (o.dragHandle ? buildDragHandleExt() : null)
+];
+function collectOptionalExts(options) {
+    const acc = [];
+    for (const build of OPTIONAL_BUILDERS) {
+        const result = build(options);
+        if (result === null)
+            continue;
+        if (Array.isArray(result))
+            acc.push(...result);
+        else
+            acc.push(result);
+    }
+    return acc;
+}
+export function buildExtensions(options = {}) {
+    return [...buildCore(options), ...collectOptionalExts(options), ...(options.extra ?? [])];
+}

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

@@ -0,0 +1,4 @@
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+export type UrlSchema = StandardSchemaV1<string, string>;
+export declare const httpUrlSchema: UrlSchema;
+export declare const youtubeUrlSchema: UrlSchema;

package/dist/Editor/editor.schemas.js

@@ -0,0 +1,3 @@
+import * as v from 'valibot';
+export const httpUrlSchema = v.pipe(v.string(), v.trim(), v.nonEmpty('URL is required'), v.url('Please enter a valid URL'), v.regex(/^https?:\/\//i, 'URL must start with http:// or https://'));
+export const youtubeUrlSchema = v.pipe(v.string(), v.trim(), v.nonEmpty('URL is required'), v.url('Please enter a valid URL'), v.regex(/^https?:\/\/(?:www\.|m\.)?(?:youtube\.com|youtu\.be|youtube-nocookie\.com)\//i, 'Must be a YouTube URL (youtube.com or youtu.be)'));

package/dist/Editor/editor.slash.svelte.d.ts

@@ -0,0 +1,34 @@
+import { Extension } from '@tiptap/core';
+import { type SuggestionOptions } from '@tiptap/suggestion';
+import type { SlashCommand } from './editor.types.js';
+import { type UrlSchema } from './editor.schemas.js';
+export interface UrlPromptOptions {
+    title: string;
+    description?: string;
+    placeholder?: string;
+    initialValue?: string;
+    confirmLabel?: string;
+    schema?: UrlSchema;
+}
+interface SlashCommandsContext {
+    image?: boolean;
+    tables?: boolean;
+    youtube?: boolean;
+    /**
+     * Override for the URL prompt used by image/youtube commands. Pass an
+     * async function that resolves to a URL string, or `null`/empty string
+     * to cancel. When omitted, falls back to `window.prompt`.
+     */
+    promptUrl?: (opts: UrlPromptOptions) => Promise<string | null>;
+}
+/**
+ * Returns the built-in slash command list, optionally including media
+ * commands based on which features are enabled in the host Editor.
+ */
+export declare function buildDefaultSlashCommands(ctx?: SlashCommandsContext): SlashCommand[];
+interface SlashExtensionOptions {
+    suggestion: Partial<SuggestionOptions>;
+}
+export declare const SlashCommandsExtension: Extension<SlashExtensionOptions, any>;
+export declare function buildSlashExtension(commands: SlashCommand[], trigger?: string): Extension;
+export {};

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

@@ -0,0 +1,273 @@
+import { mount, unmount } from 'svelte';
+import { Extension } from '@tiptap/core';
+import { Suggestion } from '@tiptap/suggestion';
+import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom';
+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 ?? ''));
+}
+/**
+ * Returns the built-in slash command list, optionally including media
+ * commands based on which features are enabled in the host Editor.
+ */
+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;
+}
+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 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,
+                onPick: (i) => {
+                    const cmd = state.items[i];
+                    if (!cmd)
+                        return;
+                    props.command(cmd);
+                }
+            });
+            const component = mount(SlashPopup, {
+                target: container,
+                props: state
+            });
+            handle = { container, component, state, cleanup: null };
+            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?.();
+            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,
+            // Tiptap merges `suggestion` shallowly when an extension is .configure()'d,
+            // so the command default in addOptions gets overwritten. Include it here.
+            command: ({ editor, range, props }) => {
+                editor.chain().focus().deleteRange(range).run();
+                props.run({ editor });
+            }
+        }
+    });
+}