@spatika/editor 1.5.0

package/dist/lib/editor-format-colors.js

@@ -0,0 +1,24 @@
+/** Preset text colors for the formatting toolbar. */
+export const EDITOR_TEXT_COLORS = [
+    { id: "default", label: "Default text color", value: null },
+    { id: "red", label: "Red text", value: "#dc2626" },
+    { id: "orange", label: "Orange text", value: "#ea580c" },
+    { id: "amber", label: "Amber text", value: "#d97706" },
+    { id: "green", label: "Green text", value: "#16a34a" },
+    { id: "teal", label: "Teal text", value: "#0d9488" },
+    { id: "blue", label: "Blue text", value: "#2563eb" },
+    { id: "violet", label: "Violet text", value: "#7c3aed" },
+    { id: "pink", label: "Pink text", value: "#db2777" },
+    { id: "gray", label: "Gray text", value: "#64748b" },
+];
+/** Preset highlight colors for the formatting toolbar. */
+export const EDITOR_HIGHLIGHT_COLORS = [
+    { id: "none", label: "Remove highlight", value: null },
+    { id: "yellow", label: "Yellow highlight", value: "#fef08a" },
+    { id: "lime", label: "Lime highlight", value: "#d9f99d" },
+    { id: "cyan", label: "Cyan highlight", value: "#a5f3fc" },
+    { id: "blue", label: "Blue highlight", value: "#bfdbfe" },
+    { id: "violet", label: "Violet highlight", value: "#ddd6fe" },
+    { id: "pink", label: "Pink highlight", value: "#fbcfe8" },
+    { id: "orange", label: "Orange highlight", value: "#fed7aa" },
+];

package/dist/lib/image-upload.d.ts

@@ -0,0 +1,14 @@
+export type ImageUploadOptions = {
+    maxSizeBytes?: number;
+    accept?: string;
+};
+export type ImageUploadResult = {
+    ok: true;
+    src: string;
+} | {
+    ok: false;
+    error: string;
+};
+export declare function readImageFileAsDataUrl(file: File, options?: ImageUploadOptions): Promise<ImageUploadResult>;
+export declare function insertImagesFromFiles(files: FileList | File[], upload: (file: File) => Promise<ImageUploadResult>, limit?: number): Promise<ImageUploadResult[]>;
+//# sourceMappingURL=image-upload.d.ts.map

package/dist/lib/image-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-upload.d.ts","sourceRoot":"","sources":["../../src/lib/image-upload.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GACzB;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAIjC,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,IAAI,EACV,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,iBAAiB,CAAC,CAyB5B;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,QAAQ,GAAG,IAAI,EAAE,EACxB,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,iBAAiB,CAAC,EAClD,KAAK,SAAI,GACR,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAG9B"}

package/dist/lib/image-upload.js

@@ -0,0 +1,29 @@
+const DEFAULT_MAX_SIZE = 5 * 1024 * 1024;
+export function readImageFileAsDataUrl(file, options = {}) {
+    const maxSizeBytes = options.maxSizeBytes ?? DEFAULT_MAX_SIZE;
+    const accept = options.accept ?? "image/*";
+    if (!file.type.startsWith("image/") && !accept.includes("*")) {
+        return Promise.resolve({ ok: false, error: "Only image files are supported." });
+    }
+    if (file.size > maxSizeBytes) {
+        const limitMb = Math.round(maxSizeBytes / (1024 * 1024));
+        return Promise.resolve({ ok: false, error: `Maximum file size is ${limitMb}MB.` });
+    }
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            if (typeof reader.result === "string") {
+                resolve({ ok: true, src: reader.result });
+            }
+            else {
+                resolve({ ok: false, error: "Could not read the image file." });
+            }
+        };
+        reader.onerror = () => resolve({ ok: false, error: "Could not read the image file." });
+        reader.readAsDataURL(file);
+    });
+}
+export function insertImagesFromFiles(files, upload, limit = 3) {
+    const list = Array.from(files).slice(0, limit);
+    return Promise.all(list.map((file) => upload(file)));
+}

