@spatika/editor 1.5.0

package/dist/composites/SpatikaEditor.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import { EditorContent } from "@tiptap/react";
+import { defaultSlashCommands } from "../extensions/slash-command";
+import { cn } from "../lib/cn";
+import { DEFAULT_TOOLBAR } from "../lib/types";
+import { DEFAULT_AI_ACTIONS, resolveAiCommandActions, resolveAiCommandPlacement, usesAiCommandMenu, } from "../lib/ai-command-menu";
+import { useSpatikaEditor } from "../lib/use-spatika-editor";
+import { AiCommandDock } from "./AiCommandDock";
+import { AiOverlay } from "./AiOverlay";
+import { EditorBubbleMenu } from "./EditorBubbleMenu";
+import { EditorToolbar } from "./EditorToolbar";
+import { ImageBubbleMenu } from "./ImageBubbleMenu";
+import { MentionMenu } from "./MentionMenu";
+import { SlashCommandMenu } from "./SlashCommandMenu";
+const DEFAULT_AI_ACTIONS_LEGACY = DEFAULT_AI_ACTIONS;
+export const SpatikaEditor = forwardRef(function SpatikaEditor({ value, onChange, placeholder, disabled, className, heightClassName = "min-h-[400px]", toolbar, toolbarActions, extensions, starterKit, slashCommands, mentions, onAiSelectionAction, onAiCommand, isAiProcessing, aiActions = DEFAULT_AI_ACTIONS_LEGACY, aiCommandMenu, imageInsert, onInsertImage, resizableImages = true, mobileFullscreen = false, }, ref) {
+    const shellRef = useRef(null);
+    const [fullscreen, setFullscreen] = useState(false);
+    const [slashState, setSlashState] = useState(null);
+    const [mentionState, setMentionState] = useState(null);
+    const [aiBusyInternal, setAiBusyInternal] = useState(false);
+    const { editor, isReady } = useSpatikaEditor({
+        value,
+        onChange,
+        placeholder,
+        disabled,
+        extensions,
+        starterKit,
+        slashCommands,
+        mentions,
+        onAiSelectionAction,
+        onAiCommand,
+        resizableImages,
+        imageInsert,
+        onSlashUpdate: setSlashState,
+        onMentionUpdate: setMentionState,
+    });
+    useImperativeHandle(ref, () => ({
+        focus: () => editor?.commands.focus(),
+        setContent: (html) => editor?.commands.setContent(html),
+        getHTML: () => editor?.getHTML() ?? "",
+        getJSON: () => editor?.getJSON(),
+        expandFullscreen: () => setFullscreen(true),
+    }), [editor]);
+    const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };
+    const allSlashCommands = useMemo(() => [...defaultSlashCommands(), ...(slashCommands ?? [])], [slashCommands]);
+    const filteredSlashItems = useMemo(() => {
+        const query = slashState?.query?.toLowerCase() ?? "";
+        return allSlashCommands.filter((item) => {
+            if (!query)
+                return true;
+            const haystack = [item.title, item.description, ...(item.keywords ?? [])]
+                .filter(Boolean)
+                .join(" ")
+                .toLowerCase();
+            return haystack.includes(query);
+        });
+    }, [allSlashCommands, slashState?.query]);
+    const filteredMentions = useMemo(() => {
+        const query = mentionState?.query?.toLowerCase() ?? "";
+        const contacts = mentions ?? [];
+        return contacts.filter((contact) => contact.label.toLowerCase().includes(query));
+    }, [mentions, mentionState?.query]);
+    const aiHandler = onAiCommand
+        ? onAiCommand
+        : onAiSelectionAction
+            ? async (context) => onAiSelectionAction(context.actionId, context.selectedText)
+            : undefined;
+    const commandMenuEnabled = usesAiCommandMenu(aiCommandMenu, Boolean(aiHandler));
+    const aiCommandPlacement = resolveAiCommandPlacement(aiCommandMenu);
+    const toolbarAiEnabled = commandMenuEnabled && aiCommandPlacement === "toolbar";
+    const dockAiEnabled = commandMenuEnabled && aiCommandPlacement === "dock";
+    const commandActions = resolveAiCommandActions(aiCommandMenu === false ? undefined : aiCommandMenu, aiActions);
+    const bubbleActionsEnabled = Boolean(aiHandler) &&
+        (commandMenuEnabled
+            ? aiCommandMenu !== false && aiCommandMenu?.bubbleActions
+            : true);
+    const runAiCommand = useCallback(async (request) => {
+        if (!editor || !aiHandler)
+            return;
+        const { from, to } = editor.state.selection;
+        const selectedText = from !== to ? editor.state.doc.textBetween(from, to, " ") : "";
+        editor.commands.setAiSelection?.(from !== to ? { from, to } : null);
+        editor.commands.setAiProcessing?.(true);
+        setAiBusyInternal(true);
+        try {
+            const result = await aiHandler({
+                actionId: request.actionId,
+                prompt: request.prompt,
+                selectedText,
+                documentText: editor.state.doc.textContent,
+                html: editor.getHTML(),
+                selection: from !== to ? { from, to } : null,
+            });
+            if (result) {
+                if (from !== to) {
+                    editor.chain().focus().insertContentAt({ from, to }, result).run();
+                }
+                else {
+                    editor.chain().focus().insertContentAt(from, result).run();
+                }
+            }
+        }
+        finally {
+            editor.commands.setAiProcessing?.(false);
+            editor.commands.setAiSelection?.(null);
+            setAiBusyInternal(false);
+        }
+    }, [editor, aiHandler]);
+    const runLegacyAiAction = useCallback(async (actionId) => {
+        if (!editor)
+            return;
+        const { from, to } = editor.state.selection;
+        if (from === to)
+            return;
+        await runAiCommand({ actionId });
+    }, [editor, runAiCommand]);
+    useEffect(() => {
+        if (!mobileFullscreen || !editor)
+            return;
+        const onFocus = () => {
+            if (window.matchMedia("(max-width: 767px)").matches) {
+                setFullscreen(true);
+            }
+        };
+        editor.on("focus", onFocus);
+        return () => {
+            editor.off("focus", onFocus);
+        };
+    }, [editor, mobileFullscreen]);
+    const shell = (_jsxs("div", { ref: shellRef, "data-slot": "spatika-editor", className: cn("spk-editor-shell", disabled && "spk-editor-shell--disabled", fullscreen && "spk-editor-shell--fullscreen", dockAiEnabled && "spk-editor-shell--with-ai-dock", className), children: [_jsx(EditorToolbar, { editor: editor, config: toolbarConfig, toolbarActions: toolbarActions, aiActions: toolbarAiEnabled ? commandActions : !commandMenuEnabled ? aiActions : undefined, aiCommandMenu: aiCommandMenu === false ? false : aiCommandMenu, useAiCommandMenu: toolbarAiEnabled, onAiCommand: commandMenuEnabled ? runAiCommand : undefined, onAiAction: !commandMenuEnabled ? runLegacyAiAction : undefined, onInsertImage: onInsertImage, imageInsert: imageInsert }), _jsxs("div", { className: "spk-editor-body", children: [_jsx(EditorContent, { editor: editor, className: cn("spk-editor-surface", heightClassName) }), _jsx(EditorBubbleMenu, { editor: editor, aiActions: bubbleActionsEnabled ? (commandMenuEnabled ? commandActions : aiActions) : undefined, onAiAction: runLegacyAiAction }), _jsx(ImageBubbleMenu, { editor: editor }), _jsx(SlashCommandMenu, { editor: editor, items: filteredSlashItems, query: slashState?.query ?? "", activeIndex: slashState?.activeIndex ?? 0, open: Boolean(slashState?.range), onSelect: (item) => {
+                            if (!editor || !slashState?.range)
+                                return;
+                            editor.chain().focus().deleteRange(slashState.range).run();
+                            item.command(editor);
+                            setSlashState(null);
+                        } }), _jsx(MentionMenu, { contacts: filteredMentions, query: mentionState?.query ?? "", activeIndex: mentionState?.activeIndex ?? 0, open: Boolean(mentionState?.range), onSelect: (contact) => {
+                            if (!editor || !mentionState?.range)
+                                return;
+                            editor
+                                .chain()
+                                .focus()
+                                .insertContentAt(mentionState.range, [
+                                { type: "mention", attrs: { id: contact.id, label: contact.label } },
+                                { type: "text", text: " " },
+                            ])
+                                .run();
+                            setMentionState(null);
+                        } }), _jsx(AiOverlay, { visible: Boolean(isAiProcessing || aiBusyInternal) })] }), dockAiEnabled ? (_jsx("div", { className: "spk-editor-ai-dock-footer", children: _jsx(AiCommandDock, { editor: editor, config: aiCommandMenu === false ? undefined : aiCommandMenu, actions: commandActions, onRun: runAiCommand }) })) : null, fullscreen ? (_jsx("div", { className: "spk-editor-fullscreen-bar", children: _jsx("button", { type: "button", className: "spk-editor-fullscreen-close", onClick: () => setFullscreen(false), children: "Done" }) })) : null] }));
+    if (fullscreen && typeof document !== "undefined") {
+        return createPortal(shell, document.body);
+    }
+    if (!isReady) {
+        return (_jsx("div", { className: cn("spk-editor-shell spk-editor-shell--loading", className), "aria-busy": "true", children: "Loading editor\u2026" }));
+    }
+    return shell;
+});

