neuphlo-editor 2.5.1 → 2.6.0

package/dist/headless/extensions/ImageBlock/ImageBlock.js

@@ -0,0 +1,242 @@
+import { mergeAttributes } from "@tiptap/core";
+import { Image as TiptapImage } from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+export const ImageBlock = TiptapImage.extend({
+    name: "imageBlock",
+    group: "block",
+    defining: true,
+    isolating: true,
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            inline: false,
+        };
+    },
+    addAttributes() {
+        return {
+            src: {
+                default: "",
+                parseHTML: (element) => element.getAttribute("src"),
+                renderHTML: (attributes) => ({
+                    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,
+                }),
+            },
+            alt: {
+                default: undefined,
+                parseHTML: (element) => element.getAttribute("alt"),
+                renderHTML: (attributes) => ({
+                    alt: attributes.alt,
+                }),
+            },
+            loading: {
+                default: false,
+                parseHTML: () => false,
+                renderHTML: () => ({}),
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'img[src]:not([src^="data:"])',
+                getAttrs: (element) => {
+                    const el = element;
+                    return {
+                        src: el.getAttribute("src"),
+                        alt: el.getAttribute("alt"),
+                        width: el.getAttribute("data-width") || "100%",
+                        align: el.getAttribute("data-align") || "center",
+                    };
+                },
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["img", mergeAttributes(HTMLAttributes)];
+    },
+    addCommands() {
+        return {
+            setImageBlock: (attrs) => ({ commands }) => {
+                return commands.insertContent({
+                    type: "imageBlock",
+                    attrs: { src: attrs.src },
+                });
+            },
+            setImageBlockAt: (attrs) => ({ commands }) => {
+                return commands.insertContentAt(attrs.pos, {
+                    type: "imageBlock",
+                    attrs: { src: attrs.src },
+                });
+            },
+            setImageBlockAlign: (align) => ({ commands }) => commands.updateAttributes("imageBlock", { align }),
+            setImageBlockWidth: (width) => ({ commands }) => commands.updateAttributes("imageBlock", {
+                width: `${Math.max(0, Math.min(100, width))}%`,
+            }),
+        };
+    },
+    addNodeView() {
+        if (this.options.nodeView) {
+            return ReactNodeViewRenderer(this.options.nodeView);
+        }
+        // If no custom node view is provided, we fall back to default behavior
+        // but avoid the circular dependency require()
+        return null;
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey("imageBlockDrop"),
+                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 {
+                                        // Insert placeholder first
+                                        const placeholderNode = schema.nodes.imageBlock.create({
+                                            src: "",
+                                            loading: true,
+                                        });
+                                        const placeholderTr = view.state.tr.insert(coordinates.pos, placeholderNode);
+                                        view.dispatch(placeholderTr);
+                                        // Upload and replace
+                                        const url = await this.options.uploadImage(image);
+                                        const node = schema.nodes.imageBlock.create({ src: url });
+                                        // Find and replace the placeholder
+                                        const currentState = view.state;
+                                        let foundPos = -1;
+                                        currentState.doc.descendants((node, pos) => {
+                                            if (node.type.name === "imageBlock" &&
+                                                node.attrs.loading) {
+                                                foundPos = pos;
+                                                return false;
+                                            }
+                                        });
+                                        if (foundPos !== -1) {
+                                            const transaction = view.state.tr.replaceWith(foundPos, foundPos + 1, node);
+                                            view.dispatch(transaction);
+                                        }
+                                    }
+                                    catch (error) {
+                                        console.error("Failed to upload image:", error);
+                                        // Remove placeholder on error
+                                        const currentState = view.state;
+                                        let foundPos = -1;
+                                        currentState.doc.descendants((node, pos) => {
+                                            if (node.type.name === "imageBlock" &&
+                                                node.attrs.loading) {
+                                                foundPos = pos;
+                                                return false;
+                                            }
+                                        });
+                                        if (foundPos !== -1) {
+                                            const transaction = view.state.tr.delete(foundPos, foundPos + 1);
+                                            view.dispatch(transaction);
+                                        }
+                                    }
+                                }
+                            });
+                            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 {
+                                        // Insert placeholder first
+                                        const placeholderNode = view.state.schema.nodes.imageBlock.create({
+                                            src: "",
+                                            loading: true,
+                                        });
+                                        view.dispatch(view.state.tr.replaceSelectionWith(placeholderNode));
+                                        // Upload and replace
+                                        const url = await this.options.uploadImage(image);
+                                        const node = view.state.schema.nodes.imageBlock.create({
+                                            src: url,
+                                        });
+                                        // Find and replace the placeholder
+                                        const currentState = view.state;
+                                        let foundPos = -1;
+                                        currentState.doc.descendants((node, pos) => {
+                                            if (node.type.name === "imageBlock" &&
+                                                node.attrs.loading) {
+                                                foundPos = pos;
+                                                return false;
+                                            }
+                                        });
+                                        if (foundPos !== -1) {
+                                            const transaction = view.state.tr.replaceWith(foundPos, foundPos + 1, node);
+                                            view.dispatch(transaction);
+                                        }
+                                    }
+                                    catch (error) {
+                                        console.error("Failed to upload image:", error);
+                                        // Remove placeholder on error
+                                        const currentState = view.state;
+                                        let foundPos = -1;
+                                        currentState.doc.descendants((node, pos) => {
+                                            if (node.type.name === "imageBlock" &&
+                                                node.attrs.loading) {
+                                                foundPos = pos;
+                                                return false;
+                                            }
+                                        });
+                                        if (foundPos !== -1) {
+                                            const transaction = view.state.tr.delete(foundPos, foundPos + 1);
+                                            view.dispatch(transaction);
+                                        }
+                                    }
+                                }
+                            });
+                            return true;
+                        },
+                    },
+                },
+            }),
+        ];
+    },
+});
+export default ImageBlock;

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

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

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

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

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