package/dist/lib/insert-editor-images.d.ts

@@ -0,0 +1,5 @@
+import type { Editor } from "@tiptap/core";
+import type { ImageInsertConfig } from "./types";
+export declare function insertImageFilesIntoEditor(editor: Editor, files: FileList | File[], config?: ImageInsertConfig): Promise<boolean>;
+export declare function extractImageFiles(dataTransfer: DataTransfer | null | undefined): File[];
+//# sourceMappingURL=insert-editor-images.d.ts.map

package/dist/lib/insert-editor-images.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert-editor-images.d.ts","sourceRoot":"","sources":["../../src/lib/insert-editor-images.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAkBjD,wBAAsB,0BAA0B,CAC9C,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,QAAQ,GAAG,IAAI,EAAE,EACxB,MAAM,CAAC,EAAE,iBAAiB,oBAgB3B;AAED,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,UAG9E"}

package/dist/lib/insert-editor-images.js

@@ -0,0 +1,32 @@
+import { insertImagesFromFiles, readImageFileAsDataUrl } from "./image-upload";
+async function uploadImageFile(file, config) {
+    if (config?.onUpload) {
+        try {
+            const src = await config.onUpload(file);
+            return src ? { ok: true, src } : { ok: false, error: "Upload failed." };
+        }
+        catch {
+            return { ok: false, error: "Upload failed." };
+        }
+    }
+    return readImageFileAsDataUrl(file, {
+        maxSizeBytes: config?.maxSizeBytes,
+        accept: config?.accept,
+    });
+}
+export async function insertImageFilesIntoEditor(editor, files, config) {
+    const maxFiles = config?.maxFiles ?? 3;
+    const results = await insertImagesFromFiles(files, (file) => uploadImageFile(file, config), maxFiles);
+    const sources = results.flatMap((result) => (result.ok ? [result.src] : []));
+    if (!sources.length)
+        return false;
+    sources.forEach((src) => {
+        editor.chain().focus().setImage({ src }).run();
+    });
+    return true;
+}
+export function extractImageFiles(dataTransfer) {
+    if (!dataTransfer?.files?.length)
+        return [];
+    return Array.from(dataTransfer.files).filter((file) => file.type.startsWith("image/"));
+}

package/dist/lib/types.d.ts