package/dist/composites/TableGridPicker.d.ts

@@ -0,0 +1,9 @@
+export declare const TABLE_GRID_SIZE = 10;
+export declare const TABLE_ROWS_MAX = 20;
+export declare const TABLE_COLS_MAX = 12;
+type TableGridPickerProps = {
+    onInsert: (rows: number, cols: number, withHeaderRow: boolean) => void;
+};
+export declare function TableGridPicker({ onInsert }: TableGridPickerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TableGridPicker.d.ts.map

package/dist/composites/TableGridPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableGridPicker.d.ts","sourceRoot":"","sources":["../../src/composites/TableGridPicker.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,cAAc,KAAK,CAAC;AAEjC,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;CACxE,CAAC;AAeF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BAgHjE"}

package/dist/composites/TableGridPicker.js

@@ -0,0 +1,54 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Columns3, Rows3 } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../lib/cn";
+export const TABLE_GRID_SIZE = 10;
+export const TABLE_ROWS_MAX = 20;
+export const TABLE_COLS_MAX = 12;
+function clampDimension(value, max) {
+    return Math.max(1, Math.min(max, value));
+}
+function pickCell(event) {
+    const cell = event.target.closest("[data-table-row]");
+    if (!cell)
+        return null;
+    return {
+        rows: clampDimension(Number(cell.dataset.tableRow), TABLE_ROWS_MAX),
+        cols: clampDimension(Number(cell.dataset.tableCol), TABLE_COLS_MAX),
+    };
+}
+export function TableGridPicker({ onInsert }) {
+    const [rows, setRows] = useState(3);
+    const [cols, setCols] = useState(3);
+    const [withHeaderRow, setWithHeaderRow] = useState(true);
+    const [hover, setHover] = useState(null);
+    const previewRows = hover?.rows ?? rows;
+    const previewCols = hover?.cols ?? cols;
+    const handleGridMove = (event) => {
+        const picked = pickCell(event);
+        if (picked)
+            setHover(picked);
+    };
+    const handleGridClick = (event) => {
+        const picked = pickCell(event);
+        if (picked) {
+            setRows(picked.rows);
+            setCols(picked.cols);
+            onInsert(picked.rows, picked.cols, withHeaderRow);
+        }
+    };
+    return (_jsxs("div", { className: "spk-editor-table-picker", children: [_jsxs("div", { className: "spk-editor-table-picker-label", "aria-live": "polite", children: [previewCols, " \u00D7 ", previewRows] }), _jsx("div", { className: "spk-editor-table-picker-grid", role: "grid", "aria-label": "Choose table size", onMouseMove: handleGridMove, onMouseLeave: () => setHover(null), onClick: handleGridClick, children: Array.from({ length: TABLE_GRID_SIZE * TABLE_GRID_SIZE }, (_, index) => {
+                    const rowIndex = Math.floor(index / TABLE_GRID_SIZE);
+                    const colIndex = index % TABLE_GRID_SIZE;
+                    const cellRows = rowIndex + 1;
+                    const cellCols = colIndex + 1;
+                    const active = cellRows <= previewRows && cellCols <= previewCols;
+                    return (_jsx("button", { type: "button", role: "gridcell", "data-table-row": cellRows, "data-table-col": cellCols, className: cn("spk-editor-table-picker-cell", active && "spk-editor-table-picker-cell--active"), "aria-label": `${cellCols} by ${cellRows} table`, onMouseDown: (event) => event.preventDefault() }, `${rowIndex}-${colIndex}`));
+                }) }), _jsxs("div", { className: "spk-editor-table-picker-size", children: [_jsxs("label", { className: "spk-editor-table-picker-size-field", children: [_jsx(Columns3, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Columns" }), _jsx("input", { type: "number", min: 1, max: TABLE_COLS_MAX, className: "spk-editor-table-picker-size-input", value: previewCols, onChange: (event) => {
+                                    setHover(null);
+                                    setCols(clampDimension(Number.parseInt(event.target.value, 10) || 1, TABLE_COLS_MAX));
+                                } })] }), _jsx("span", { className: "spk-editor-table-picker-size-sep", "aria-hidden": "true", children: "\u00D7" }), _jsxs("label", { className: "spk-editor-table-picker-size-field", children: [_jsx(Rows3, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Rows" }), _jsx("input", { type: "number", min: 1, max: TABLE_ROWS_MAX, className: "spk-editor-table-picker-size-input", value: previewRows, onChange: (event) => {
+                                    setHover(null);
+                                    setRows(clampDimension(Number.parseInt(event.target.value, 10) || 1, TABLE_ROWS_MAX));
+                                } })] })] }), _jsxs("label", { className: "spk-editor-toolbar-popover-check", children: [_jsx("input", { type: "checkbox", checked: withHeaderRow, onChange: (event) => setWithHeaderRow(event.target.checked) }), _jsx("span", { children: "Header row" })] }), _jsxs("button", { type: "button", className: "spk-editor-toolbar-popover-btn spk-editor-toolbar-popover-btn--primary spk-editor-table-picker-insert", onClick: () => onInsert(previewRows, previewCols, withHeaderRow), children: ["Insert ", previewCols, " \u00D7 ", previewRows, " table"] })] }));
+}