@@ -0,0 +1,2 @@
+export declare const Link: import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any>;
+export default Link;

package/dist/headless/extensions/Link/Link.js

@@ -0,0 +1,44 @@
+import { mergeAttributes } from "@tiptap/core";
+import TiptapLink from "@tiptap/extension-link";
+import { Plugin } from "@tiptap/pm/state";
+export const Link = TiptapLink.extend({
+    inclusive: false,
+    parseHTML() {
+        return [
+            {
+                tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "a",
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+                class: "link",
+            }),
+            0,
+        ];
+    },
+    addProseMirrorPlugins() {
+        const { editor } = this;
+        return [
+            ...(this.parent?.() || []),
+            new Plugin({
+                props: {
+                    handleKeyDown: (view, event) => {
+                        const { selection } = editor.state;
+                        if (event.key === "Escape" && selection.empty !== true) {
+                            editor.commands.focus(selection.to, { scrollIntoView: false });
+                        }
+                        return false;
+                    },
+                },
+            }),
+        ];
+    },
+}).configure({
+    openOnClick: false,
+    autolink: true,
+    enableClickSelection: true,
+});
+export default Link;

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { Extension } from "@tiptap/core";
+import { MarkdownSerializer } from "@tiptap/pm/markdown";
+export declare function markdownToHtml(input: string | null | undefined): string;
+export interface MarkdownStorage {
+    serializer: MarkdownSerializer | null;
+    getMarkdown: () => string;
+}
+export declare const Markdown: Extension<any, MarkdownStorage>;
+export default Markdown;

package/dist/headless/extensions/Markdown.js