@@ -0,0 +1,131 @@
+import type { Editor, Extensions } from "@tiptap/core";
+import type { StarterKitOptions } from "@tiptap/starter-kit";
+import type { ReactNode } from "react";
+export type SpatikaEditorToolbarConfig = {
+    /** Show text style group (paragraph, headings). Default true. */
+    textStyle?: boolean;
+    /** Show inline formatting (bold, italic, underline, strike, code, sub/sup, colors, blockquote). Default true. */
+    inlineFormat?: boolean;
+    /** Show list controls (bullet, numbered, task). Default true. */
+    lists?: boolean;
+    /** Show text alignment (left, center, right, justify). Default true. */
+    alignment?: boolean;
+    /** Show insert controls (link, divider, table, image). Default true. */
+    insert?: boolean;
+    /** Show AI actions. Default true. */
+    ai?: boolean;
+    /** Show undo/redo controls. Default true. */
+    history?: boolean;
+    /** Toolbar layout. Default "ribbon". */
+    layout?: "ribbon" | "compact";
+};
+export type ImageInsertConfig = {
+    /** Maximum files per drop or picker action. Default 3. */
+    maxFiles?: number;
+    /** Maximum bytes per file. Default 5MB. */
+    maxSizeBytes?: number;
+    /** Accepted MIME types for uploads. Default `image/*`. */
+    accept?: string;
+    /** Host-owned upload handler. Defaults to inline base64 data URLs. */
+    onUpload?: (file: File) => Promise<string>;
+};
+export type SlashCommandItem = {
+    id: string;
+    title: string;
+    description?: string;
+    icon?: ReactNode;
+    keywords?: string[];
+    command: (editor: Editor) => void;
+};
+export type MentionContact = {
+    id: string;
+    label: string;
+    avatarUrl?: string;
+    subtitle?: string;
+};
+export type AiActionDefinition = {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    /** When true the action stays disabled until the user selects text. */
+    requiresSelection?: boolean;
+};
+export type AiCommandPromptConfig = {
+    enabled?: boolean;
+    placeholder?: string;
+    submitLabel?: string;
+};
+export type AiCommandMenuConfig = {
+    /** Panel heading. Default "AI commands". */
+    title?: string;
+    /** Preset actions shown in the menu. Falls back to `aiActions` then defaults. */
+    actions?: AiActionDefinition[];
+    /** Free-form prompt field. Default enabled. Pass `false` to hide it. */
+    prompt?: boolean | AiCommandPromptConfig;
+    /** Mirror preset actions in the selection bubble menu. Default false. */
+    bubbleActions?: boolean;
+    /** Where the AI command UI renders. Default `dock` (Tiptap-style prompt bar). */
+    placement?: "toolbar" | "dock";
+};
+/** Sent to `onAiCommand` when the user runs a preset action or submits a prompt. */
+export type AiCommandContext = {
+    /** Preset action id, or `"prompt"` for a free-form request. */
+    actionId: string;
+    /** User text from the prompt field when `actionId` is `"prompt"`. */
+    prompt?: string;
+    selectedText: string;
+    documentText: string;
+    html: string;
+    selection: {
+        from: number;
+        to: number;
+    } | null;
+};
+export declare const AI_PROMPT_ACTION_ID = "prompt";
+export type SpatikaEditorHandle = {
+    focus: () => void;
+    setContent: (html: string) => void;
+    getHTML: () => string;
+    getJSON: () => unknown;
+    expandFullscreen: () => void;
+};
+export type PlaceholderConfig = string | ((node: {
+    type: string;
+    level?: number;
+    pos: number;
+}) => string);
+export type UseSpatikaEditorOptions = {
+    value: string;
+    onChange: (html: string) => void;
+    placeholder?: PlaceholderConfig;
+    disabled?: boolean;
+    extensions?: Extensions;
+    starterKit?: Partial<StarterKitOptions>;
+    slashCommands?: SlashCommandItem[];
+    mentions?: MentionContact[];
+    /** @deprecated Prefer `onAiCommand` for preset actions and free-form prompts. */
+    onAiSelectionAction?: (action: string, selectedText: string) => Promise<string | null>;
+    onAiCommand?: (context: AiCommandContext) => Promise<string | null>;
+    resizableImages?: boolean;
+    onSlashUpdate?: (state: import("../extensions/slash-command").SlashCommandStorage) => void;
+    onMentionUpdate?: (state: import("../extensions/mention").MentionStorage) => void;
+    imageInsert?: ImageInsertConfig;
+};
+export type SpatikaEditorProps = UseSpatikaEditorOptions & {
+    className?: string;
+    heightClassName?: string;
+    toolbar?: SpatikaEditorToolbarConfig;
+    toolbarActions?: ReactNode;
+    isAiProcessing?: boolean;
+    /** Preset AI actions for legacy toolbar/bubble buttons when `aiCommandMenu` is false. */
+    aiActions?: AiActionDefinition[];
+    /** Tiptap-style AI command menu. Default on when an AI handler is provided. Pass `false` for legacy buttons. */
+    aiCommandMenu?: AiCommandMenuConfig | false;
+    imageInsert?: ImageInsertConfig;
+    onInsertImage?: () => void;
+    mobileFullscreen?: boolean;
+};
+export declare const DEFAULT_TOOLBAR: Required<SpatikaEditorToolbarConfig>;
+export declare const DEFAULT_SLASH_COMMANDS: SlashCommandItem[];
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,0BAA0B,GAAG;IACvC,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iHAAiH;IACjH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qCAAqC;IACrC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iFAAiF;IACjF,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,oFAAoF;AACpF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,CAAC,CAAC,IAAI,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,KAAK,MAAM,CAAC,CAAC;AAEtE,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,iFAAiF;IACjF,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvF,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACpE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,6BAA6B,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC3F,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,uBAAuB,EAAE,cAAc,KAAK,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,iBAAiB,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,uBAAuB,GAAG;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,0BAA0B,CAAC;IACrC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yFAAyF;IACzF,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,gHAAgH;IAChH,aAAa,CAAC,EAAE,mBAAmB,GAAG,KAAK,CAAC;IAC5C,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,0BAA0B,CAShE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,gBAAgB,EAAO,CAAC"}