package/dist/composites/ToolbarButton.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+/** Compact icon control for the editor toolbar. Avoids a @spatika/react dependency. */
+export declare const ToolbarButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    active?: boolean;
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ToolbarButton.d.ts.map

package/dist/composites/ToolbarButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../src/composites/ToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,uFAAuF;AACvF,eAAO,MAAM,aAAa;aAGb,OAAO;cACN,SAAS;qDAerB,CAAC"}

package/dist/composites/ToolbarButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn";
+/** Compact icon control for the editor toolbar. Avoids a @spatika/react dependency. */
+export const ToolbarButton = forwardRef(function ToolbarButton({ className, active, children, ...props }, ref) {
+    return (_jsx("button", { ref: ref, type: "button", "data-slot": "editor-toolbar-button", "data-active": active ? "true" : undefined, className: cn("spk-editor-toolbar-btn", active && "spk-editor-toolbar-btn--active", className), ...props, children: children }));
+});

package/dist/composites/ToolbarFormatPanels.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from "@tiptap/core";
+type PanelProps = {
+    editor: Editor;
+    close: () => void;
+};
+export declare function TextColorPanel({ editor, close }: PanelProps): import("react").JSX.Element;
+export declare function HighlightColorPanel({ editor, close }: PanelProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ToolbarFormatPanels.d.ts.map

package/dist/composites/ToolbarFormatPanels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarFormatPanels.d.ts","sourceRoot":"","sources":["../../src/composites/ToolbarFormatPanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAK3C,KAAK,UAAU,GAAG;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAqCF,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAU,+BAe3D;AAED,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAU,+BAehE"}

package/dist/composites/ToolbarFormatPanels.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EDITOR_HIGHLIGHT_COLORS, EDITOR_TEXT_COLORS } from "../lib/editor-format-colors";
+import { cn } from "../lib/cn";
+function ColorSwatchGrid({ colors, activeValue, onSelect, }) {
+    return (_jsx("div", { className: "spk-editor-color-grid", role: "list", children: colors.map((color) => {
+            const isActive = color.value === null ? !activeValue : activeValue?.toLowerCase() === color.value.toLowerCase();
+            return (_jsx("button", { type: "button", role: "listitem", "aria-label": color.label, "aria-pressed": isActive, className: cn("spk-editor-color-swatch", color.value === null && "spk-editor-color-swatch--default", isActive && "spk-editor-color-swatch--active"), style: color.value ? { "--swatch-color": color.value } : undefined, onClick: () => onSelect(color.value) }, color.id));
+        }) }));
+}
+export function TextColorPanel({ editor, close }) {
+    const activeColor = editor.getAttributes("textStyle").color ?? null;
+    const apply = (value) => {
+        if (value === null) {
+            editor.chain().focus().unsetColor().run();
+        }
+        else {
+            editor.chain().focus().setColor(value).run();
+        }
+        close();
+    };
+    return (_jsx(ColorSwatchGrid, { colors: EDITOR_TEXT_COLORS, activeValue: activeColor, onSelect: apply }));
+}
+export function HighlightColorPanel({ editor, close }) {
+    const activeColor = editor.getAttributes("highlight").color ?? null;
+    const apply = (value) => {
+        if (value === null) {
+            editor.chain().focus().unsetHighlight().run();
+        }
+        else {
+            editor.chain().focus().setHighlight({ color: value }).run();
+        }
+        close();
+    };
+    return (_jsx(ColorSwatchGrid, { colors: EDITOR_HIGHLIGHT_COLORS, activeValue: activeColor, onSelect: apply }));
+}