@@ -0,0 +1,138 @@
+import { Extension } from "@tiptap/core";
+import { MarkdownSerializer } from "@tiptap/pm/markdown";
+import { DOMSerializer } from "@tiptap/pm/model";
+import MarkdownIt from "markdown-it";
+const markdownIt = new MarkdownIt({ html: true, linkify: false, breaks: false });
+export function markdownToHtml(input) {
+    if (!input)
+        return "";
+    return markdownIt.render(input);
+}
+function nodeToHtml(node, schema) {
+    if (typeof document === "undefined")
+        return "";
+    const dom = DOMSerializer.fromSchema(schema).serializeNode(node);
+    const container = document.createElement("div");
+    container.appendChild(dom);
+    return container.innerHTML;
+}
+const specificNodes = {
+    text: (state, node) => {
+        state.text(node.text ?? "");
+    },
+    paragraph: (state, node) => {
+        state.renderInline(node);
+        state.closeBlock(node);
+    },
+    heading: (state, node) => {
+        state.write(`${state.repeat("#", node.attrs.level)} `);
+        state.renderInline(node);
+        state.closeBlock(node);
+    },
+    blockquote: (state, node) => {
+        state.wrapBlock("> ", null, node, () => state.renderContent(node));
+    },
+    horizontalRule: (state, node) => {
+        state.write(node.attrs.markup || "---");
+        state.closeBlock(node);
+    },
+    bulletList: (state, node) => {
+        state.renderList(node, "  ", () => `${node.attrs.bullet || "-"} `);
+    },
+    orderedList: (state, node) => {
+        const start = node.attrs.start || 1;
+        const maxWidth = String(start + node.childCount - 1).length;
+        const space = state.repeat(" ", maxWidth + 2);
+        state.renderList(node, space, (index) => {
+            const label = String(start + index);
+            return `${state.repeat(" ", maxWidth - label.length)}${label}. `;
+        });
+    },
+    listItem: (state, node) => {
+        state.renderContent(node);
+    },
+    codeBlock: (state, node) => {
+        state.write(`\`\`\`${node.attrs.language || ""}\n`);
+        state.text(node.textContent, false);
+        state.ensureNewLine();
+        state.write("```");
+        state.closeBlock(node);
+    },
+    hardBreak: (state, node, parent, index) => {
+        for (let i = index + 1; i < parent.childCount; i += 1) {
+            if (parent.child(i).type !== node.type) {
+                state.write("\\\n");
+                return;
+            }
+        }
+    },
+};
+const inlineHtmlNodes = new Set(["mention", "reference"]);
+const specificMarks = {
+    bold: { open: "**", close: "**", mixable: true, expelEnclosingWhitespace: true },
+    italic: { open: "*", close: "*", mixable: true, expelEnclosingWhitespace: true },
+    strike: { open: "~~", close: "~~", mixable: true, expelEnclosingWhitespace: true },
+    underline: { open: "<u>", close: "</u>", mixable: true },
+    code: { open: "`", close: "`", escape: false },
+    link: {
+        open: "[",
+        close: (_state, mark) => {
+            const href = mark.attrs.href || "";
+            const title = mark.attrs.title ? ` "${mark.attrs.title}"` : "";
+            return `](${href}${title})`;
+        },
+    },
+};
+function buildSerializer(schema) {
+    const nodes = {};
+    for (const name of Object.keys(schema.nodes)) {
+        if (specificNodes[name]) {
+            nodes[name] = specificNodes[name];
+            continue;
+        }
+        const type = schema.nodes[name];
+        if (type.isText) {
+            nodes[name] = specificNodes.text;
+            continue;
+        }
+        if (type.isInline || inlineHtmlNodes.has(name)) {
+            nodes[name] = (state, node) => {
+                state.text(nodeToHtml(node, schema), false);
+            };
+            continue;
+        }
+        nodes[name] = (state, node) => {
+            state.write(nodeToHtml(node, schema));
+            state.closeBlock(node);
+        };
+    }
+    const marks = {};
+    for (const name of Object.keys(schema.marks)) {
+        marks[name] = specificMarks[name] || { open: "", close: "", mixable: true };
+    }
+    return new MarkdownSerializer(nodes, marks);
+}
+export const Markdown = Extension.create({
+    name: "markdown",
+    addStorage() {
+        return {
+            serializer: null,
+            getMarkdown: () => "",
+        };
+    },
+    onBeforeCreate() {
+        const storage = this.storage;
+        storage.serializer = buildSerializer(this.editor.schema);
+        storage.getMarkdown = () => {
+            try {
+                return storage.serializer.serialize(this.editor.state.doc, {
+                    tightLists: true,
+                });
+            }
+            catch {
+                return this.editor.getHTML();
+            }
+        };
+    },
+});
+export default Markdown;

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

