neuphlo-editor 2.5.0 → 2.6.0

package/dist/highlight.css

@@ -1,3 +1,79 @@
-/* Optional: include a default highlight.js theme for code token colors */
 @import "highlight.js/styles/github.css";
 
+.dark .hljs {
+	color: #c9d1d9;
+	background: transparent;
+}
+.dark .hljs-doctag,
+.dark .hljs-keyword,
+.dark .hljs-meta .hljs-keyword,
+.dark .hljs-template-tag,
+.dark .hljs-template-variable,
+.dark .hljs-type,
+.dark .hljs-variable.language_ {
+	color: #ff7b72;
+}
+.dark .hljs-title,
+.dark .hljs-title.class_,
+.dark .hljs-title.class_.inherited__,
+.dark .hljs-title.function_ {
+	color: #d2a8ff;
+}
+.dark .hljs-attr,
+.dark .hljs-attribute,
+.dark .hljs-literal,
+.dark .hljs-meta,
+.dark .hljs-number,
+.dark .hljs-operator,
+.dark .hljs-variable,
+.dark .hljs-selector-attr,
+.dark .hljs-selector-class,
+.dark .hljs-selector-id {
+	color: #79c0ff;
+}
+.dark .hljs-regexp,
+.dark .hljs-string,
+.dark .hljs-meta .hljs-string {
+	color: #a5d6ff;
+}
+.dark .hljs-built_in,
+.dark .hljs-symbol {
+	color: #ffa657;
+}
+.dark .hljs-comment,
+.dark .hljs-code,
+.dark .hljs-formula {
+	color: #8b949e;
+}
+.dark .hljs-name,
+.dark .hljs-quote,
+.dark .hljs-selector-tag,
+.dark .hljs-selector-pseudo {
+	color: #7ee787;
+}
+.dark .hljs-subst {
+	color: #c9d1d9;
+}
+.dark .hljs-section {
+	color: #1f6feb;
+	font-weight: bold;
+}
+.dark .hljs-bullet {
+	color: #f2cc60;
+}
+.dark .hljs-emphasis {
+	color: #c9d1d9;
+	font-style: italic;
+}
+.dark .hljs-strong {
+	color: #c9d1d9;
+	font-weight: bold;
+}
+.dark .hljs-addition {
+	color: #aff5b4;
+	background-color: #033a16;
+}
+.dark .hljs-deletion {
+	color: #ffdcd7;
+	background-color: #67060c;
+}

package/dist/react/Editor.d.ts