package/dist/composites/ToolbarInsertPanels.d.ts

@@ -0,0 +1,14 @@
+import type { Editor } from "@tiptap/core";
+import type { ImageInsertConfig } from "../lib/types";
+type PanelProps = {
+    editor: Editor;
+    close: () => void;
+};
+type ImagePanelProps = PanelProps & {
+    config?: ImageInsertConfig;
+};
+export declare function LinkInsertPanel({ editor, close }: PanelProps): import("react").JSX.Element;
+export declare function ImageInsertPanel({ editor, close, config }: ImagePanelProps): import("react").JSX.Element;
+export declare function TableInsertPanel({ editor, close }: PanelProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ToolbarInsertPanels.d.ts.map

package/dist/composites/ToolbarInsertPanels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarInsertPanels.d.ts","sourceRoot":"","sources":["../../src/composites/ToolbarInsertPanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAKtD,KAAK,UAAU,GAAG;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,KAAK,eAAe,GAAG,UAAU,GAAG;IAClC,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAU,+BAmD5D;AAMD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,eAAe,+BA4G1E;AAED,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAU,+BAe7D"}

package/dist/composites/ToolbarInsertPanels.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImagePlus, Upload } from "lucide-react";
+import { useRef, useState } from "react";
+import { cn } from "../lib/cn";
+import { insertImageFilesIntoEditor } from "../lib/insert-editor-images";
+import { TableGridPicker } from "./TableGridPicker";
+export function LinkInsertPanel({ editor, close }) {
+    const previous = editor.getAttributes("link").href;
+    const [url, setUrl] = useState(previous ?? "https://");
+    const apply = () => {
+        const trimmed = url.trim();
+        if (!trimmed) {
+            editor.chain().focus().extendMarkRange("link").unsetLink().run();
+        }
+        else {
+            editor.chain().focus().extendMarkRange("link").setLink({ href: trimmed }).run();
+        }
+        close();
+    };
+    const remove = () => {
+        editor.chain().focus().extendMarkRange("link").unsetLink().run();
+        close();
+    };
+    return (_jsxs("div", { className: "spk-editor-toolbar-popover-form", children: [_jsxs("label", { className: "spk-editor-toolbar-popover-field", children: [_jsx("span", { children: "URL" }), _jsx("input", { type: "url", className: "spk-editor-toolbar-popover-input", value: url, placeholder: "https://", onChange: (event) => setUrl(event.target.value), onKeyDown: (event) => {
+                            if (event.key === "Enter")
+                                apply();
+                            if (event.key === "Escape")
+                                close();
+                        }, autoFocus: true })] }), _jsxs("div", { className: "spk-editor-toolbar-popover-actions", children: [previous ? (_jsx("button", { type: "button", className: "spk-editor-toolbar-popover-btn spk-editor-toolbar-popover-btn--ghost", onClick: remove, children: "Remove" })) : null, _jsx("button", { type: "button", className: "spk-editor-toolbar-popover-btn spk-editor-toolbar-popover-btn--ghost", onClick: close, children: "Cancel" }), _jsx("button", { type: "button", className: "spk-editor-toolbar-popover-btn spk-editor-toolbar-popover-btn--primary", onClick: apply, children: "Apply" })] })] }));
+}
+function insertImageSrc(editor, src) {
+    editor.chain().focus().setImage({ src }).run();
+}
+export function ImageInsertPanel({ editor, close, config }) {
+    const inputRef = useRef(null);
+    const [url, setUrl] = useState("");
+    const [error, setError] = useState(null);
+    const [dragging, setDragging] = useState(false);
+    const maxFiles = config?.maxFiles ?? 3;
+    const maxSizeBytes = config?.maxSizeBytes ?? 5 * 1024 * 1024;
+    const accept = config?.accept ?? "image/*";
+    const limitMb = Math.round(maxSizeBytes / (1024 * 1024));
+    const handleFiles = async (files) => {
+        setError(null);
+        const inserted = await insertImageFilesIntoEditor(editor, files, config);
+        if (!inserted) {
+            setError("Could not insert image.");
+            return;
+        }
+        close();
+    };
+    const insertFromUrl = () => {
+        const trimmed = url.trim();
+        if (!trimmed)
+            return;
+        insertImageSrc(editor, trimmed);
+        close();
+    };
+    return (_jsxs("div", { className: "spk-editor-toolbar-popover-form spk-editor-image-insert", children: [_jsxs("button", { type: "button", className: cn("spk-editor-image-dropzone", dragging && "spk-editor-image-dropzone--active"), onClick: () => inputRef.current?.click(), onDragEnter: (event) => {
+                    event.preventDefault();
+                    setDragging(true);
+                }, onDragOver: (event) => {
+                    event.preventDefault();
+                    setDragging(true);
+                }, onDragLeave: () => setDragging(false), onDrop: (event) => {
+                    event.preventDefault();
+                    setDragging(false);
+                    if (event.dataTransfer.files.length) {
+                        void handleFiles(event.dataTransfer.files);
+                    }
+                }, children: [_jsx("span", { className: "spk-editor-image-dropzone-icon", "aria-hidden": "true", children: _jsx(Upload, { className: "size-5" }) }), _jsx("span", { className: "spk-editor-image-dropzone-title", children: "Click to upload or drag and drop" }), _jsxs("span", { className: "spk-editor-image-dropzone-hint", children: ["Maximum ", maxFiles, " files, ", limitMb, "MB each"] })] }), _jsx("input", { ref: inputRef, type: "file", accept: accept, multiple: maxFiles > 1, className: "sr-only", onChange: (event) => {
+                    if (event.target.files?.length) {
+                        void handleFiles(event.target.files);
+                    }
+                } }), error ? _jsx("p", { className: "spk-editor-image-insert-error", children: error }) : null, _jsx("div", { className: "spk-editor-image-insert-divider", children: _jsx("span", { children: "or paste a URL" }) }), _jsxs("label", { className: "spk-editor-toolbar-popover-field", children: [_jsx("span", { children: "Image URL" }), _jsx("input", { type: "url", className: "spk-editor-toolbar-popover-input", value: url, placeholder: "https://example.com/photo.jpg", onChange: (event) => setUrl(event.target.value), onKeyDown: (event) => {
+                            if (event.key === "Enter")
+                                insertFromUrl();
+                            if (event.key === "Escape")
+                                close();
+                        } })] }), _jsxs("div", { className: "spk-editor-toolbar-popover-actions", children: [_jsx("button", { type: "button", className: "spk-editor-toolbar-popover-btn spk-editor-toolbar-popover-btn--ghost", onClick: close, children: "Cancel" }), _jsxs("button", { type: "button", className: "spk-editor-toolbar-popover-btn spk-editor-toolbar-popover-btn--primary", onClick: insertFromUrl, disabled: !url.trim(), children: [_jsx(ImagePlus, { className: "size-4", "aria-hidden": "true" }), "Insert"] })] })] }));
+}
+export function TableInsertPanel({ editor, close }) {
+    const insert = (nextRows, nextCols, withHeaderRow) => {
+        editor
+            .chain()
+            .focus()
+            .insertTable({
+            rows: nextRows,
+            cols: nextCols,
+            withHeaderRow,
+        })
+            .run();
+        close();
+    };
+    return _jsx(TableGridPicker, { onInsert: insert });
+}

