neuphlo-editor 2.5.0 → 2.6.0

package/dist/headless/extensions/Mention/mention.js

@@ -0,0 +1,218 @@
+import { ReactRenderer, ReactNodeViewRenderer } from "@tiptap/react";
+import Mention from "@tiptap/extension-mention";
+import { MentionCommand } from "./mention-command";
+import { MentionNodeView } from "./mention-node-view";
+/**
+ * Create the mention extension with custom suggestion rendering
+ */
+export const createMentionExtension = (options) => {
+    const extensionName = options?.name ?? "mention";
+    return Mention.extend({
+        name: extensionName,
+        addAttributes() {
+            return {
+                id: {
+                    default: null,
+                    parseHTML: (element) => element.getAttribute("data-id"),
+                    renderHTML: (attributes) => {
+                        if (!attributes.id) {
+                            return {};
+                        }
+                        return {
+                            "data-id": attributes.id,
+                        };
+                    },
+                },
+                label: {
+                    default: null,
+                    parseHTML: (element) => element.getAttribute("data-label"),
+                    renderHTML: (attributes) => {
+                        if (!attributes.label) {
+                            return {};
+                        }
+                        return {
+                            "data-label": attributes.label,
+                        };
+                    },
+                },
+                avatar: {
+                    default: null,
+                    parseHTML: (element) => element.getAttribute("data-avatar"),
+                    renderHTML: (attributes) => {
+                        if (!attributes.avatar) {
+                            return {};
+                        }
+                        return {
+                            "data-avatar": attributes.avatar,
+                        };
+                    },
+                },
+                type: {
+                    default: null,
+                    parseHTML: (element) => element.getAttribute("data-ref-type"),
+                    renderHTML: (attributes) => {
+                        if (!attributes.type) {
+                            return {};
+                        }
+                        return {
+                            "data-ref-type": attributes.type,
+                        };
+                    },
+                },
+                nodeId: {
+                    default: null,
+                    parseHTML: (element) => element.getAttribute("data-node-id"),
+                    renderHTML: (attributes) => {
+                        if (!attributes.nodeId) {
+                            return {};
+                        }
+                        return {
+                            "data-node-id": attributes.nodeId,
+                        };
+                    },
+                },
+                slug: {
+                    default: null,
+                    parseHTML: (element) => element.getAttribute("data-slug"),
+                    renderHTML: (attributes) => {
+                        if (!attributes.slug) {
+                            return {};
+                        }
+                        return {
+                            "data-slug": attributes.slug,
+                        };
+                    },
+                },
+            };
+        },
+        addNodeView() {
+            return ReactNodeViewRenderer(MentionNodeView);
+        },
+    }).configure({
+        HTMLAttributes: {
+            class: "mention",
+        },
+        suggestion: {
+            char: options?.char ?? "@",
+            items: async ({ query }) => {
+                if (!options?.items)
+                    return [];
+                const items = await options.items(query);
+                return items;
+            },
+            command: ({ editor, range, props: item }) => {
+                editor
+                    .chain()
+                    .focus()
+                    .insertContentAt(range, [
+                    {
+                        type: extensionName,
+                        attrs: {
+                            id: item.id,
+                            label: item.label,
+                            avatar: item.avatar,
+                            type: item.type,
+                            nodeId: item.nodeId,
+                            slug: item.slug,
+                        },
+                    },
+                    { type: "text", text: " " },
+                ])
+                    .run();
+            },
+            render: renderMentionSuggestion,
+        },
+        renderLabel: options?.renderLabel ?? ((props) => {
+            return `@${props.node.attrs.label ?? props.node.attrs.id}`;
+        }),
+    });
+};
+/**
+ * Render function for mention suggestions (autocomplete dropdown)
+ */
+export const renderMentionSuggestion = () => {
+    let component = null;
+    let container = null;
+    const destroy = () => {
+        component?.destroy();
+        component = null;
+        if (container) {
+            container.remove();
+            container = null;
+        }
+    };
+    const updatePosition = (clientRect) => {
+        if (!container || !clientRect)
+            return;
+        const gap = 8;
+        const maxDropdownHeight = 300; // Match the maxHeight from MentionCommand
+        const spaceBelow = window.innerHeight - clientRect.bottom;
+        const spaceAbove = clientRect.top;
+        // Position above if not enough space below, otherwise position below
+        const shouldPositionAbove = spaceBelow < maxDropdownHeight && spaceAbove > spaceBelow;
+        const left = Math.round(clientRect.left);
+        if (shouldPositionAbove) {
+            const bottom = Math.round(window.innerHeight - clientRect.top + gap);
+            container.style.bottom = `${bottom}px`;
+            container.style.top = 'auto';
+        }
+        else {
+            const top = Math.round(clientRect.bottom + gap);
+            container.style.top = `${top}px`;
+            container.style.bottom = 'auto';
+        }
+        container.style.left = `${left}px`;
+    };
+    return {
+        onStart: (props) => {
+            component = new ReactRenderer(MentionCommand, {
+                props: {
+                    items: props.items ?? [],
+                    command: props.command ?? (() => { }),
+                    query: props.query ?? "",
+                },
+                editor: props.editor,
+            });
+            container = document.createElement("div");
+            container.style.position = "fixed";
+            container.style.zIndex = "9999";
+            document.body.appendChild(container);
+            container.appendChild(component.element);
+            const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
+            if (rect)
+                updatePosition(rect);
+        },
+        onUpdate: (props) => {
+            component?.updateProps({
+                items: props.items ?? [],
+                command: props.command ?? (() => { }),
+                query: props.query ?? "",
+            });
+            const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
+            if (rect)
+                updatePosition(rect);
+        },
+        onKeyDown: ({ event }) => {
+            if (!component)
+                return false;
+            if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                destroy();
+                return true;
+            }
+            // Handle arrow keys and enter
+            if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+                event.preventDefault();
+                event.stopPropagation();
+                // Let the MentionList component handle keyboard navigation
+                return component.ref?.onKeyDown?.({ event }) ?? false;
+            }
+            return false;
+        },
+        onExit: () => {
+            destroy();
+        },
+    };
+};
+export default createMentionExtension;