package/dist/lib/types.js

@@ -0,0 +1,12 @@
+export const AI_PROMPT_ACTION_ID = "prompt";
+export const DEFAULT_TOOLBAR = {
+    textStyle: true,
+    inlineFormat: true,
+    lists: true,
+    alignment: true,
+    insert: true,
+    ai: true,
+    history: true,
+    layout: "ribbon",
+};
+export const DEFAULT_SLASH_COMMANDS = [];

package/dist/lib/use-spatika-editor.d.ts

@@ -0,0 +1,13 @@
+import type { Extensions } from "@tiptap/core";
+import { createMentionExtension } from "../extensions/mention";
+import { createSlashCommandExtension } from "../extensions/slash-command";
+import type { UseSpatikaEditorOptions } from "./types";
+export declare function buildSpatikaExtensions(options: UseSpatikaEditorOptions & {
+    onSlashUpdate?: Parameters<typeof createSlashCommandExtension>[1];
+    onMentionUpdate?: Parameters<typeof createMentionExtension>[1];
+}): Extensions;
+export declare function useSpatikaEditor(options: UseSpatikaEditorOptions): {
+    editor: import("@tiptap/core").Editor;
+    isReady: boolean;
+};
+//# sourceMappingURL=use-spatika-editor.d.ts.map

package/dist/lib/use-spatika-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-spatika-editor.d.ts","sourceRoot":"","sources":["../../src/lib/use-spatika-editor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAqB/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EACL,2BAA2B,EAE5B,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAqB,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAc1E,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,uBAAuB,GAAG;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC,CAAC,CAAC,CAAC;IAClE,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;CAChE,GACA,UAAU,CA6CZ;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB;;;EAgGhE"}

package/dist/lib/use-spatika-editor.js