@@ -0,0 +1,3 @@
+import { Extension } from "@tiptap/core";
+export declare const MarkdownPaste: Extension<any, any>;
+export default MarkdownPaste;

package/dist/headless/extensions/MarkdownPaste.js

@@ -0,0 +1,168 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { MarkdownParser, defaultMarkdownParser } from "@tiptap/pm/markdown";
+const markdownPastePluginKey = new PluginKey("markdownPaste");
+/**
+ * Heuristic: does the plain text look like it contains markdown syntax?
+ */
+function looksLikeMarkdown(text) {
+    const patterns = [
+        /^#{1,6}\s/m, // headings
+        /^\s*[-*+]\s/m, // unordered list
+        /^\s*\d+\.\s/m, // ordered list
+        /^\s*>\s/m, // blockquote
+        /\|.+\|/m, // table
+        /^```/m, // fenced code block
+        /\*\*.+\*\*/, // bold
+        /\*.+\*/, // italic
+        /~~.+~~/, // strikethrough
+        /`[^`]+`/, // inline code
+        /^\s*---\s*$/m, // horizontal rule
+        /^\s*\*\*\*\s*$/m, // horizontal rule alt
+        /\[.+\]\(.+\)/, // links
+        /!\[.*\]\(.+\)/, // images
+    ];
+    // Need at least one markdown pattern match and it shouldn't be HTML
+    const hasMarkdown = patterns.some((p) => p.test(text));
+    const isHtml = /^<[a-z][\s\S]*>/i.test(text.trim());
+    return hasMarkdown && !isHtml;
+}
+/**
+ * Build a MarkdownParser configured for TipTap's schema node/mark names.
+ * Re-uses the markdown-it tokenizer from prosemirror-markdown's default parser.
+ */
+function buildParser(schema) {
+    // Grab the markdown-it tokenizer instance from prosemirror-markdown's default parser
+    const md = defaultMarkdownParser.tokenizer;
+    const tokens = {};
+    // Block nodes
+    if (schema.nodes.paragraph)
+        tokens.paragraph = { block: "paragraph" };
+    if (schema.nodes.heading) {
+        tokens.heading = {
+            block: "heading",
+            getAttrs: (tok) => ({ level: Number(tok.tag.slice(1)) }),
+        };
+    }
+    if (schema.nodes.blockquote)
+        tokens.blockquote = { block: "blockquote" };
+    if (schema.nodes.bulletList)
+        tokens.bullet_list = { block: "bulletList" };
+    if (schema.nodes.orderedList) {
+        tokens.ordered_list = {
+            block: "orderedList",
+            getAttrs: (tok) => ({ start: Number(tok.attrGet("start") || 1) }),
+        };
+    }
+    if (schema.nodes.listItem)
+        tokens.list_item = { block: "listItem" };
+    if (schema.nodes.codeBlock) {
+        tokens.code_block = { block: "codeBlock", noCloseToken: true };
+        tokens.fence = {
+            block: "codeBlock",
+            getAttrs: (tok) => ({ language: tok.info || "" }),
+            noCloseToken: true,
+        };
+    }
+    if (schema.nodes.horizontalRule) {
+        tokens.hr = { node: "horizontalRule" };
+    }
+    if (schema.nodes.hardBreak) {
+        tokens.hardbreak = { node: "hardBreak" };
+    }
+    if (schema.nodes.image) {
+        tokens.image = {
+            node: "image",
+            getAttrs: (tok) => ({
+                src: tok.attrGet("src"),
+                title: tok.attrGet("title") || null,
+                alt: tok.children?.[0]?.content || null,
+            }),
+        };
+    }
+    // Table support — markdown-it needs the table plugin enabled
+    if (schema.nodes.table) {
+        tokens.table = { block: "table" };
+        tokens.thead = { ignore: true };
+        tokens.tbody = { ignore: true };
+        tokens.tr = { block: "tableRow" };
+        tokens.th = { block: "tableHeader" };
+        tokens.td = { block: "tableCell" };
+    }
+    // Marks
+    if (schema.marks.bold || schema.marks.strong) {
+        tokens.strong = { mark: schema.marks.bold ? "bold" : "strong" };
+    }
+    if (schema.marks.italic || schema.marks.em) {
+        tokens.em = { mark: schema.marks.italic ? "italic" : "em" };
+    }
+    if (schema.marks.code) {
+        tokens.code_inline = { mark: "code", noCloseToken: true };
+    }
+    if (schema.marks.link) {
+        tokens.link = {
+            mark: "link",
+            getAttrs: (tok) => ({
+                href: tok.attrGet("href"),
+                title: tok.attrGet("title") || null,
+            }),
+        };
+    }
+    if (schema.marks.strike || schema.marks.strikethrough) {
+        tokens.s = { mark: schema.marks.strike ? "strike" : "strikethrough" };
+    }
+    try {
+        return new MarkdownParser(schema, md, tokens);
+    }
+    catch {
+        return null;
+    }
+}
+export const MarkdownPaste = Extension.create({
+    name: "markdownPaste",
+    addProseMirrorPlugins() {
+        const schema = this.editor.schema;
+        let parser = null;
+        return [
+            new Plugin({
+                key: markdownPastePluginKey,
+                props: {
+                    handlePaste(view, event) {
+                        const clipboardData = event.clipboardData;
+                        if (!clipboardData)
+                            return false;
+                        // If there's HTML content, let ProseMirror handle it normally
+                        // (the browser/OS already converted rich content)
+                        const html = clipboardData.getData("text/html");
+                        if (html && html.trim().length > 0)
+                            return false;
+                        const text = clipboardData.getData("text/plain");
+                        if (!text || !looksLikeMarkdown(text))
+                            return false;
+                        // Lazily build parser on first use
+                        if (!parser) {
+                            parser = buildParser(schema);
+                        }
+                        if (!parser)
+                            return false;
+                        try {
+                            const doc = parser.parse(text);
+                            if (!doc || doc.content.size === 0)
+                                return false;
+                            const { tr } = view.state;
+                            const slice = doc.slice(0, doc.content.size);
+                            tr.replaceSelection(slice);
+                            view.dispatch(tr);
+                            return true;
+                        }
+                        catch {
+                            // Fall back to default paste behavior
+                            return false;
+                        }
+                    },
+                },
+            }),
+        ];
+    },
+});
+export default MarkdownPaste;

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

@@ -0,0 +1,4 @@
+export { createMentionExtension, renderMentionSuggestion } from "./mention";
+export { MentionCommand } from "./mention-command";
+export { MentionNodeView } from "./mention-node-view";
+export type { MentionItem, MentionOptions } from "./mention";

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

@@ -0,0 +1,3 @@
+export { createMentionExtension, renderMentionSuggestion } from "./mention";
+export { MentionCommand } from "./mention-command";
+export { MentionNodeView } from "./mention-node-view";

package/dist/headless/extensions/Mention/mention-command.d.ts

@@ -0,0 +1,8 @@
+import type { MentionItem } from "./mention";
+interface MentionCommandProps {
+    items: MentionItem[];
+    command: (item: MentionItem) => void;
+    query: string;
+}
+export declare const MentionCommand: import("react").ForwardRefExoticComponent<MentionCommandProps & import("react").RefAttributes<any>>;
+export {};