package/dist/headless/extensions/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { TableKit } from "@tiptap/extension-table";
+export { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";

package/dist/headless/extensions/Table/index.js

@@ -0,0 +1,2 @@
+export { TableKit } from "@tiptap/extension-table";
+export { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";

package/dist/headless/extensions/VideoBlock/VideoBlock.d.ts

@@ -0,0 +1,17 @@
+import { Node } from "@tiptap/core";
+export interface VideoBlockOptions {
+    nodeView?: any;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        videoBlock: {
+            setVideoBlock: (attributes: {
+                src: string;
+            }) => ReturnType;
+            setVideoBlockAlign: (align: "left" | "center" | "right") => ReturnType;
+            setVideoBlockWidth: (width: number) => ReturnType;
+        };
+    }
+}
+export declare const VideoBlock: Node<VideoBlockOptions, any>;
+export default VideoBlock;

package/dist/headless/extensions/VideoBlock/VideoBlock.js

@@ -0,0 +1,73 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+export const VideoBlock = Node.create({
+    name: "videoBlock",
+    group: "block",
+    defining: true,
+    isolating: true,
+    atom: true,
+    addOptions() {
+        return {
+            nodeView: undefined,
+        };
+    },
+    addAttributes() {
+        return {
+            src: {
+                default: "",
+                parseHTML: (element) => element.getAttribute("data-src"),
+                renderHTML: (attributes) => ({
+                    "data-src": attributes.src,
+                }),
+            },
+            width: {
+                default: "100%",
+                parseHTML: (element) => element.getAttribute("data-width"),
+                renderHTML: (attributes) => ({
+                    "data-width": attributes.width,
+                }),
+            },
+            align: {
+                default: "center",
+                parseHTML: (element) => element.getAttribute("data-align"),
+                renderHTML: (attributes) => ({
+                    "data-align": attributes.align,
+                }),
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-type="video-block"]',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "div",
+            mergeAttributes(HTMLAttributes, { "data-type": "video-block" }),
+        ];
+    },
+    addCommands() {
+        return {
+            setVideoBlock: (attrs) => ({ commands }) => {
+                return commands.insertContent({
+                    type: "videoBlock",
+                    attrs: { src: attrs.src },
+                });
+            },
+            setVideoBlockAlign: (align) => ({ commands }) => commands.updateAttributes("videoBlock", { align }),
+            setVideoBlockWidth: (width) => ({ commands }) => commands.updateAttributes("videoBlock", {
+                width: `${Math.max(0, Math.min(100, width))}%`,
+            }),
+        };
+    },
+    addNodeView() {
+        if (this.options.nodeView) {
+            return ReactNodeViewRenderer(this.options.nodeView);
+        }
+        return undefined;
+    },
+});
+export default VideoBlock;

package/dist/headless/extensions/VideoBlock/index.d.ts

@@ -0,0 +1,2 @@
+export { VideoBlock } from "./VideoBlock";
+export type { VideoBlockOptions } from "./VideoBlock";

package/dist/headless/extensions/VideoBlock/index.js

@@ -0,0 +1 @@
+export { VideoBlock } from "./VideoBlock";

package/dist/headless/extensions/extension-kit.d.ts

@@ -0,0 +1,29 @@
+import type { MentionOptions } from "./Mention";
+import type { DragHandleCallbacks } from "./DragHandle";
+export interface ExtensionKitOptions {
+    uploadImage?: (file: File) => Promise<string>;
+    browseAssets?: (onSelect: (url: string) => void) => void;
+    collaboration?: {
+        doc: any;
+        field: string;
+        awareness?: any;
+        provider?: any;
+        user?: {
+            name: string;
+            color: string;
+            [key: string]: any;
+        };
+    };
+    imageBlockView?: any;
+    videoBlockView?: any;
+    taskItemView?: any;
+    mention?: MentionOptions;
+    reference?: MentionOptions;
+    slashCommand?: boolean;
+    dragHandle?: boolean;
+    dragHandleCallbacks?: DragHandleCallbacks;
+    table?: boolean;
+    placeholder?: string;
+}
+export declare const ExtensionKit: (options?: ExtensionKitOptions) => (import("@tiptap/core").Node<import("@tiptap/extension-code-block-lowlight").CodeBlockLowlightOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any> | import("@tiptap/core").Node<import("./ImageBlock").ImageBlockOptions, any> | import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Extension<any, import("./Markdown").MarkdownStorage> | import("@tiptap/core").Node<import("./VideoBlock").VideoBlockOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-list").TaskItemOptions, any> | import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-underline").UnderlineOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-list").TaskListOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extensions").PlaceholderOptions, any>)[];
+export default ExtensionKit;