package/dist/composites/ToolbarPopover.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+type ToolbarPopoverProps = {
+    label: string;
+    icon: ReactNode;
+    title: string;
+    className?: string;
+    active?: boolean;
+    children: (api: {
+        close: () => void;
+    }) => ReactNode;
+};
+export declare function ToolbarPopover({ label, icon, title, className, active, children, }: ToolbarPopoverProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ToolbarPopover.d.ts.map

package/dist/composites/ToolbarPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarPopover.d.ts","sourceRoot":"","sources":["../../src/composites/ToolbarPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5F,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC;CACrD,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAc,EACd,QAAQ,GACT,EAAE,mBAAmB,+BAyErB"}

package/dist/composites/ToolbarPopover.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../lib/cn";
+import { ToolbarButton } from "./ToolbarButton";
+export function ToolbarPopover({ label, icon, title, className, active = false, children, }) {
+    const [open, setOpen] = useState(false);
+    const [panelStyle, setPanelStyle] = useState(null);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const titleId = useId();
+    const close = () => setOpen(false);
+    useLayoutEffect(() => {
+        if (!open || !triggerRef.current)
+            return;
+        const updatePosition = () => {
+            const rect = triggerRef.current?.getBoundingClientRect();
+            if (!rect)
+                return;
+            setPanelStyle({
+                top: rect.bottom + 6,
+                left: rect.left,
+            });
+        };
+        updatePosition();
+        window.addEventListener("resize", updatePosition);
+        window.addEventListener("scroll", updatePosition, true);
+        return () => {
+            window.removeEventListener("resize", updatePosition);
+            window.removeEventListener("scroll", updatePosition, true);
+        };
+    }, [open]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (rootRef.current?.contains(target) || panelRef.current?.contains(target))
+                return;
+            setOpen(false);
+        };
+        document.addEventListener("mousedown", onPointerDown);
+        return () => document.removeEventListener("mousedown", onPointerDown);
+    }, [open]);
+    const panel = open && panelStyle ? (_jsxs("div", { ref: panelRef, id: titleId, className: "spk-editor-toolbar-popover-panel spk-editor-toolbar-popover-panel--portal", role: "dialog", "aria-label": title, style: { top: panelStyle.top, left: panelStyle.left }, onMouseDown: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), children: [_jsx("div", { className: "spk-editor-toolbar-popover-title", children: title }), children({ close })] })) : null;
+    return (_jsxs("div", { ref: rootRef, className: cn("spk-editor-toolbar-popover", className), children: [_jsx(ToolbarButton, { ref: triggerRef, "aria-label": label, "aria-expanded": open, "aria-haspopup": "dialog", "aria-controls": open ? titleId : undefined, active: open || active, onClick: () => setOpen((value) => !value), children: icon }), typeof document !== "undefined" && panel ? createPortal(panel, document.body) : null] }));
+}

