svelora 2.1.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, {}, "value" | "ref" | "api">;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;

package/dist/Editor/EditorUrlPrompt.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">import { untrack } from 'svelte';
+import Button from '../Button/Button.svelte';
+import Form from '../Form/Form.svelte';
+import type { FormApi, FormError, FormSubmitEvent } from '../Form/form.types.js';
+import FormField from '../FormField/FormField.svelte';
+import Input from '../Input/Input.svelte';
+import Modal from '../Modal/Modal.svelte';
+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,74 @@
+<script lang="ts">
+    import Icon from '../Icon/Icon.svelte'
+    import type { SlashCommand } from './editor.types.js'
+
+    interface Props {
+        items: SlashCommand[]
+        selectedIndex: number
+        onPick: (index: number) => void
+        listboxId: string
+        optionIdPrefix: string
+    }
+
+    let { items, selectedIndex, onPick, listboxId, optionIdPrefix }: 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}
+    id={listboxId}
+    role="listbox"
+    aria-label="Slash commands"
+    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"
+                role="option"
+                id={`${optionIdPrefix}${i}`}
+                aria-selected={active}
+                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,11 @@
+import type { SlashCommand } from './editor.types.js';
+interface Props {
+    items: SlashCommand[];
+    selectedIndex: number;
+    onPick: (index: number) => void;
+    listboxId: string;
+    optionIdPrefix: string;
+}
+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[] | Promise<AnyExtension[]>;
+export {};

package/dist/Editor/editor.extensions.js

@@ -0,0 +1,132 @@
+import CharacterCount from '@tiptap/extension-character-count';
+import { DragHandle } from '@tiptap/extension-drag-handle';
+import Image from '@tiptap/extension-image';
+import Mention from '@tiptap/extension-mention';
+import Placeholder from '@tiptap/extension-placeholder';
+import TextAlign from '@tiptap/extension-text-align';
+import Typography from '@tiptap/extension-typography';
+import Youtube from '@tiptap/extension-youtube';
+import StarterKit from '@tiptap/starter-kit';
+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: 'ps-editor-image' }
+    });
+}
+async function buildTableExts() {
+    const [{ Table }, { TableRow }, { TableCell }, { TableHeader }] = await Promise.all([
+        import('@tiptap/extension-table'),
+        import('@tiptap/extension-table-row'),
+        import('@tiptap/extension-table-cell'),
+        import('@tiptap/extension-table-header')
+    ]);
+    return [
+        Table.configure({
+            resizable: true,
+            HTMLAttributes: { class: 'ps-editor-table' }
+        }),
+        TableRow,
+        TableHeader,
+        TableCell
+    ];
+}
+async function buildMarkdownExt(allowHtml) {
+    const { Markdown } = await import('tiptap-markdown');
+    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: 'ps-editor-mention' },
+        suggestion: { char: trigger, ...suggestion }
+    });
+}
+function buildYoutubeExt() {
+    return Youtube.configure({
+        controls: true,
+        nocookie: true,
+        HTMLAttributes: { class: 'ps-editor-youtube' }
+    });
+}
+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 sync = [];
+    const lazy = [];
+    for (const build of OPTIONAL_BUILDERS) {
+        const result = build(options);
+        if (result === null || result === undefined)
+            continue;
+        if (result instanceof Promise)
+            lazy.push(result);
+        else if (Array.isArray(result))
+            sync.push(...result);
+        else
+            sync.push(result);
+    }
+    if (lazy.length === 0)
+        return sync;
+    return Promise.all(lazy).then((resolved) => [...sync, ...resolved.flat()]);
+}
+export function buildExtensions(options = {}) {
+    const optional = collectOptionalExts(options);
+    if (optional instanceof Promise) {
+        return optional.then((opt) => [...buildCore(options), ...opt, ...(options.extra ?? [])]);
+    }
+    return [...buildCore(options), ...optional, ...(options.extra ?? [])];
+}

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

@@ -0,0 +1,5 @@
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+export type UrlSchema = StandardSchemaV1<string, string>;
+export declare const httpUrlSchema: UrlSchema;
+export declare function isSafeImageSrc(src: string): boolean;
+export declare const youtubeUrlSchema: UrlSchema;

package/dist/Editor/editor.schemas.js

@@ -0,0 +1,27 @@
+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://'));
+function normalizeUrl(src) {
+    const s = src.replace(/[\t\n\r]/g, '');
+    let start = 0;
+    let end = s.length;
+    while (start < end && s.charCodeAt(start) <= 0x20)
+        start++;
+    while (end > start && s.charCodeAt(end - 1) <= 0x20)
+        end--;
+    return s.slice(start, end);
+}
+export function isSafeImageSrc(src) {
+    const s = normalizeUrl(src);
+    if (!s)
+        return false;
+    const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(s)?.[1]?.toLowerCase();
+    if (!scheme)
+        return true;
+    if (scheme === 'http' || scheme === 'https')
+        return true;
+    if (scheme === 'data') {
+        return /^data:image\/(?:png|jpe?g|gif|webp|avif|bmp|x-icon|vnd\.microsoft\.icon)[;,]/i.test(s);
+    }
+    return false;
+}
+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,25 @@
+import { Extension } from '@tiptap/core';
+import { type SuggestionOptions } from '@tiptap/suggestion';
+import { type UrlSchema } from './editor.schemas.js';
+import type { SlashCommand } from './editor.types.js';
+export interface UrlPromptOptions {
+    title: string;
+    description?: string;
+    placeholder?: string;
+    initialValue?: string;
+    confirmLabel?: string;
+    schema?: UrlSchema;
+}
+interface SlashCommandsContext {
+    image?: boolean;
+    tables?: boolean;
+    youtube?: boolean;
+    promptUrl?: (opts: UrlPromptOptions) => Promise<string | null>;
+}
+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 {};