neuphlo-editor 2.5.0 → 2.6.0

package/dist/headless/extensions/AISuggestion/AISuggestion.js

@@ -0,0 +1,244 @@
+/**
+ * TipTap AI Suggestion Extension
+ *
+ * This extension provides inline AI-powered text completions that appear
+ * as ghost text at the cursor position.
+ *
+ * Usage:
+ * ```ts
+ * import { AISuggestion } from 'neuphlo-editor'
+ *
+ * const editor = new Editor({
+ *   extensions: [
+ *     AISuggestion.configure({
+ *       onFetchSuggestion: async (context) => {
+ *         // Call your AI API here
+ *         const response = await fetch('/api/complete', {
+ *           method: 'POST',
+ *           body: JSON.stringify({ text: context }),
+ *         })
+ *         const data = await response.json()
+ *         return data.completion
+ *       },
+ *       debounceMs: 2000,
+ *     }),
+ *   ],
+ * })
+ * ```
+ */
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+export const AISuggestionPluginKey = new PluginKey("aiSuggestion");
+export const AISuggestion = Extension.create({
+    name: "aiSuggestion",
+    addOptions() {
+        return {
+            onFetchSuggestion: async () => null,
+            debounceMs: 2000,
+            minChars: 10,
+            suggestionClass: "ai-suggestion",
+            enabled: true,
+        };
+    },
+    addCommands() {
+        return {
+            acceptAISuggestion: () => ({ editor, tr, dispatch }) => {
+                const pluginState = AISuggestionPluginKey.getState(editor.state);
+                if (!pluginState?.suggestion)
+                    return false;
+                if (dispatch) {
+                    // Insert the suggestion text at cursor
+                    const { from } = editor.state.selection;
+                    tr.insertText(pluginState.suggestion, from);
+                    // Clear the suggestion
+                    tr.setMeta(AISuggestionPluginKey, { suggestion: null });
+                }
+                return true;
+            },
+            dismissAISuggestion: () => ({ tr, dispatch }) => {
+                if (dispatch) {
+                    tr.setMeta(AISuggestionPluginKey, { suggestion: null });
+                }
+                return true;
+            },
+            triggerAISuggestion: () => ({ editor }) => {
+                const pluginState = AISuggestionPluginKey.getState(editor.state);
+                if (pluginState?.fetchSuggestion) {
+                    pluginState.fetchSuggestion();
+                }
+                return true;
+            },
+            setAISuggestion: (text) => ({ tr, dispatch }) => {
+                if (dispatch) {
+                    tr.setMeta(AISuggestionPluginKey, { suggestion: text });
+                }
+                return true;
+            },
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            Tab: ({ editor }) => {
+                const pluginState = AISuggestionPluginKey.getState(editor.state);
+                if (pluginState?.suggestion) {
+                    return editor.commands.acceptAISuggestion();
+                }
+                return false; // Let other Tab handlers run
+            },
+            Escape: ({ editor }) => {
+                const pluginState = AISuggestionPluginKey.getState(editor.state);
+                if (pluginState?.suggestion) {
+                    return editor.commands.dismissAISuggestion();
+                }
+                return false;
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        const { options } = this;
+        return [
+            new Plugin({
+                key: AISuggestionPluginKey,
+                state: {
+                    init() {
+                        return {
+                            suggestion: null,
+                            isLoading: false,
+                            fetchSuggestion: null,
+                        };
+                    },
+                    apply(tr, value) {
+                        const meta = tr.getMeta(AISuggestionPluginKey);
+                        if (meta !== undefined) {
+                            return { ...value, ...meta };
+                        }
+                        // Clear suggestion if document changed (user is typing)
+                        if (tr.docChanged && value.suggestion) {
+                            return { ...value, suggestion: null };
+                        }
+                        return value;
+                    },
+                },
+                view(editorView) {
+                    let debounceTimer = null;
+                    let lastContent = "";
+                    const fetchSuggestion = async () => {
+                        if (!options.enabled)
+                            return;
+                        const { state } = editorView;
+                        const { from } = state.selection;
+                        // Get text before cursor
+                        const textBefore = state.doc.textBetween(Math.max(0, from - 500), from, "\n");
+                        if (textBefore.trim().length < (options.minChars ?? 10)) {
+                            return;
+                        }
+                        // Set loading state
+                        editorView.dispatch(state.tr.setMeta(AISuggestionPluginKey, { isLoading: true }));
+                        try {
+                            const suggestion = await options.onFetchSuggestion(textBefore);
+                            if (suggestion && suggestion.trim()) {
+                                // Add leading space if needed
+                                let finalSuggestion = suggestion.trim();
+                                if (!finalSuggestion.startsWith(" ") &&
+                                    !textBefore.endsWith(" ")) {
+                                    finalSuggestion = " " + finalSuggestion;
+                                }
+                                editorView.dispatch(editorView.state.tr.setMeta(AISuggestionPluginKey, {
+                                    suggestion: finalSuggestion,
+                                    isLoading: false,
+                                }));
+                            }
+                            else {
+                                editorView.dispatch(editorView.state.tr.setMeta(AISuggestionPluginKey, {
+                                    suggestion: null,
+                                    isLoading: false,
+                                }));
+                            }
+                        }
+                        catch (error) {
+                            console.error("[AISuggestion] Error fetching suggestion:", error);
+                            editorView.dispatch(editorView.state.tr.setMeta(AISuggestionPluginKey, {
+                                suggestion: null,
+                                isLoading: false,
+                            }));
+                        }
+                    };
+                    // Store fetchSuggestion reference in plugin state
+                    editorView.dispatch(editorView.state.tr.setMeta(AISuggestionPluginKey, {
+                        fetchSuggestion,
+                    }));
+                    return {
+                        update(view, prevState) {
+                            if (!options.enabled)
+                                return;
+                            const currentContent = view.state.doc.textContent;
+                            // Only react to content changes
+                            if (currentContent !== lastContent) {
+                                lastContent = currentContent;
+                                // Clear existing timer
+                                if (debounceTimer) {
+                                    clearTimeout(debounceTimer);
+                                }
+                                // Set new timer
+                                debounceTimer = setTimeout(() => {
+                                    fetchSuggestion();
+                                }, options.debounceMs ?? 2000);
+                            }
+                        },
+                        destroy() {
+                            if (debounceTimer) {
+                                clearTimeout(debounceTimer);
+                            }
+                        },
+                    };
+                },
+                props: {
+                    decorations(state) {
+                        const pluginState = AISuggestionPluginKey.getState(state);
+                        if (!pluginState)
+                            return DecorationSet.empty;
+                        const { suggestion, isLoading } = pluginState;
+                        const { from } = state.selection;
+                        const decorations = [];
+                        if (isLoading) {
+                            // Show loading indicator
+                            const widget = document.createElement("span");
+                            widget.className = `${options.suggestionClass}-loading`;
+                            widget.innerHTML = `<span class="ai-suggestion-spinner"></span>`;
+                            widget.style.cssText = "opacity: 0.4; pointer-events: none;";
+                            decorations.push(Decoration.widget(from, widget, { side: 1 }));
+                        }
+                        else if (suggestion) {
+                            // Show ghost text
+                            const widget = document.createElement("span");
+                            widget.className = options.suggestionClass ?? "ai-suggestion";
+                            widget.textContent = suggestion;
+                            widget.style.cssText = `
+                opacity: 0.4;
+                pointer-events: none;
+                color: var(--muted-foreground, #888);
+              `;
+                            // Add Tab hint
+                            const hint = document.createElement("kbd");
+                            hint.textContent = "Tab";
+                            hint.style.cssText = `
+                margin-left: 8px;
+                font-size: 10px;
+                opacity: 0.3;
+                background: var(--muted, #f1f1f1);
+                padding: 1px 4px;
+                border-radius: 3px;
+                font-family: system-ui, sans-serif;
+              `;
+                            widget.appendChild(hint);
+                            decorations.push(Decoration.widget(from, widget, { side: 1 }));
+                        }
+                        return DecorationSet.create(state.doc, decorations);
+                    },
+                },
+            }),
+        ];
+    },
+});
+export default AISuggestion;

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

@@ -0,0 +1,2 @@
+export { AISuggestion, AISuggestionPluginKey } from "./AISuggestion";
+export type { AISuggestionOptions } from "./AISuggestion";

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

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

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

@@ -0,0 +1 @@
+export declare const CodeBlock: import("@tiptap/core").Node<import("@tiptap/extension-code-block-lowlight").CodeBlockLowlightOptions, any>;

package/dist/headless/extensions/CodeBlock/CodeBlock.js

@@ -0,0 +1,6 @@
+import { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
+import { all, createLowlight } from "lowlight";
+const lowlight = createLowlight(all);
+export const CodeBlock = CodeBlockLowlight.configure({
+    lowlight,
+});

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

@@ -0,0 +1 @@
+export * from "./CodeBlock";

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

@@ -0,0 +1 @@
+export * from "./CodeBlock";

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

@@ -0,0 +1,9 @@
+import type { Node } from "@tiptap/pm/model";
+import type { Editor } from "@tiptap/core";
+export interface DragHandleCallbacks {
+    onAddBlock?: (editor: Editor, node: Node | null) => void;
+    onGripClick?: (editor: Editor, node: Node | null, element: HTMLElement) => void;
+}
+export declare function setDragHandleCallbacks(callbacks: DragHandleCallbacks): void;
+export declare const DragHandle: import("@tiptap/core").Extension<import("@tiptap/extension-drag-handle").DragHandleOptions, any>;
+export default DragHandle;

package/dist/headless/extensions/DragHandle/DragHandle.js

@@ -0,0 +1,47 @@
+import BaseDragHandle from "@tiptap/extension-drag-handle";
+let currentCallbacks = {};
+let currentNode = null;
+let currentEditor = null;
+export function setDragHandleCallbacks(callbacks) {
+    currentCallbacks = callbacks;
+}
+function createDragHandleElement() {
+    const container = document.createElement("div");
+    container.className = "nph-drag-handle";
+    const plusBtn = document.createElement("button");
+    plusBtn.className = "nph-drag-handle__btn";
+    plusBtn.type = "button";
+    plusBtn.setAttribute("aria-label", "Add block");
+    plusBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>`;
+    plusBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (currentEditor) {
+            currentCallbacks.onAddBlock?.(currentEditor, currentNode);
+        }
+    });
+    const gripBtn = document.createElement("button");
+    gripBtn.className = "nph-drag-handle__btn nph-drag-handle__grip";
+    gripBtn.type = "button";
+    gripBtn.setAttribute("aria-label", "Drag to reorder");
+    gripBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>`;
+    gripBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (currentEditor) {
+            currentCallbacks.onGripClick?.(currentEditor, currentNode, container);
+        }
+    });
+    container.appendChild(plusBtn);
+    container.appendChild(gripBtn);
+    return container;
+}
+export const DragHandle = BaseDragHandle.configure({
+    render: createDragHandleElement,
+    nested: true,
+    onNodeChange: ({ node, editor }) => {
+        currentNode = node;
+        currentEditor = editor;
+    },
+});
+export default DragHandle;

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

@@ -0,0 +1,2 @@
+export { DragHandle, setDragHandleCallbacks } from "./DragHandle";
+export type { DragHandleCallbacks } from "./DragHandle";

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

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

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

@@ -0,0 +1,6 @@
+export interface ImageOptions {
+    uploadImage?: (file: File) => Promise<string>;
+    allowBase64?: boolean;
+}
+export declare const Image: import("@tiptap/core").Node<ImageOptions, any>;
+export default Image;

package/dist/headless/extensions/Image/Image.js

@@ -0,0 +1,197 @@
+import { Image as TiptapImage } from "@tiptap/extension-image";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+export const Image = TiptapImage.extend({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            uploadImage: undefined,
+            allowBase64: false,
+        };
+    },
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            src: {
+                default: null,
+            },
+            alt: {
+                default: null,
+            },
+            title: {
+                default: null,
+            },
+            width: {
+                default: null,
+                parseHTML: (element) => element.getAttribute("width"),
+                renderHTML: (attributes) => {
+                    if (!attributes.width) {
+                        return {};
+                    }
+                    return {
+                        width: attributes.width,
+                    };
+                },
+            },
+            height: {
+                default: null,
+                parseHTML: (element) => element.getAttribute("height"),
+                renderHTML: (attributes) => {
+                    if (!attributes.height) {
+                        return {};
+                    }
+                    return {
+                        height: attributes.height,
+                    };
+                },
+            },
+            align: {
+                default: null,
+                parseHTML: (element) => element.getAttribute("data-align"),
+                renderHTML: (attributes) => {
+                    if (!attributes.align) {
+                        return {};
+                    }
+                    return {
+                        "data-align": attributes.align,
+                    };
+                },
+            },
+        };
+    },
+    addCommands() {
+        return {
+            ...this.parent?.(),
+            setImage: (options) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options,
+                });
+            },
+            uploadImage: () => ({ editor }) => {
+                const input = document.createElement("input");
+                input.type = "file";
+                input.accept = "image/*";
+                input.onchange = async (e) => {
+                    const file = e.target.files?.[0];
+                    if (!file)
+                        return;
+                    // Check if uploadImage handler is provided
+                    if (this.options.uploadImage) {
+                        try {
+                            const url = await this.options.uploadImage(file);
+                            editor.chain().focus().setImage({ src: url }).run();
+                        }
+                        catch (error) {
+                            console.error("Failed to upload image:", error);
+                        }
+                    }
+                    else if (this.options.allowBase64) {
+                        // Fallback to base64 if no upload handler provided
+                        const reader = new FileReader();
+                        reader.onload = () => {
+                            const url = reader.result;
+                            editor.chain().focus().setImage({ src: url }).run();
+                        };
+                        reader.readAsDataURL(file);
+                    }
+                    else {
+                        console.warn("No upload handler provided. Please provide uploadImage option or enable allowBase64.");
+                    }
+                };
+                input.click();
+                return true;
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey("imageDrop"),
+                props: {
+                    handleDOMEvents: {
+                        drop: (view, event) => {
+                            const hasFiles = event.dataTransfer &&
+                                event.dataTransfer.files &&
+                                event.dataTransfer.files.length;
+                            if (!hasFiles) {
+                                return false;
+                            }
+                            const images = Array.from(event.dataTransfer.files).filter((file) => /image/i.test(file.type));
+                            if (images.length === 0) {
+                                return false;
+                            }
+                            event.preventDefault();
+                            const { schema } = view.state;
+                            const coordinates = view.posAtCoords({
+                                left: event.clientX,
+                                top: event.clientY,
+                            });
+                            if (!coordinates)
+                                return false;
+                            images.forEach(async (image) => {
+                                if (this.options.uploadImage) {
+                                    try {
+                                        const url = await this.options.uploadImage(image);
+                                        const node = schema.nodes.image.create({ src: url });
+                                        const transaction = view.state.tr.insert(coordinates.pos, node);
+                                        view.dispatch(transaction);
+                                    }
+                                    catch (error) {
+                                        console.error("Failed to upload image:", error);
+                                    }
+                                }
+                                else if (this.options.allowBase64) {
+                                    const reader = new FileReader();
+                                    reader.onload = (readerEvent) => {
+                                        const node = schema.nodes.image.create({
+                                            src: readerEvent.target?.result,
+                                        });
+                                        const transaction = view.state.tr.insert(coordinates.pos, node);
+                                        view.dispatch(transaction);
+                                    };
+                                    reader.readAsDataURL(image);
+                                }
+                            });
+                            return true;
+                        },
+                        paste: (view, event) => {
+                            const hasFiles = event.clipboardData &&
+                                event.clipboardData.files &&
+                                event.clipboardData.files.length;
+                            if (!hasFiles) {
+                                return false;
+                            }
+                            const images = Array.from(event.clipboardData.files).filter((file) => /image/i.test(file.type));
+                            if (images.length === 0) {
+                                return false;
+                            }
+                            event.preventDefault();
+                            images.forEach(async (image) => {
+                                if (this.options.uploadImage) {
+                                    try {
+                                        const url = await this.options.uploadImage(image);
+                                        view.dispatch(view.state.tr.replaceSelectionWith(view.state.schema.nodes.image.create({ src: url })));
+                                    }
+                                    catch (error) {
+                                        console.error("Failed to upload image:", error);
+                                    }
+                                }
+                                else if (this.options.allowBase64) {
+                                    const reader = new FileReader();
+                                    reader.onload = (readerEvent) => {
+                                        view.dispatch(view.state.tr.replaceSelectionWith(view.state.schema.nodes.image.create({
+                                            src: readerEvent.target?.result,
+                                        })));
+                                    };
+                                    reader.readAsDataURL(image);
+                                }
+                            });
+                            return true;
+                        },
+                    },
+                },
+            }),
+        ];
+    },
+});
+export default Image;

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

@@ -0,0 +1,23 @@
+import { Range } from "@tiptap/core";
+export interface ImageBlockOptions {
+    uploadImage?: (file: File) => Promise<string>;
+    browseAssets?: (onSelect: (url: string) => void) => void;
+    nodeView?: any;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        imageBlock: {
+            setImageBlock: (attributes: {
+                src: string;
+            }) => ReturnType;
+            setImageBlockAt: (attributes: {
+                src: string;
+                pos: number | Range;
+            }) => ReturnType;
+            setImageBlockAlign: (align: "left" | "center" | "right") => ReturnType;
+            setImageBlockWidth: (width: number) => ReturnType;
+        };
+    }
+}
+export declare const ImageBlock: import("@tiptap/core").Node<ImageBlockOptions, any>;
+export default ImageBlock;