package/dist/headless/extensions/extension-kit.js

@@ -0,0 +1,132 @@
+import Collaboration from "@tiptap/extension-collaboration";
+import CollaborationCaret from "@tiptap/extension-collaboration-caret";
+import { StarterKit, Placeholder, CodeBlock, Link } from ".";
+import Underline from "@tiptap/extension-underline";
+import { TaskList, TaskItem as BaseTaskItem } from "@tiptap/extension-list";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+const TaskItem = BaseTaskItem.extend({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            nodeView: null,
+        };
+    },
+    addNodeView() {
+        const custom = this.options.nodeView;
+        if (custom) {
+            return ReactNodeViewRenderer(custom);
+        }
+        return this.parent?.();
+    },
+});
+import { Command as SlashCommand, } from "./slash-command";
+import { ImageBlock } from "./ImageBlock/ImageBlock";
+import { VideoBlock } from "./VideoBlock/VideoBlock";
+import { createMentionExtension } from "./Mention";
+import { DragHandle, setDragHandleCallbacks } from "./DragHandle";
+import { TableKit } from "./Table";
+import { MarkdownPaste } from "./MarkdownPaste";
+import { Markdown } from "./Markdown";
+export const ExtensionKit = (options) => {
+    const enableSlashCommand = options?.slashCommand !== false; // Default to true
+    const extensions = [
+        StarterKit.configure({ codeBlock: false, link: false }),
+        CodeBlock,
+        Link,
+        Underline,
+        TaskList,
+        TaskItem.configure({ nested: true, nodeView: options?.taskItemView }),
+        ImageBlock.configure({
+            uploadImage: options?.uploadImage,
+            browseAssets: options?.browseAssets,
+            nodeView: options?.imageBlockView,
+        }),
+        VideoBlock.configure({
+            nodeView: options?.videoBlockView,
+        }),
+        Placeholder.configure({
+            placeholder: ({ node }) => {
+                if (node.type.name === "heading") {
+                    return `Heading ${node.attrs.level}`;
+                }
+                // Use custom placeholder if provided, otherwise show slash command hint if enabled
+                if (options?.placeholder) {
+                    return options.placeholder;
+                }
+                return enableSlashCommand ? "Press '/' for commands" : "";
+            },
+            includeChildren: true,
+        }),
+        MarkdownPaste,
+        Markdown,
+    ];
+    // Add Table support if enabled
+    if (options?.table !== false) {
+        extensions.push(TableKit.configure({
+            resizable: true,
+            lastColumnResizable: true,
+            allowTableNodeSelection: true,
+        }));
+    }
+    // Add DragHandle if enabled
+    if (options?.dragHandle !== false) {
+        extensions.push(DragHandle);
+        if (options?.dragHandleCallbacks) {
+            setDragHandleCallbacks(options.dragHandleCallbacks);
+        }
+    }
+    // Add SlashCommand if enabled
+    if (enableSlashCommand) {
+        extensions.push(SlashCommand.configure({
+            suggestion: {
+                char: "/",
+                allowSpaces: true,
+                allowedPrefixes: null,
+            },
+        }));
+    }
+    // Add Mention extension if configured
+    if (options?.mention) {
+        const mentionExt = createMentionExtension(options.mention);
+        extensions.push(mentionExt);
+    }
+    // Add Reference extension if configured (uses same Mention extension with different config)
+    if (options?.reference) {
+        const referenceExt = createMentionExtension({
+            ...options.reference,
+            name: "reference", // Use unique name to avoid conflicts
+        });
+        extensions.push(referenceExt);
+    }
+    if (options?.collaboration?.doc) {
+        extensions.push(Collaboration.configure({
+            document: options.collaboration.doc,
+            field: options.collaboration.field,
+        }));
+        // Add collaboration carets if provider and user are available
+        if (options.collaboration.provider && options.collaboration.user) {
+            extensions.push(CollaborationCaret.configure({
+                provider: options.collaboration.provider,
+                user: options.collaboration.user,
+                render: (user) => {
+                    const cursor = document.createElement("span");
+                    cursor.classList.add("nph-collab-caret");
+                    cursor.setAttribute("style", `border-color: ${user.color || "#3b82f6"}`);
+                    const label = document.createElement("div");
+                    label.classList.add("nph-collab-caret__label");
+                    label.setAttribute("style", `background-color: ${user.color || "#3b82f6"}`);
+                    label.insertBefore(document.createTextNode(user.name || "Anonymous"), null);
+                    cursor.insertBefore(label, null);
+                    return cursor;
+                },
+                selectionRender: (user) => ({
+                    nodeName: "span",
+                    class: "nph-collab-selection",
+                    style: `background-color: ${user.color || "#3b82f6"}20`,
+                }),
+            }));
+        }
+    }
+    return extensions;
+};
+export default ExtensionKit;