package/dist/extensions/ai-action.d.ts

@@ -0,0 +1,24 @@
+import { Extension } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+export declare const AiActionPluginKey: PluginKey<any>;
+export type AiActionStorage = {
+    processing: boolean;
+    lastSelection: {
+        from: number;
+        to: number;
+    } | null;
+};
+/** Highlights the active selection while an AI transform runs. */
+export declare function createAiActionExtension(): Extension<any, any>;
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        aiAction: {
+            setAiProcessing: (processing: boolean) => ReturnType;
+            setAiSelection: (range: {
+                from: number;
+                to: number;
+            } | null) => ReturnType;
+        };
+    }
+}
+//# sourceMappingURL=ai-action.d.ts.map

package/dist/extensions/ai-action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-action.d.ts","sourceRoot":"","sources":["../../src/extensions/ai-action.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAU,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGrD,eAAO,MAAM,iBAAiB,gBAAmC,CAAC;AAElE,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CACpD,CAAC;AAEF,kEAAkE;AAClE,wBAAgB,uBAAuB,wBAmDtC;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,QAAQ,EAAE;YACR,eAAe,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,UAAU,CAAC;YACrD,cAAc,EAAE,CAAC,KAAK,EAAE;gBAAE,IAAI,EAAE,MAAM,CAAC;gBAAC,EAAE,EAAE,MAAM,CAAA;aAAE,GAAG,IAAI,KAAK,UAAU,CAAC;SAC5E,CAAC;KACH;CACF"}