@@ -0,0 +1,43 @@
+import { type EditorContentProps } from "../headless";
+import type { MentionOptions } from "../headless/extensions";
+import { type TaskItemCheckboxComponent } from "./menus/TaskItem/TaskItemView";
+import type { ReactNode } from "react";
+import type { Editor as TiptapEditor } from "@tiptap/react";
+export type BubbleMenuExtraRenderer = (editor: TiptapEditor) => ReactNode;
+export type BubbleMenuExtra = BubbleMenuExtraRenderer | {
+    render: BubbleMenuExtraRenderer;
+    align?: "start" | "end";
+};
+export type BubbleMenuExtras = Partial<{
+    text: BubbleMenuExtra | BubbleMenuExtra[];
+    image: BubbleMenuExtra | BubbleMenuExtra[];
+}>;
+export type NeuphloEditorProps = {
+    content?: string;
+    markdown?: boolean;
+    className?: string;
+    editable?: boolean;
+    immediatelyRender?: boolean;
+    showTextMenu?: boolean;
+    showSlashMenu?: boolean;
+    showImageMenu?: boolean;
+    showDragHandle?: boolean;
+    extensions?: any[];
+    bubbleMenuExtras?: BubbleMenuExtras;
+    onUpdate?: EditorContentProps["onUpdate"];
+    onCreate?: EditorContentProps["onCreate"];
+    uploadImage?: (file: File) => Promise<string>;
+    browseAssets?: (onSelect: (url: string) => void) => void;
+    collaboration?: {
+        doc: any;
+        field: string;
+        awareness?: any;
+    };
+    mentionOptions?: MentionOptions;
+    referenceOptions?: MentionOptions;
+    slashCommand?: boolean;
+    placeholder?: string;
+    taskItemView?: any;
+    checkboxComponent?: TaskItemCheckboxComponent;
+};
+export declare function Editor({ content, markdown, className, editable, immediatelyRender, showTextMenu, showSlashMenu, showImageMenu, showDragHandle, extensions, bubbleMenuExtras, onUpdate, onCreate, uploadImage, browseAssets, collaboration, mentionOptions, referenceOptions, slashCommand, placeholder, taskItemView, checkboxComponent, }: NeuphloEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/Editor.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EditorRoot, EditorContent, handleCommandNavigation, } from "../headless";
+import ExtensionKit from "../headless/extensions/extension-kit";
+import { markdownToHtml } from "../headless/extensions";
+import { SlashMenu, TextMenu } from "./menus";
+import { ImageMenu } from "./menus/ImageMenu";
+import { LinkMenu } from "./menus/LinkMenu";
+import { ImageBlockView } from "./menus/ImageBlock/ImageBlockView";
+import { VideoBlockView } from "./menus/VideoBlock/VideoBlockView";
+import { createTaskItemView, } from "./menus/TaskItem/TaskItemView";
+import { useMemo, useState, useCallback, useRef, useEffect } from "react";
+import { BlockActionMenu } from "./menus/DragHandle/BlockActionMenu";
+import { TableMenu } from "./menus/TableMenu";
+export function Editor({ content, markdown = false, className, editable = true, immediatelyRender = false, showTextMenu = true, showSlashMenu = true, showImageMenu = false, showDragHandle = true, extensions, bubbleMenuExtras, onUpdate, onCreate, uploadImage, browseAssets, collaboration, mentionOptions, referenceOptions, slashCommand, placeholder, taskItemView, checkboxComponent, }) {
+    const resolvedTaskItemView = useMemo(() => {
+        if (taskItemView)
+            return taskItemView;
+        if (checkboxComponent)
+            return createTaskItemView(checkboxComponent);
+        return undefined;
+    }, [taskItemView, checkboxComponent]);
+    const resolvedContent = useMemo(() => {
+        if (markdown && typeof content === "string")
+            return markdownToHtml(content);
+        return content;
+    }, [markdown, content]);
+    const [actionMenuAnchor, setActionMenuAnchor] = useState(null);
+    const [actionMenuEditor, setActionMenuEditor] = useState(null);
+    const actionMenuRef = useRef(null);
+    // Close action menu on click outside
+    useEffect(() => {
+        if (!actionMenuAnchor)
+            return;
+        const handlePointerDown = (e) => {
+            if (actionMenuRef.current && !actionMenuRef.current.contains(e.target)) {
+                setActionMenuAnchor(null);
+            }
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, [actionMenuAnchor]);
+    const dragHandleCallbacks = useMemo(() => ({
+        onAddBlock: (editor) => {
+            const { state } = editor;
+            const { selection } = state;
+            const { $anchor } = selection;
+            // Find the top-level block node (depth 1) and insert after it
+            const topDepth = Math.min($anchor.depth, 1);
+            const endOfBlock = $anchor.end(topDepth);
+            const insertPos = endOfBlock + 1;
+            editor
+                .chain()
+                .focus()
+                .insertContentAt(insertPos, { type: "paragraph" })
+                .focus(insertPos + 1)
+                .run();
+            // Insert "/" to trigger slash command menu after the new paragraph is focused
+            requestAnimationFrame(() => {
+                editor.commands.insertContent("/");
+            });
+        },
+        onGripClick: (editor, _node, element) => {
+            setActionMenuEditor(editor);
+            setActionMenuAnchor((prev) => (prev === element ? null : element));
+        },
+    }), []);
+    const enableDragHandle = showDragHandle && editable;
+    const normalizeExtras = (extras) => {
+        const result = {
+            start: [],
+            end: [],
+        };
+        if (!extras)
+            return result;
+        const list = Array.isArray(extras) ? extras : [extras];
+        list.forEach((item) => {
+            const config = typeof item === "function"
+                ? { render: item, align: "end" }
+                : item;
+            const slot = config.align === "start" ? "start" : "end";
+            result[slot].push(config.render);
+        });
+        return result;
+    };
+    const textExtras = normalizeExtras(bubbleMenuExtras?.text);
+    const imageExtras = normalizeExtras(bubbleMenuExtras?.image);
+    const handleCloseActionMenu = useCallback(() => {
+        setActionMenuAnchor(null);
+    }, []);
+    return (_jsxs("div", { className: className, children: [_jsx(EditorRoot, { children: _jsxs(EditorContent, { onUpdate: onUpdate, onCreate: onCreate, immediatelyRender: immediatelyRender, editable: editable, content: resolvedContent, extensions: [
+                        ...ExtensionKit({
+                            uploadImage: uploadImage,
+                            browseAssets: browseAssets,
+                            collaboration: collaboration,
+                            imageBlockView: ImageBlockView,
+                            videoBlockView: VideoBlockView,
+                            taskItemView: resolvedTaskItemView,
+                            mention: mentionOptions,
+                            reference: referenceOptions,
+                            slashCommand: slashCommand,
+                            dragHandle: enableDragHandle,
+                            dragHandleCallbacks: enableDragHandle ? dragHandleCallbacks : undefined,
+                            placeholder: placeholder,
+                        }),
+                        ...(extensions ?? []),
+                    ], editorProps: {
+                        attributes: {
+                            class: "nph-editor max-w-none outline-none",
+                        },
+                        handleKeyDown: (view, event) => {
+                            return !!handleCommandNavigation?.(event);
+                        },
+                    }, children: [showTextMenu ? (_jsx(TextMenu, { leadingExtras: textExtras.start, trailingExtras: textExtras.end })) : null, showImageMenu ? (_jsx(ImageMenu, { leadingExtras: imageExtras.start, trailingExtras: imageExtras.end })) : null, _jsx(LinkMenu, {}), _jsx(TableMenu, {}), showSlashMenu ? _jsx(SlashMenu, {}) : null] }) }), actionMenuAnchor && actionMenuEditor && (_jsx("div", { ref: actionMenuRef, style: {
+                    position: "fixed",
+                    zIndex: 10000,
+                    top: actionMenuAnchor.getBoundingClientRect().bottom + 4,
+                    left: actionMenuAnchor.getBoundingClientRect().left,
+                }, children: _jsx(BlockActionMenu, { editor: actionMenuEditor, onClose: handleCloseActionMenu }) }))] }));
+}

package/dist/react/TableOfContents.d.ts

@@ -0,0 +1,7 @@
+export type TableOfContentsProps = {
+    className?: string;
+    itemClassName?: string;
+    activeClassName?: string;
+};
+export declare function TableOfContents({ className, itemClassName, activeClassName, }: TableOfContentsProps): import("react/jsx-runtime").JSX.Element | null;
+export default TableOfContents;

package/dist/react/TableOfContents.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCurrentEditor, useEditorState } from "@tiptap/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+export function TableOfContents({ className, itemClassName, activeClassName, }) {
+    const { editor } = useCurrentEditor();
+    const [activeId, setActiveId] = useState(null);
+    const observerRef = useRef(null);
+    const headings = useEditorState({
+        editor,
+        selector: (ctx) => {
+            if (!ctx.editor)
+                return [];
+            const items = [];
+            ctx.editor.state.doc.descendants((node, pos) => {
+                if (node.type.name === "heading") {
+                    const id = `heading-${pos}`;
+                    items.push({
+                        id,
+                        level: node.attrs.level,
+                        text: node.textContent,
+                        pos,
+                    });
+                }
+            });
+            return items;
+        },
+    });
+    // Set up IntersectionObserver to track which heading is in view
+    useEffect(() => {
+        if (!editor || !headings || headings.length === 0)
+            return;
+        // Clean up old observer
+        observerRef.current?.disconnect();
+        const callback = (entries) => {
+            // Find the first visible heading
+            const visibleEntries = entries.filter((e) => e.isIntersecting);
+            if (visibleEntries.length > 0) {
+                const firstVisible = visibleEntries[0];
+                const id = firstVisible.target.getAttribute("data-toc-id");
+                if (id)
+                    setActiveId(id);
+            }
+        };
+        const observer = new IntersectionObserver(callback, {
+            rootMargin: "-80px 0px -70% 0px",
+            threshold: 0,
+        });
+        observerRef.current = observer;
+        // Observe heading DOM elements
+        const editorEl = editor.view.dom;
+        headings.forEach((heading) => {
+            // Find heading element by position
+            try {
+                const domNode = editor.view.nodeDOM(heading.pos);
+                if (domNode && domNode instanceof HTMLElement) {
+                    domNode.setAttribute("data-toc-id", heading.id);
+                    observer.observe(domNode);
+                }
+            }
+            catch {
+                // Position may be invalid after edits
+            }
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [editor, headings]);
+    const handleClick = useCallback((pos) => {
+        if (!editor)
+            return;
+        editor.chain().focus().setTextSelection(pos + 1).run();
+        // Scroll into view
+        try {
+            const domNode = editor.view.nodeDOM(pos);
+            if (domNode && domNode instanceof HTMLElement) {
+                domNode.scrollIntoView({ behavior: "smooth", block: "start" });
+            }
+        }
+        catch {
+            // Ignore if DOM node not found
+        }
+    }, [editor]);
+    if (!editor || !headings || headings.length === 0)
+        return null;
+    return (_jsx("nav", { className: className ?? "nph-toc", children: headings.map((heading) => {
+            const isActive = activeId === heading.id;
+            const itemClass = [
+                itemClassName ?? "nph-toc__item",
+                isActive ? (activeClassName ?? "nph-toc__item--active") : "",
+            ]
+                .filter(Boolean)
+                .join(" ");
+            return (_jsx("button", { type: "button", className: itemClass, style: { paddingLeft: `${(heading.level - 1) * 12 + 8}px` }, onClick: () => handleClick(heading.pos), title: heading.text, children: heading.text || `Heading ${heading.level}` }, heading.id));
+        }) }));
+}
+export default TableOfContents;

package/dist/react/index.cjs

@@ -32,8 +32,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var react_exports = {};
 __export(react_exports, {
   Editor: () => Editor5,
+  Markdown: () => Markdown,
   TableOfContents: () => TableOfContents,
-  TextMenu: () => TextMenu
+  TextMenu: () => TextMenu,
+  markdownToHtml: () => markdownToHtml
 });
 module.exports = __toCommonJS(react_exports);
 
@@ -1288,10 +1290,147 @@ var MarkdownPaste = import_core3.Extension.create({
   }
 });
 
+// src/headless/extensions/Markdown.ts
+var import_core4 = require("@tiptap/core");
+var import_markdown2 = require("@tiptap/pm/markdown");
+var import_model = require("@tiptap/pm/model");
+var import_markdown_it = __toESM(require("markdown-it"), 1);
+var markdownIt = new import_markdown_it.default({ html: true, linkify: false, breaks: false });
+function markdownToHtml(input) {
+  if (!input) return "";
+  return markdownIt.render(input);
+}
+function nodeToHtml(node, schema) {
+  if (typeof document === "undefined") return "";
+  const dom = import_model.DOMSerializer.fromSchema(schema).serializeNode(node);
+  const container = document.createElement("div");
+  container.appendChild(dom);
+  return container.innerHTML;
+}
+var 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 || ""}
+`);
+    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;
+      }
+    }
+  }
+};
+var inlineHtmlNodes = /* @__PURE__ */ new Set(["mention", "reference"]);
+var 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 import_markdown2.MarkdownSerializer(nodes, marks);
+}
+var Markdown = import_core4.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();
+      }
+    };
+  }
+});
+
 // src/headless/extensions/slash-command.tsx
 var import_suggestion = __toESM(require("@tiptap/suggestion"), 1);
-var import_core4 = require("@tiptap/core");
-var Command = import_core4.Extension.create({
+var import_core5 = require("@tiptap/core");
+var Command = import_core5.Extension.create({
   name: "slash-command",
   addOptions() {
     return {
@@ -1388,9 +1527,9 @@ var import_extension_list = require("@tiptap/extension-list");
 var import_react12 = require("@tiptap/react");
 
 // src/headless/extensions/VideoBlock/VideoBlock.ts
-var import_core5 = require("@tiptap/core");
+var import_core6 = require("@tiptap/core");
 var import_react11 = require("@tiptap/react");
-var VideoBlock = import_core5.Node.create({
+var VideoBlock = import_core6.Node.create({
   name: "videoBlock",
   group: "block",
   defining: true,
@@ -1436,7 +1575,7 @@ var VideoBlock = import_core5.Node.create({
   renderHTML({ HTMLAttributes }) {
     return [
       "div",
-      (0, import_core5.mergeAttributes)(HTMLAttributes, { "data-type": "video-block" })
+      (0, import_core6.mergeAttributes)(HTMLAttributes, { "data-type": "video-block" })
     ];
   },
   addCommands() {
@@ -1506,7 +1645,8 @@ var ExtensionKit = (options) => {
       },
       includeChildren: true
     }),
-    MarkdownPaste
+    MarkdownPaste,
+    Markdown
   ];
   if (options?.table !== false) {
     extensions.push(
@@ -4076,6 +4216,7 @@ var import_react37 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function Editor5({
   content,
+  markdown = false,
   className,
   editable = true,
   immediatelyRender = false,
@@ -4102,6 +4243,10 @@ function Editor5({
     if (checkboxComponent) return createTaskItemView(checkboxComponent);
     return void 0;
   }, [taskItemView, checkboxComponent]);
+  const resolvedContent = (0, import_react37.useMemo)(() => {
+    if (markdown && typeof content === "string") return markdownToHtml(content);
+    return content;
+  }, [markdown, content]);
   const [actionMenuAnchor, setActionMenuAnchor] = (0, import_react37.useState)(null);
   const [actionMenuEditor, setActionMenuEditor] = (0, import_react37.useState)(null);
   const actionMenuRef = (0, import_react37.useRef)(null);
@@ -4164,7 +4309,7 @@ function Editor5({
         onCreate,
         immediatelyRender,
         editable,
-        content,
+        content: resolvedContent,
         extensions: [
           ...extension_kit_default({
             uploadImage,
@@ -4333,7 +4478,9 @@ function TableOfContents({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Editor,
+  Markdown,
   TableOfContents,
-  TextMenu
+  TextMenu,
+  markdownToHtml
 });
 //# sourceMappingURL=index.cjs.map