package/dist/headless/extensions/index.d.ts

@@ -0,0 +1,16 @@
+export { StarterKit } from "@tiptap/starter-kit";
+export { Placeholder } from "@tiptap/extension-placeholder";
+export { CodeBlock } from "./CodeBlock";
+export { Link } from "./Link";
+export { ImageBlock } from "./ImageBlock";
+export type { ImageBlockOptions } from "./ImageBlock";
+export { AISuggestion, AISuggestionPluginKey } from "./AISuggestion";
+export type { AISuggestionOptions } from "./AISuggestion";
+export { createMentionExtension, renderMentionSuggestion, MentionCommand } from "./Mention";
+export type { MentionItem, MentionOptions } from "./Mention";
+export { DragHandle, setDragHandleCallbacks } from "./DragHandle";
+export type { DragHandleCallbacks } from "./DragHandle";
+export { TableKit, Table, TableCell, TableHeader, TableRow } from "./Table";
+export { MarkdownPaste } from "./MarkdownPaste";
+export { Markdown, markdownToHtml } from "./Markdown";
+export type { MarkdownStorage } from "./Markdown";

package/dist/headless/extensions/index.js

@@ -0,0 +1,12 @@
+export { StarterKit } from "@tiptap/starter-kit";
+export { Placeholder } from "@tiptap/extension-placeholder";
+// Custom
+export { CodeBlock } from "./CodeBlock";
+export { Link } from "./Link";
+export { ImageBlock } from "./ImageBlock";
+export { AISuggestion, AISuggestionPluginKey } from "./AISuggestion";
+export { createMentionExtension, renderMentionSuggestion, MentionCommand } from "./Mention";
+export { DragHandle, setDragHandleCallbacks } from "./DragHandle";
+export { TableKit, Table, TableCell, TableHeader, TableRow } from "./Table";
+export { MarkdownPaste } from "./MarkdownPaste";
+export { Markdown, markdownToHtml } from "./Markdown";