package/dist/extensions/ai-action.js

@@ -0,0 +1,53 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+export const AiActionPluginKey = new PluginKey("spatikaAiAction");
+/** Highlights the active selection while an AI transform runs. */
+export function createAiActionExtension() {
+    return Extension.create({
+        name: "aiAction",
+        addStorage() {
+            return {
+                processing: false,
+                lastSelection: null,
+            };
+        },
+        addCommands() {
+            return {
+                setAiProcessing: (processing) => ({ tr, dispatch }) => {
+                    this.storage.processing = processing;
+                    if (dispatch)
+                        dispatch(tr);
+                    return true;
+                },
+                setAiSelection: (range) => ({ tr, dispatch }) => {
+                    this.storage.lastSelection = range;
+                    if (dispatch)
+                        dispatch(tr);
+                    return true;
+                },
+            };
+        },
+        addProseMirrorPlugins() {
+            const storage = this.storage;
+            return [
+                new Plugin({
+                    key: AiActionPluginKey,
+                    props: {
+                        decorations: (state) => {
+                            if (!storage.processing || !storage.lastSelection) {
+                                return DecorationSet.empty;
+                            }
+                            const { from, to } = storage.lastSelection;
+                            if (from === to)
+                                return DecorationSet.empty;
+                            return DecorationSet.create(state.doc, [
+                                Decoration.inline(from, to, { class: "spk-editor-ai-selection" }),
+                            ]);
+                        },
+                    },
+                }),
+            ];
+        },
+    });
+}

package/dist/extensions/mention.d.ts

@@ -0,0 +1,17 @@
+import { Extension, Node } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+import type { MentionContact } from "../lib/types";
+export type MentionStorage = {
+    contacts: MentionContact[];
+    activeIndex: number;
+    query: string;
+    range: {
+        from: number;
+        to: number;
+    } | null;
+    filteredItems: MentionContact[];
+    runCommand: ((item: MentionContact) => void) | null;
+};
+export declare const MentionPluginKey: PluginKey<any>;
+export declare function createMentionExtension(contacts: MentionContact[], onUpdate?: (state: MentionStorage) => void): (Extension<any, any> | Node<any, any>)[];
+//# sourceMappingURL=mention.d.ts.map

package/dist/extensions/mention.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention.d.ts","sourceRoot":"","sources":["../../src/extensions/mention.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC3C,aAAa,EAAE,cAAc,EAAE,CAAC;IAChC,UAAU,EAAE,CAAC,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,gBAAgB,gBAAkC,CAAC;AAEhE,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,cAAc,EAAE,EAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,4CAsC3C"}