@@ -0,0 +1,171 @@
+import { useEffect, useMemo, useRef } from "react";
+import Color from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import { Table } from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TableRow from "@tiptap/extension-table-row";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import TextAlign from "@tiptap/extension-text-align";
+import { TextStyle } from "@tiptap/extension-text-style";
+import Underline from "@tiptap/extension-underline";
+import { useEditor } from "@tiptap/react";
+import { TextSelection } from "@tiptap/pm/state";
+import StarterKit from "@tiptap/starter-kit";
+import { createAiActionExtension } from "../extensions/ai-action";
+import { createMentionExtension } from "../extensions/mention";
+import { ResizableImage } from "../extensions/resizable-image";
+import { createSlashCommandExtension, defaultSlashCommands, } from "../extensions/slash-command";
+import { extractImageFiles, insertImageFilesIntoEditor } from "./insert-editor-images";
+function resolvePlaceholder(placeholder) {
+    if (!placeholder)
+        return "Start writing…";
+    if (typeof placeholder === "string")
+        return placeholder;
+    return (props) => placeholder({
+        type: props.node.type.name,
+        level: props.node.attrs.level,
+        pos: props.pos,
+    });
+}
+export function buildSpatikaExtensions(options) {
+    const imageExtension = options.resizableImages ? ResizableImage : Image;
+    const slashItems = [
+        ...defaultSlashCommands(),
+        ...(options.slashCommands ?? []),
+    ];
+    const extensions = [
+        StarterKit.configure({
+            heading: { levels: [1, 2, 3] },
+            link: false,
+            underline: false,
+            ...options.starterKit,
+        }),
+        TextStyle,
+        Color,
+        Highlight.configure({ multicolor: true }),
+        Subscript,
+        Superscript,
+        Underline,
+        Link.configure({
+            openOnClick: false,
+            HTMLAttributes: { class: "spk-editor-link" },
+        }),
+        Placeholder.configure({
+            placeholder: resolvePlaceholder(options.placeholder),
+        }),
+        TextAlign.configure({ types: ["heading", "paragraph"] }),
+        TaskList,
+        TaskItem.configure({ nested: true }),
+        Table.configure({ resizable: true }),
+        TableRow,
+        TableHeader,
+        TableCell,
+        imageExtension.configure({ inline: false, allowBase64: true }),
+        createSlashCommandExtension(slashItems, options.onSlashUpdate),
+        ...(options.onAiSelectionAction || options.onAiCommand ? [createAiActionExtension()] : []),
+        ...(options.extensions ?? []),
+    ];
+    if (options.mentions?.length) {
+        extensions.push(...createMentionExtension(options.mentions, options.onMentionUpdate));
+    }
+    return extensions;
+}
+export function useSpatikaEditor(options) {
+    const onChangeRef = useRef(options.onChange);
+    onChangeRef.current = options.onChange;
+    const slashUpdateRef = useRef(options.onSlashUpdate);
+    slashUpdateRef.current = options.onSlashUpdate;
+    const mentionUpdateRef = useRef(options.onMentionUpdate);
+    mentionUpdateRef.current = options.onMentionUpdate;
+    const imageInsertRef = useRef(options.imageInsert);
+    imageInsertRef.current = options.imageInsert;
+    const editorRef = useRef(null);
+    const extensions = useMemo(() => buildSpatikaExtensions({
+        ...options,
+        onSlashUpdate: (state) => slashUpdateRef.current?.(state),
+        onMentionUpdate: (state) => mentionUpdateRef.current?.(state),
+    }), [
+        options.placeholder,
+        options.resizableImages,
+        options.slashCommands,
+        options.mentions,
+        options.extensions,
+        options.starterKit,
+        options.onAiSelectionAction,
+        options.onAiCommand,
+    ]);
+    const editor = useEditor({
+        immediatelyRender: true,
+        extensions,
+        content: options.value,
+        editable: !options.disabled,
+        onUpdate: ({ editor: ed }) => {
+            onChangeRef.current(ed.getHTML());
+        },
+        editorProps: {
+            attributes: {
+                class: "spk-editor-content ProseMirror",
+                role: "textbox",
+                "aria-multiline": "true",
+                "aria-label": "Rich text editor",
+            },
+            handleDrop(view, event) {
+                const files = extractImageFiles(event.dataTransfer);
+                if (!files.length)
+                    return false;
+                event.preventDefault();
+                const coords = view.posAtCoords({ left: event.clientX, top: event.clientY });
+                if (coords) {
+                    view.dispatch(view.state.tr.setSelection(TextSelection.near(view.state.doc.resolve(coords.pos))));
+                }
+                const ed = editorRef.current;
+                if (ed)
+                    void insertImageFilesIntoEditor(ed, files, imageInsertRef.current);
+                return true;
+            },
+            handlePaste(_view, event) {
+                const items = event.clipboardData?.items;
+                if (!items)
+                    return false;
+                const files = Array.from(items)
+                    .filter((item) => item.type.startsWith("image/"))
+                    .map((item) => item.getAsFile())
+                    .filter((file) => Boolean(file));
+                if (!files.length)
+                    return false;
+                event.preventDefault();
+                const ed = editorRef.current;
+                if (ed)
+                    void insertImageFilesIntoEditor(ed, files, imageInsertRef.current);
+                return true;
+            },
+        },
+    });
+    useEffect(() => {
+        editorRef.current = editor;
+    }, [editor]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.setEditable(!options.disabled);
+    }, [editor, options.disabled]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const current = editor.getHTML();
+        if (options.value !== current) {
+            editor.commands.setContent(options.value, { emitUpdate: false });
+        }
+    }, [editor, options.value]);
+    return {
+        editor,
+        isReady: Boolean(editor),
+    };
+}