package/dist/headless/extensions/slash-command.d.ts

@@ -0,0 +1,24 @@
+import { Extension } from "@tiptap/core";
+import type { ReactNode } from "react";
+export declare const Command: Extension<any, any>;
+export declare const renderItems: () => {
+    onStart: () => void;
+    onUpdate: () => void;
+    onKeyDown: () => boolean;
+    onExit: () => void;
+};
+export interface SuggestionItem {
+    title: string;
+    description: string;
+    icon: ReactNode;
+    searchTerms?: string[];
+    command?: (props: {
+        editor: any;
+        range: {
+            from: number;
+            to: number;
+        };
+    }) => void;
+}
+export declare const createSuggestionItems: (items: SuggestionItem[]) => SuggestionItem[];
+export declare const handleCommandNavigation: (event: KeyboardEvent) => true | undefined;

package/dist/headless/extensions/slash-command.js

@@ -0,0 +1,99 @@
+import Suggestion from "@tiptap/suggestion";
+import { Extension } from "@tiptap/core";
+import { queryAtom, rangeAtom, slashMenuOpenAtom, slashMenuRectAtom } from "../utils/atoms";
+import { novelStore } from "../utils/store";
+export const Command = Extension.create({
+    name: "slash-command",
+    addOptions() {
+        return {
+            suggestion: {
+                char: "/",
+                command: (ctx) => {
+                    ctx.props.command({ editor: ctx.editor, range: ctx.range });
+                },
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        const base = this.options.suggestion ?? {};
+        return [
+            Suggestion({
+                editor: this.editor,
+                char: base.char ?? "/",
+                startOfLine: base.startOfLine ?? true,
+                items: base.items ?? (() => ["/"]),
+                command: (ctx) => {
+                    if (typeof ctx?.props?.command === "function") {
+                        ctx.props.command({ editor: ctx.editor, range: ctx.range });
+                    }
+                },
+                ...base,
+                render: () => {
+                    return {
+                        onStart: (props) => {
+                            const { selection } = props.editor.state;
+                            const parentNode = selection.$from.node(selection.$from.depth);
+                            const blockType = parentNode.type.name;
+                            if (blockType === "codeBlock")
+                                return false;
+                            const { $from } = selection;
+                            const marks = $from.marks();
+                            if (marks.some((mark) => mark.type.name === "code" || mark.type.name === "link")) {
+                                return false;
+                            }
+                            novelStore.set(queryAtom, props.query ?? "");
+                            novelStore.set(rangeAtom, props.range ?? null);
+                            novelStore.set(slashMenuOpenAtom, true);
+                            const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
+                            novelStore.set(slashMenuRectAtom, rect);
+                        },
+                        onUpdate: (props) => {
+                            novelStore.set(queryAtom, props.query ?? "");
+                            novelStore.set(rangeAtom, props.range ?? null);
+                            const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
+                            novelStore.set(slashMenuRectAtom, rect);
+                        },
+                        onKeyDown: ({ event }) => {
+                            if (event.key === "Escape") {
+                                novelStore.set(slashMenuOpenAtom, false);
+                                return true;
+                            }
+                            if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+                                const slashCommand = document.querySelector("#slash-command");
+                                if (slashCommand) {
+                                    slashCommand.dispatchEvent(new KeyboardEvent("keydown", {
+                                        key: event.key,
+                                        cancelable: true,
+                                        bubbles: true,
+                                    }));
+                                    return true;
+                                }
+                            }
+                            return false;
+                        },
+                        onExit: () => {
+                            novelStore.set(slashMenuOpenAtom, false);
+                            novelStore.set(queryAtom, "");
+                            novelStore.set(rangeAtom, null);
+                            novelStore.set(slashMenuRectAtom, null);
+                        },
+                    };
+                },
+            }),
+        ];
+    },
+});
+export const renderItems = () => ({
+    onStart: () => { },
+    onUpdate: () => { },
+    onKeyDown: () => false,
+    onExit: () => { },
+});
+export const createSuggestionItems = (items) => items;
+export const handleCommandNavigation = (event) => {
+    if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+        const slashCommand = document.querySelector("#slash-command");
+        if (slashCommand)
+            return true;
+    }
+};