neuphlo-editor 1.8.2 → 2.0.0

package/dist/react/index.cjs

@@ -31,13 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/react/index.ts
 var react_exports = {};
 __export(react_exports, {
-  Editor: () => Editor3,
+  Editor: () => Editor5,
+  TableOfContents: () => TableOfContents,
   TextMenu: () => TextMenu
 });
 module.exports = __toCommonJS(react_exports);
 
 // src/headless/index.ts
-var import_react11 = require("@tiptap/react");
+var import_react10 = require("@tiptap/react");
 
 // src/headless/components/editor.tsx
 var import_react = require("@tiptap/react");
@@ -69,109 +70,177 @@ EditorContent.displayName = "EditorContent";
 // src/headless/components/editor-command.tsx
 var import_jotai4 = require("jotai");
 var import_react3 = require("react");
-var import_cmdk = require("cmdk");
+var import_react_dom = require("react-dom");
 
 // src/headless/utils/atoms.ts
 var import_jotai3 = require("jotai");
 var queryAtom = (0, import_jotai3.atom)("");
 var rangeAtom = (0, import_jotai3.atom)(null);
+var slashMenuOpenAtom = (0, import_jotai3.atom)(false);
+var slashMenuRectAtom = (0, import_jotai3.atom)(null);
 
 // src/headless/components/editor-command.tsx
-var import_tunnel_rat = __toESM(require("tunnel-rat"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var commandTunnel = (0, import_tunnel_rat.default)();
-var EditorCommandOut = ({
-  query,
-  range
-}) => {
-  const setQuery = (0, import_jotai4.useSetAtom)(queryAtom, { store: novelStore });
-  const setRange = (0, import_jotai4.useSetAtom)(rangeAtom, { store: novelStore });
-  (0, import_react3.useEffect)(() => {
-    setQuery(query);
-  }, [query, setQuery]);
-  (0, import_react3.useEffect)(() => {
-    setRange(range);
-  }, [range, setRange]);
-  (0, import_react3.useEffect)(() => {
-    const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
-    const onKeyDown = (e) => {
-      if (navigationKeys.includes(e.key)) {
-        e.preventDefault();
-        const commandRef = document.querySelector("#slash-command");
-        if (commandRef)
-          commandRef.dispatchEvent(
-            new KeyboardEvent("keydown", {
-              key: e.key,
-              cancelable: true,
-              bubbles: true
-            })
-          );
-        return false;
-      }
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(commandTunnel.Out, {});
-};
-var CommandAny = import_cmdk.Command;
 var EditorCommand = (0, import_react3.forwardRef)(
   ({ children, className, ...rest }, ref) => {
-    const [query, setQuery] = (0, import_jotai4.useAtom)(queryAtom);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(commandTunnel.In, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      CommandAny,
-      {
-        ref,
-        onKeyDown: (e) => {
-          e.stopPropagation();
-        },
-        id: "slash-command",
-        className,
-        ...rest,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            CommandAny.Input,
-            {
-              value: query,
-              onValueChange: setQuery,
-              style: { display: "none" }
-            }
-          ),
-          children
-        ]
+    const isOpen = (0, import_jotai4.useAtomValue)(slashMenuOpenAtom, { store: novelStore });
+    const rect = (0, import_jotai4.useAtomValue)(slashMenuRectAtom, { store: novelStore });
+    const containerRef = (0, import_react3.useRef)(null);
+    const [activeIndex, setActiveIndex] = (0, import_react3.useState)(0);
+    const contentRef = (0, import_react3.useRef)(null);
+    const query = (0, import_jotai4.useAtomValue)(queryAtom, { store: novelStore });
+    (0, import_react3.useEffect)(() => {
+      setActiveIndex(0);
+    }, [query]);
+    if (typeof document !== "undefined" && !containerRef.current) {
+      const el = document.createElement("div");
+      el.style.position = "fixed";
+      el.style.zIndex = "9999";
+      el.style.minWidth = "240px";
+      el.style.display = "none";
+      containerRef.current = el;
+    }
+    (0, import_react3.useEffect)(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      document.body.appendChild(el);
+      return () => {
+        el.remove();
+      };
+    }, []);
+    (0, import_react3.useLayoutEffect)(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      if (!isOpen || !rect) {
+        container.style.display = "none";
+        return;
+      }
+      container.style.display = "";
+      const menuHeight = container.offsetHeight || 360;
+      const viewportHeight = window.innerHeight;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      let top;
+      if (spaceBelow < menuHeight + 16 && spaceAbove > spaceBelow) {
+        top = Math.round(rect.top - menuHeight - 8);
+        if (top < 8) top = 8;
+      } else {
+        top = Math.round(rect.bottom + 8);
       }
-    ) });
+      let left = Math.round(rect.left);
+      const menuWidth = container.offsetWidth || 280;
+      if (left + menuWidth > window.innerWidth - 8) {
+        left = window.innerWidth - menuWidth - 8;
+      }
+      if (left < 8) left = 8;
+      container.style.top = `${top}px`;
+      container.style.left = `${left}px`;
+    }, [isOpen, rect]);
+    const handleKeyDown = (0, import_react3.useCallback)(
+      (e) => {
+        if (!isOpen || !contentRef.current) return;
+        const items = contentRef.current.querySelectorAll("[role='option']");
+        if (items.length === 0) return;
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            const next = Math.min(prev + 1, items.length - 1);
+            items[next]?.scrollIntoView({ block: "nearest" });
+            return next;
+          });
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            const next = Math.max(prev - 1, 0);
+            items[next]?.scrollIntoView({ block: "nearest" });
+            return next;
+          });
+        } else if (e.key === "Enter") {
+          e.preventDefault();
+          const activeItem = items[activeIndex];
+          activeItem?.click();
+        }
+      },
+      [isOpen, activeIndex]
+    );
+    (0, import_react3.useEffect)(() => {
+      if (!isOpen) return;
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, handleKeyDown]);
+    (0, import_react3.useEffect)(() => {
+      if (!contentRef.current) return;
+      const items = contentRef.current.querySelectorAll("[role='option']");
+      items.forEach((item, i) => {
+        if (i === activeIndex) {
+          item.setAttribute("aria-selected", "true");
+        } else {
+          item.removeAttribute("aria-selected");
+        }
+      });
+    });
+    if (!isOpen || !containerRef.current) return null;
+    return (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          ref: (el) => {
+            contentRef.current = el;
+            if (typeof ref === "function") ref(el);
+            else if (ref) ref.current = el;
+          },
+          id: "slash-command",
+          className,
+          ...rest,
+          children
+        }
+      ),
+      containerRef.current
+    );
+  }
+);
+var EditorCommandList = (0, import_react3.forwardRef)(
+  ({ children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, role: "listbox", ...rest, children });
   }
 );
-var EditorCommandList = import_cmdk.Command.List;
 EditorCommand.displayName = "EditorCommand";
+EditorCommandList.displayName = "EditorCommandList";
 
 // src/headless/components/editor-command-item.tsx
 var import_react4 = require("react");
-var import_cmdk2 = require("cmdk");
 var import_react5 = require("@tiptap/react");
 var import_jotai5 = require("jotai");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var CommandItemAny = import_cmdk2.CommandItem;
-var CommandEmptyAny = import_cmdk2.CommandEmpty;
-var EditorCommandItem = (0, import_react4.forwardRef)(({ children, onCommand, ...rest }, ref) => {
+var EditorCommandItem = (0, import_react4.forwardRef)(({ children, onCommand, value, className, ...rest }, ref) => {
   const { editor } = (0, import_react5.useCurrentEditor)();
-  const range = (0, import_jotai5.useAtomValue)(rangeAtom);
+  const range = (0, import_jotai5.useAtomValue)(rangeAtom, { store: novelStore });
+  const query = (0, import_jotai5.useAtomValue)(queryAtom, { store: novelStore });
   if (!editor || !range) return null;
+  if (query && value) {
+    const searchText = value.toLowerCase();
+    const q = query.toLowerCase();
+    if (!searchText.includes(q)) return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    CommandItemAny,
+    "div",
     {
       ref,
+      role: "option",
+      className,
+      onClick: () => onCommand({ editor, range }),
       ...rest,
-      onSelect: () => onCommand({ editor, range }),
       children
     }
   );
 });
 EditorCommandItem.displayName = "EditorCommandItem";
-var EditorCommandEmpty = CommandEmptyAny;
+var EditorCommandEmpty = (0, import_react4.forwardRef)(
+  ({ children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, ...rest, children });
+  }
+);
+EditorCommandEmpty.displayName = "EditorCommandEmpty";
 
 // src/headless/extensions/index.ts
 var import_starter_kit = require("@tiptap/starter-kit");
@@ -919,11 +988,218 @@ var renderMentionSuggestion = () => {
   };
 };
 
+// src/headless/extensions/DragHandle/DragHandle.ts
+var import_extension_drag_handle = __toESM(require("@tiptap/extension-drag-handle"), 1);
+var currentCallbacks = {};
+var currentNode = null;
+var currentEditor = null;
+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;
+}
+var DragHandle = import_extension_drag_handle.default.configure({
+  render: createDragHandleElement,
+  nested: true,
+  onNodeChange: ({ node, editor }) => {
+    currentNode = node;
+    currentEditor = editor;
+  }
+});
+
+// src/headless/extensions/Table/index.ts
+var import_extension_table = require("@tiptap/extension-table");
+var import_extension_table2 = require("@tiptap/extension-table");
+
+// src/headless/extensions/MarkdownPaste.ts
+var import_core3 = require("@tiptap/core");
+var import_state3 = require("@tiptap/pm/state");
+var import_markdown = require("@tiptap/pm/markdown");
+var markdownPastePluginKey = new import_state3.PluginKey("markdownPaste");
+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
+  ];
+  const hasMarkdown = patterns.some((p) => p.test(text));
+  const isHtml = /^<[a-z][\s\S]*>/i.test(text.trim());
+  return hasMarkdown && !isHtml;
+}
+function buildParser(schema) {
+  const md = import_markdown.defaultMarkdownParser.tokenizer;
+  const tokens = {};
+  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
+      })
+    };
+  }
+  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" };
+  }
+  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 import_markdown.MarkdownParser(schema, md, tokens);
+  } catch {
+    return null;
+  }
+}
+var MarkdownPaste = import_core3.Extension.create({
+  name: "markdownPaste",
+  addProseMirrorPlugins() {
+    const schema = this.editor.schema;
+    let parser = null;
+    return [
+      new import_state3.Plugin({
+        key: markdownPastePluginKey,
+        props: {
+          handlePaste(view, event) {
+            const clipboardData = event.clipboardData;
+            if (!clipboardData) return false;
+            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;
+            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 {
+              return false;
+            }
+          }
+        }
+      })
+    ];
+  }
+});
+
 // src/headless/extensions/slash-command.tsx
-var import_react10 = require("@tiptap/react");
 var import_suggestion = __toESM(require("@tiptap/suggestion"), 1);
-var import_core3 = require("@tiptap/core");
-var Command2 = import_core3.Extension.create({
+var import_core4 = require("@tiptap/core");
+var Command = import_core4.Extension.create({
   name: "slash-command",
   addOptions() {
     return {
@@ -941,7 +1217,6 @@ var Command2 = import_core3.Extension.create({
       (0, import_suggestion.default)({
         editor: this.editor,
         char: base.char ?? "/",
-        // Only trigger slash command at start of line or after whitespace
         startOfLine: base.startOfLine ?? true,
         items: base.items ?? (() => ["/"]),
         command: (ctx) => {
@@ -949,76 +1224,63 @@ var Command2 = import_core3.Extension.create({
             ctx.props.command({ editor: ctx.editor, range: ctx.range });
           }
         },
-        ...base
+        ...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);
+            }
+          };
+        }
       })
     ];
   }
 });
-var renderItems = (elementRef) => {
-  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 top = Math.round(clientRect.bottom + 8);
-    const left = Math.round(clientRect.left);
-    container.style.top = `${top}px`;
-    container.style.left = `${left}px`;
-  };
-  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;
-      }
-      component = new import_react10.ReactRenderer(EditorCommandOut, {
-        props: {
-          query: props.query ?? "",
-          range: props.range
-        },
-        editor: props.editor
-      });
-      container = document.createElement("div");
-      container.style.position = "fixed";
-      container.style.zIndex = "9999";
-      container.style.minWidth = "240px";
-      (elementRef?.current ?? 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({
-        query: props.query ?? "",
-        range: props.range
-      });
-      const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
-      if (rect) updatePosition(rect);
-    },
-    onKeyDown: ({ event }) => {
-      if (event.key === "Escape") {
-        destroy();
-        return true;
-      }
-      return false;
-    },
-    onExit: () => {
-      destroy();
-    }
-  };
-};
 var handleCommandNavigation = (event) => {
   if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
     const slashCommand = document.querySelector("#slash-command");
@@ -1028,11 +1290,13 @@ var handleCommandNavigation = (event) => {
 
 // src/headless/extensions/extension-kit.ts
 var import_extension_collaboration = __toESM(require("@tiptap/extension-collaboration"), 1);
+var import_extension_collaboration_caret = __toESM(require("@tiptap/extension-collaboration-caret"), 1);
+var import_extension_underline = __toESM(require("@tiptap/extension-underline"), 1);
 
 // src/headless/extensions/VideoBlock/VideoBlock.ts
-var import_core4 = require("@tiptap/core");
-var import_react12 = require("@tiptap/react");
-var VideoBlock = import_core4.Node.create({
+var import_core5 = require("@tiptap/core");
+var import_react11 = require("@tiptap/react");
+var VideoBlock = import_core5.Node.create({
   name: "videoBlock",
   group: "block",
   defining: true,
@@ -1078,7 +1342,7 @@ var VideoBlock = import_core4.Node.create({
   renderHTML({ HTMLAttributes }) {
     return [
       "div",
-      (0, import_core4.mergeAttributes)(HTMLAttributes, { "data-type": "video-block" })
+      (0, import_core5.mergeAttributes)(HTMLAttributes, { "data-type": "video-block" })
     ];
   },
   addCommands() {
@@ -1097,7 +1361,7 @@ var VideoBlock = import_core4.Node.create({
   },
   addNodeView() {
     if (this.options.nodeView) {
-      return (0, import_react12.ReactNodeViewRenderer)(this.options.nodeView);
+      return (0, import_react11.ReactNodeViewRenderer)(this.options.nodeView);
     }
     return null;
   }
@@ -1110,6 +1374,7 @@ var ExtensionKit = (options) => {
     import_starter_kit.StarterKit.configure({ codeBlock: false, link: false }),
     CodeBlock,
     Link,
+    import_extension_underline.default,
     ImageBlock.configure({
       uploadImage: options?.uploadImage,
       nodeView: options?.imageBlockView
@@ -1128,14 +1393,29 @@ var ExtensionKit = (options) => {
         return enableSlashCommand ? "Press '/' for commands" : "";
       },
       includeChildren: true
-    })
+    }),
+    MarkdownPaste
   ];
+  if (options?.table !== false) {
+    extensions.push(
+      import_extension_table.TableKit.configure({
+        resizable: true,
+        lastColumnResizable: true,
+        allowTableNodeSelection: true
+      })
+    );
+  }
+  if (options?.dragHandle !== false) {
+    extensions.push(DragHandle);
+    if (options?.dragHandleCallbacks) {
+      setDragHandleCallbacks(options.dragHandleCallbacks);
+    }
+  }
   if (enableSlashCommand) {
     extensions.push(
-      Command2.configure({
+      Command.configure({
         suggestion: {
           char: "/",
-          render: renderItems,
           allowSpaces: true,
           allowedPrefixes: null
         }
@@ -1161,19 +1441,44 @@ var ExtensionKit = (options) => {
         field: options.collaboration.field
       })
     );
+    if (options.collaboration.provider && options.collaboration.user) {
+      extensions.push(
+        import_extension_collaboration_caret.default.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;
 };
 var extension_kit_default = ExtensionKit;
 
 // src/react/menus/TextMenu.tsx
-var import_react14 = require("@tiptap/react");
+var import_state4 = require("@tiptap/pm/state");
+var import_react13 = require("@tiptap/react");
 var import_menus = require("@tiptap/react/menus");
 var import_icons_react2 = require("@tabler/icons-react");
-var import_react15 = require("react");
+var import_react14 = require("react");
 
 // src/react/menus/MenuList.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_icons_react = require("@tabler/icons-react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function MenuList({
@@ -1183,10 +1488,10 @@ function MenuList({
   onSelect,
   buttonClassName
 }) {
-  const [open, setOpen] = (0, import_react13.useState)(false);
-  const [label, setLabel] = (0, import_react13.useState)("Paragraph");
-  const rootRef = (0, import_react13.useRef)(null);
-  const computeLabel = (0, import_react13.useCallback)(() => {
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  const [label, setLabel] = (0, import_react12.useState)("Paragraph");
+  const rootRef = (0, import_react12.useRef)(null);
+  const computeLabel = (0, import_react12.useCallback)(() => {
     if (!editor) return "Paragraph";
     if (editor.isActive("heading", { level: 1 })) return "Heading 1";
     if (editor.isActive("heading", { level: 2 })) return "Heading 2";
@@ -1199,7 +1504,7 @@ function MenuList({
     if (editor.isActive("codeBlock")) return "Code Block";
     return "Paragraph";
   }, [editor]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     setLabel(computeLabel());
     if (!editor) return;
     const update = () => setLabel(computeLabel());
@@ -1212,7 +1517,7 @@ function MenuList({
       editor.off("update", update);
     };
   }, [editor, computeLabel]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!editor) return;
     const close = () => setOpen(false);
     editor.on("selectionUpdate", close);
@@ -1222,7 +1527,7 @@ function MenuList({
       editor.off("blur", close);
     };
   }, [editor]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const handlePointerDown = (e) => {
       if (!open) return;
       const el = rootRef.current;
@@ -1237,7 +1542,7 @@ function MenuList({
     onSelect?.();
     setOpen(false);
   };
-  const isActive = (0, import_react13.useCallback)((name) => label === name, [label]);
+  const isActive = (0, import_react12.useCallback)((name) => label === name, [label]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: rootRef, className: "nph-dropdown", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
@@ -1425,22 +1730,26 @@ function MenuList({
 
 // src/react/menus/TextMenu.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function Separator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "nph-bubble-separator" });
+}
 function TextMenu({
   className,
   leadingExtras,
   trailingExtras
 }) {
-  const { editor } = (0, import_react14.useCurrentEditor)();
-  const [isAddingLink, setIsAddingLink] = (0, import_react15.useState)(false);
-  const [linkUrl, setLinkUrl] = (0, import_react15.useState)("");
-  const linkInputRef = (0, import_react15.useRef)(null);
-  const editorState = (0, import_react14.useEditorState)({
+  const { editor } = (0, import_react13.useCurrentEditor)();
+  const [isAddingLink, setIsAddingLink] = (0, import_react14.useState)(false);
+  const [linkUrl, setLinkUrl] = (0, import_react14.useState)("");
+  const linkInputRef = (0, import_react14.useRef)(null);
+  const editorState = (0, import_react13.useEditorState)({
     editor,
     selector: (ctx) => {
       if (!ctx.editor) return null;
       return {
         isBold: ctx.editor.isActive("bold"),
         isItalic: ctx.editor.isActive("italic"),
+        isUnderline: ctx.editor.isActive("underline"),
         isStrike: ctx.editor.isActive("strike"),
         isCode: ctx.editor.isActive("code"),
         isCodeBlock: ctx.editor.isActive("codeBlock"),
@@ -1451,7 +1760,7 @@ function TextMenu({
       };
     }
   });
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (isAddingLink && linkInputRef.current) {
       linkInputRef.current.focus();
     }
@@ -1486,6 +1795,7 @@ function TextMenu({
     }
     return has;
   };
+  const isInCode = editorState.isCode || editorState.isCodeBlock;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_menus.BubbleMenu,
     {
@@ -1494,7 +1804,7 @@ function TextMenu({
         if (e.isActive("imageBlock")) return false;
         if (e.isActive("videoBlock")) return false;
         const { selection } = state;
-        if (selection.constructor.name === "NodeSelection") return false;
+        if (selection instanceof import_state4.NodeSelection) return false;
         if (from === to) return false;
         if (e.isActive("link")) return false;
         let hasImage = false;
@@ -1508,8 +1818,9 @@ function TextMenu({
         return true;
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: className ? `bubble-menu ${className}` : "bubble-menu", children: [
-        leadingExtras && editor ? leadingExtras.map((renderExtra, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react15.Fragment, { children: renderExtra(editor) }, `leading-extra-${index}`)) : null,
+        leadingExtras && editor ? leadingExtras.map((renderExtra, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react14.Fragment, { children: renderExtra(editor) }, `leading-extra-${index}`)) : null,
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuList, { editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Separator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
@@ -1517,8 +1828,8 @@ function TextMenu({
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => editor.chain().focus().toggleBold().run(),
             className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${editorState.isBold ? " is-active" : ""}`,
-            disabled: editorState.isCode || editorState.isCodeBlock,
-            "aria-disabled": editorState.isCode || editorState.isCodeBlock,
+            disabled: isInCode,
+            "aria-disabled": isInCode,
             "aria-pressed": editorState.isBold,
             "aria-label": "Toggle bold",
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react2.IconBold, { size: 16 })
@@ -1531,13 +1842,27 @@ function TextMenu({
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => editor.chain().focus().toggleItalic().run(),
             className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${editorState.isItalic ? " is-active" : ""}`,
-            disabled: editorState.isCode || editorState.isCodeBlock,
-            "aria-disabled": editorState.isCode || editorState.isCodeBlock,
+            disabled: isInCode,
+            "aria-disabled": isInCode,
             "aria-pressed": editorState.isItalic,
             "aria-label": "Toggle italic",
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react2.IconItalic, { size: 16 })
           }
         ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => editor.chain().focus().toggleUnderline().run(),
+            className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${editorState.isUnderline ? " is-active" : ""}`,
+            disabled: isInCode,
+            "aria-disabled": isInCode,
+            "aria-pressed": editorState.isUnderline,
+            "aria-label": "Toggle underline",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react2.IconUnderline, { size: 16 })
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
@@ -1545,13 +1870,28 @@ function TextMenu({
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => editor.chain().focus().toggleStrike().run(),
             className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${editorState.isStrike ? " is-active" : ""}`,
-            disabled: editorState.isCode || editorState.isCodeBlock,
-            "aria-disabled": editorState.isCode || editorState.isCodeBlock,
+            disabled: isInCode,
+            "aria-disabled": isInCode,
             "aria-pressed": editorState.isStrike,
             "aria-label": "Toggle strike",
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react2.IconStrikethrough, { size: 16 })
           }
         ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => editor.chain().focus().toggleCode().run(),
+            className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${editorState.isCode ? " is-active" : ""}`,
+            disabled: editorState.isCodeBlock,
+            "aria-disabled": editorState.isCodeBlock,
+            "aria-pressed": editorState.isCode,
+            "aria-label": "Toggle inline code",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react2.IconCode, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Separator, {}),
         !isAddingLink ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
@@ -1559,8 +1899,8 @@ function TextMenu({
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => setIsAddingLink(true),
             className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${editor.isActive("link") ? " is-active" : ""}`,
-            disabled: editorState.isCode || editorState.isCodeBlock,
-            "aria-disabled": editorState.isCode || editorState.isCodeBlock,
+            disabled: isInCode,
+            "aria-disabled": isInCode,
             "aria-pressed": editor.isActive("link"),
             "aria-label": "Add link",
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react2.IconLink, { size: 16 })
@@ -1622,342 +1962,202 @@ function TextMenu({
         (() => {
           const hasInlineMarks = hasAnyMarksInSelection();
           const isPlainParagraph = editorState.isParagraph && !editorState.isHeading && !editorState.isList && !editorState.isBlockquote && !editorState.isCodeBlock && !hasInlineMarks;
-          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "button",
-            {
-              type: "button",
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: () => editor.chain().focus().clearNodes().setParagraph().unsetAllMarks().run(),
-              className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon",
-              "aria-label": "Revert to paragraph",
-              title: "Revert to paragraph",
-              disabled: isPlainParagraph,
-              "aria-disabled": isPlainParagraph,
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react2.IconArrowBackUp, { size: 16 })
-            }
-          );
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Separator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => editor.chain().focus().clearNodes().setParagraph().unsetAllMarks().run(),
+                className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon",
+                "aria-label": "Revert to paragraph",
+                title: "Revert to paragraph",
+                disabled: isPlainParagraph,
+                "aria-disabled": isPlainParagraph,
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react2.IconArrowBackUp, { size: 16 })
+              }
+            )
+          ] });
         })(),
-        trailingExtras && editor ? trailingExtras.map((renderExtra, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react15.Fragment, { children: renderExtra(editor) }, `trailing-extra-${index}`)) : null
+        trailingExtras && editor ? trailingExtras.map((renderExtra, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react14.Fragment, { children: renderExtra(editor) }, `trailing-extra-${index}`)) : null
       ] })
     }
   );
 }
 
 // src/react/menus/SlashMenu.tsx
-var import_react16 = require("@tiptap/react");
+var import_react15 = require("@tiptap/react");
+var import_jotai6 = require("jotai");
 var import_icons_react3 = require("@tabler/icons-react");
+var import_react16 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var SLASH_COMMANDS = [
+  {
+    group: "Format",
+    items: [
+      {
+        value: "paragraph text",
+        label: "Paragraph",
+        description: "Plain text block",
+        icon: import_icons_react3.IconTypography,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).setParagraph().run()
+      },
+      {
+        value: "heading1 h1",
+        label: "Heading 1",
+        description: "Large section heading",
+        icon: import_icons_react3.IconH1,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 1 }).run()
+      },
+      {
+        value: "heading2 h2",
+        label: "Heading 2",
+        description: "Medium section heading",
+        icon: import_icons_react3.IconH2,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 2 }).run()
+      },
+      {
+        value: "heading3 h3",
+        label: "Heading 3",
+        description: "Small section heading",
+        icon: import_icons_react3.IconH3,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 3 }).run()
+      },
+      {
+        value: "heading4 h4",
+        label: "Heading 4",
+        description: "Subsection heading",
+        icon: import_icons_react3.IconH4,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 4 }).run()
+      }
+    ]
+  },
+  {
+    group: "Lists",
+    items: [
+      {
+        value: "bullet list ul",
+        label: "Bullet List",
+        description: "Unordered list of items",
+        icon: import_icons_react3.IconList,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleBulletList().run()
+      },
+      {
+        value: "ordered list ol numbered",
+        label: "Numbered List",
+        description: "Ordered list of items",
+        icon: import_icons_react3.IconListNumbers,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleOrderedList().run()
+      },
+      {
+        value: "task list todo checklist",
+        label: "Task List",
+        description: "Checklist of to-do items",
+        icon: import_icons_react3.IconListCheck,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleTaskList().run()
+      },
+      {
+        value: "quote blockquote",
+        label: "Blockquote",
+        description: "Highlight a quote or excerpt",
+        icon: import_icons_react3.IconBlockquote,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleBlockquote().run()
+      }
+    ]
+  },
+  {
+    group: "Insert",
+    items: [
+      {
+        value: "image photo picture",
+        label: "Image",
+        description: "Upload or embed an image",
+        icon: import_icons_react3.IconPhoto,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).setImageBlock({ src: "" }).run()
+      },
+      {
+        value: "video embed youtube vimeo",
+        label: "Video",
+        description: "Embed a YouTube or Vimeo video",
+        icon: import_icons_react3.IconVideo,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).setVideoBlock({ src: "" }).run()
+      },
+      {
+        value: "table grid",
+        label: "Table",
+        description: "Insert a table with rows and columns",
+        icon: import_icons_react3.IconTable,
+        onCommand: ({ editor, range }) => {
+          editor.chain().focus().deleteRange(range).run();
+          if (editor.commands.insertTable) {
+            editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true });
+          }
+        }
+      },
+      {
+        value: "code block codeblock",
+        label: "Code Block",
+        description: "Syntax-highlighted code block",
+        icon: import_icons_react3.IconSourceCode,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
+      },
+      {
+        value: "code inline",
+        label: "Inline Code",
+        description: "Mark text as inline code",
+        icon: import_icons_react3.IconCode,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCode().run()
+      },
+      {
+        value: "divider horizontal rule separator",
+        label: "Divider",
+        description: "Horizontal separator line",
+        icon: import_icons_react3.IconMinus,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).setHorizontalRule().run()
+      }
+    ]
+  }
+];
 function SlashMenu({ className }) {
-  const { editor } = (0, import_react16.useCurrentEditor)();
+  const { editor } = (0, import_react15.useCurrentEditor)();
+  const query = (0, import_jotai6.useAtomValue)(queryAtom, { store: novelStore });
+  const filteredGroups = (0, import_react16.useMemo)(() => {
+    if (!query) return SLASH_COMMANDS;
+    const q = query.toLowerCase();
+    return SLASH_COMMANDS.map((group) => ({
+      ...group,
+      items: group.items.filter((item) => item.value.toLowerCase().includes(q))
+    })).filter((group) => group.items.length > 0);
+  }, [query]);
   if (!editor) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EditorCommand, { className: className ?? "nph-command", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EditorCommand, { className: className ?? "nph-command", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     EditorCommandList,
     {
       className: "nph-command__list",
       style: { display: "flex", flexDirection: "column", gap: 2 },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EditorCommandEmpty, { style: { padding: "8px 12px", fontSize: 14 }, children: "No commands found" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "bold",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleBold().run(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconBold, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Bold" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "italic",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleItalic().run(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconItalic, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Italic" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "strike",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleStrike().run(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconStrikethrough, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Strike" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "heading1 h1",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleHeading({ level: 1 }).run(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconH1, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Heading 1" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "heading2 h2",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleHeading({ level: 2 }).run(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconH2, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Heading 2" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "heading3 h3",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleHeading({ level: 3 }).run(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconH3, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Heading 3" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "heading4 h4",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleHeading({ level: 4 }).run(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconH4, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Heading 4" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "bullet list ul",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleBulletList().run(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconList, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Bullet list" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "ordered list ol",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleOrderedList().run(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconListNumbers, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Ordered list" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "quote blockquote",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleBlockquote().run(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconBlockquote, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Quote" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "code inline",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleCode().run(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconCode, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Code" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "code block codeblock",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleCodeBlock().run(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconSourceCode, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Code Block" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "image photo picture block",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => {
-              ;
-              editor2.chain().focus().deleteRange(range).setImageBlock({ src: "" }).run();
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconPhoto, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Image" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          EditorCommandItem,
-          {
-            value: "video embed youtube vimeo",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => {
-              ;
-              editor2.chain().focus().deleteRange(range).setVideoBlock({ src: "" }).run();
+      children: filteredGroups.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { padding: "8px 12px", fontSize: 14, color: "var(--muted-foreground, #6b7280)" }, children: "No commands found" }) : filteredGroups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "nph-command__group-header", children: group.group }),
+        group.items.map((item) => {
+          const Icon = item.icon;
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            EditorCommandItem,
+            {
+              value: item.value,
+              className: "nph-command__item",
+              onCommand: item.onCommand,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "nph-command__item-icon", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: 18 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "nph-command__item-content", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "nph-command__item-title", children: item.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "nph-command__item-description", children: item.description })
+                ] })
+              ]
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react3.IconVideo, { size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Video" })
-                ]
-              }
-            )
-          }
-        )
-      ]
+            item.value
+          );
+        })
+      ] }, group.group))
     }
   ) });
 }
@@ -2108,6 +2308,7 @@ function LinkMenu() {
 }
 
 // src/react/menus/ImageMenu.tsx
+var import_state5 = require("@tiptap/pm/state");
 var import_react19 = require("@tiptap/react");
 var import_menus3 = require("@tiptap/react/menus");
 var import_icons_react5 = require("@tabler/icons-react");
@@ -2169,7 +2370,7 @@ function ImageMenu({
       shouldShow: ({ editor: e, state }) => {
         if (!e.isActive("imageBlock")) return false;
         const { selection } = state;
-        const isNodeSelection = selection.constructor.name === "NodeSelection";
+        const isNodeSelection = selection instanceof import_state5.NodeSelection;
         return isNodeSelection;
       },
       updateDelay: 0,
@@ -2281,12 +2482,13 @@ function ImageMenu({
 }
 
 // src/react/menus/ImageBlock/ImageBlockView.tsx
-var import_react24 = require("@tiptap/react");
-var import_react25 = require("react");
+var import_react26 = require("@tiptap/react");
+var import_react27 = require("react");
 
 // src/react/menus/ImageBlock/ImageBlockMenu.tsx
-var import_menus4 = require("@tiptap/react/menus");
-var import_react22 = require("react");
+var import_state6 = require("@tiptap/pm/state");
+var import_react22 = require("@tiptap/react");
+var import_react23 = require("react");
 
 // src/react/menus/ImageBlock/ImageBlockWidth.tsx
 var import_react21 = require("react");
@@ -2351,82 +2553,60 @@ ImageBlockWidth.displayName = "ImageBlockWidth";
 // src/react/menus/ImageBlock/ImageBlockMenu.tsx
 var import_icons_react6 = require("@tabler/icons-react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var ImageBlockMenu = ({ editor, appendTo }) => {
-  const menuRef = (0, import_react22.useRef)(null);
-  const [align, setAlign] = (0, import_react22.useState)("center");
-  const [width, setWidth] = (0, import_react22.useState)(100);
-  (0, import_react22.useEffect)(() => {
-    if (!editor) return;
-    const update = () => {
-      if (!editor.isActive("imageBlock")) return;
-      const attrs = editor.getAttributes("imageBlock");
-      setAlign(attrs.align || "center");
-      const widthStr = attrs.width || "100%";
-      setWidth(parseInt(widthStr) || 100);
-    };
-    update();
-    editor.on("selectionUpdate", update);
-    editor.on("transaction", update);
-    return () => {
-      editor.off("selectionUpdate", update);
-      editor.off("transaction", update);
-    };
-  }, [editor]);
-  const getReferenceClientRect = (0, import_react22.useCallback)(() => {
-    if (!editor) return new DOMRect(-1e3, -1e3, 0, 0);
-    const { view } = editor;
-    const { state } = view;
-    const { selection } = state;
-    const node = selection instanceof window.ProseMirror?.state?.NodeSelection ? selection.node : null;
-    if (node && node.type.name === "imageBlock") {
-      const nodePos = selection.from;
-      const domNode = view.nodeDOM(nodePos);
-      if (domNode && domNode instanceof HTMLElement) {
-        return domNode.getBoundingClientRect();
-      }
-    }
-    const imageBlockElements = document.querySelectorAll("[data-node-view-wrapper]");
-    for (const el of Array.from(imageBlockElements)) {
-      if (el.querySelector("img")) {
-        return el.getBoundingClientRect();
+var ImageBlockMenu = ({ editor, getPos, appendTo }) => {
+  const menuRef = (0, import_react23.useRef)(null);
+  const { isVisible, align, width } = (0, import_react22.useEditorState)({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return { isVisible: false, align: "center", width: 100 };
+      const { state } = ctx.editor;
+      const { selection } = state;
+      const isNodeSel = selection instanceof import_state6.NodeSelection;
+      const isThisNode = isNodeSel && selection.from === getPos();
+      const visible = isThisNode;
+      let currentAlign = "center";
+      let currentWidth = 100;
+      if (visible) {
+        const attrs = ctx.editor.getAttributes("imageBlock");
+        currentAlign = attrs.align || "center";
+        const widthStr = attrs.width || "100%";
+        currentWidth = parseInt(widthStr) || 100;
       }
+      return { isVisible: visible, align: currentAlign, width: currentWidth };
     }
-    return new DOMRect(-1e3, -1e3, 0, 0);
-  }, [editor]);
-  const shouldShow = (0, import_react22.useCallback)(() => {
-    if (!editor) return false;
-    const isActive = editor.isActive("imageBlock");
-    if (!isActive) return false;
-    const { state } = editor;
-    const { selection } = state;
-    const isNodeSelection = selection.constructor.name === "NodeSelection";
-    return isNodeSelection;
-  }, [editor]);
-  const onAlignImageLeft = (0, import_react22.useCallback)(() => {
+  });
+  const onAlignImageLeft = (0, import_react23.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockAlign("left").run();
   }, [editor]);
-  const onAlignImageCenter = (0, import_react22.useCallback)(() => {
+  const onAlignImageCenter = (0, import_react23.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockAlign("center").run();
   }, [editor]);
-  const onAlignImageRight = (0, import_react22.useCallback)(() => {
+  const onAlignImageRight = (0, import_react23.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockAlign("right").run();
   }, [editor]);
-  const onWidthChange = (0, import_react22.useCallback)(
+  const onWidthChange = (0, import_react23.useCallback)(
     (value) => {
       editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockWidth(value).run();
     },
     [editor]
   );
-  const onRemoveImage = (0, import_react22.useCallback)(() => {
+  const onRemoveImage = (0, import_react23.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).deleteSelection().run();
   }, [editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_menus4.BubbleMenu,
+  if (!isVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
     {
-      editor,
-      shouldShow,
-      updateDelay: 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "bubble-menu", ref: menuRef, children: [
+      className: "bubble-menu",
+      ref: menuRef,
+      style: {
+        position: "absolute",
+        top: "-40px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: "var(--nph-z, 50)"
+      },
+      children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
@@ -2486,14 +2666,14 @@ var ImageBlockMenu = ({ editor, appendTo }) => {
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons_react6.IconTrash, { size: 16 })
           }
         )
-      ] })
+      ]
     }
   );
 };
 
 // src/react/menus/ImageBlock/ImageUploader.tsx
 var import_icons_react8 = require("@tabler/icons-react");
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/react/menus/ImageBlock/ImageBlockLoading.tsx
 var import_icons_react7 = require("@tabler/icons-react");
@@ -2511,10 +2691,10 @@ var ImageBlockLoading = () => {
 // src/react/menus/ImageBlock/ImageUploader.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var ImageUploader = ({ onUpload, editor }) => {
-  const [loading, setLoading] = (0, import_react23.useState)(false);
-  const [draggedInside, setDraggedInside] = (0, import_react23.useState)(false);
-  const fileInputRef = (0, import_react23.useRef)(null);
-  const uploadFile = (0, import_react23.useCallback)(
+  const [loading, setLoading] = (0, import_react24.useState)(false);
+  const [draggedInside, setDraggedInside] = (0, import_react24.useState)(false);
+  const fileInputRef = (0, import_react24.useRef)(null);
+  const uploadFile = (0, import_react24.useCallback)(
     async (file) => {
       setLoading(true);
       try {
@@ -2536,10 +2716,10 @@ var ImageUploader = ({ onUpload, editor }) => {
     },
     [editor, onUpload]
   );
-  const handleUploadClick = (0, import_react23.useCallback)(() => {
+  const handleUploadClick = (0, import_react24.useCallback)(() => {
     fileInputRef.current?.click();
   }, []);
-  const onFileChange = (0, import_react23.useCallback)(
+  const onFileChange = (0, import_react24.useCallback)(
     (e) => {
       const file = e.target.files?.[0];
       if (file) {
@@ -2548,7 +2728,7 @@ var ImageUploader = ({ onUpload, editor }) => {
     },
     [uploadFile]
   );
-  const onDrop = (0, import_react23.useCallback)(
+  const onDrop = (0, import_react24.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -2560,12 +2740,12 @@ var ImageUploader = ({ onUpload, editor }) => {
     },
     [uploadFile]
   );
-  const onDragEnter = (0, import_react23.useCallback)((e) => {
+  const onDragEnter = (0, import_react24.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     setDraggedInside(true);
   }, []);
-  const onDragLeave = (0, import_react23.useCallback)((e) => {
+  const onDragLeave = (0, import_react24.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     setDraggedInside(false);
@@ -2614,21 +2794,93 @@ var ImageUploader = ({ onUpload, editor }) => {
   );
 };
 
-// src/react/menus/ImageBlock/ImageBlockView.tsx
+// src/react/menus/ImageBlock/ImageResizeHandle.tsx
+var import_react25 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
+function ImageResizeHandle({
+  children,
+  onResize,
+  currentWidth
+}) {
+  const containerRef = (0, import_react25.useRef)(null);
+  const [isResizing, setIsResizing] = (0, import_react25.useState)(false);
+  const handleMouseDown = (0, import_react25.useCallback)(
+    (e, side) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsResizing(true);
+      const startX = e.clientX;
+      const containerEl = containerRef.current;
+      if (!containerEl) return;
+      const editorEl = containerEl.closest(".nph-editor") || containerEl.parentElement;
+      if (!editorEl) return;
+      const editorWidth = editorEl.getBoundingClientRect().width;
+      const startWidth = containerEl.getBoundingClientRect().width;
+      const startPercent = startWidth / editorWidth * 100;
+      const handleMouseMove = (moveEvent) => {
+        const deltaX = moveEvent.clientX - startX;
+        const direction = side === "right" ? 1 : -1;
+        const deltaPercent = deltaX * direction / editorWidth * 100 * 2;
+        const newPercent = Math.max(10, Math.min(100, startPercent + deltaPercent));
+        onResize(Math.round(newPercent));
+      };
+      const handleMouseUp = () => {
+        setIsResizing(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [onResize]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: `nph-resize-wrapper${isResizing ? " nph-resize-wrapper--active" : ""}`,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "div",
+          {
+            className: "nph-resize-handle nph-resize-handle--left",
+            onMouseDown: (e) => handleMouseDown(e, "left")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "div",
+          {
+            className: "nph-resize-handle nph-resize-handle--right",
+            onMouseDown: (e) => handleMouseDown(e, "right")
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/menus/ImageBlock/ImageBlockView.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var ImageBlockView = (props) => {
   const { editor, getPos, node, updateAttributes } = props;
-  const imageWrapperRef = (0, import_react25.useRef)(null);
+  const imageWrapperRef = (0, import_react27.useRef)(null);
   const { src, width, align, alt, loading } = node.attrs;
-  const handleUpload = (0, import_react25.useCallback)(
+  const handleUpload = (0, import_react27.useCallback)(
     (url) => {
       updateAttributes({ src: url, loading: false });
     },
     [updateAttributes]
   );
-  const onClick = (0, import_react25.useCallback)(() => {
+  const onClick = (0, import_react27.useCallback)(() => {
     editor.commands.setNodeSelection(getPos());
   }, [getPos, editor.commands]);
+  const handleResize = (0, import_react27.useCallback)(
+    (widthPercent) => {
+      updateAttributes({ width: `${widthPercent}%` });
+    },
+    [updateAttributes]
+  );
   const getWrapperStyle = () => {
     const baseStyle = {
       width: width || "100%",
@@ -2642,14 +2894,17 @@ var ImageBlockView = (props) => {
       return { ...baseStyle, marginLeft: "auto", marginRight: "auto" };
     }
   };
+  const getContentStyle = () => ({
+    position: "relative"
+  });
   if (!src || src === "") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react24.NodeViewWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: imageWrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageUploader, { onUpload: handleUpload, editor }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react26.NodeViewWrapper, { style: { width: "100%", marginTop: "0.5rem", marginBottom: "0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: imageWrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageUploader, { onUpload: handleUpload, editor }) }) });
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react24.NodeViewWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: imageWrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageBlockLoading, {}) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react26.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: imageWrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageBlockLoading, {}) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react24.NodeViewWrapper, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { contentEditable: false, ref: imageWrapperRef, style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react26.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { contentEditable: false, ref: imageWrapperRef, style: getContentStyle(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageResizeHandle, { onResize: handleResize, currentWidth: width, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "img",
       {
         src,
@@ -2657,76 +2912,76 @@ var ImageBlockView = (props) => {
         onClick,
         className: "nph-image-block"
       }
-    ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageBlockMenu, { editor, appendTo: imageWrapperRef })
-  ] });
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageBlockMenu, { editor, getPos, appendTo: imageWrapperRef })
+  ] }) });
 };
 
 // src/react/menus/VideoBlock/VideoBlockView.tsx
-var import_react27 = require("@tiptap/react");
-var import_react28 = require("react");
+var import_state8 = require("@tiptap/pm/state");
+var import_react30 = require("@tiptap/react");
+var import_react31 = require("react");
 
 // src/react/menus/VideoBlock/VideoBlockMenu.tsx
-var import_menus5 = require("@tiptap/react/menus");
-var import_react26 = require("react");
+var import_state7 = require("@tiptap/pm/state");
+var import_react28 = require("@tiptap/react");
+var import_react29 = require("react");
 var import_icons_react9 = require("@tabler/icons-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var VideoBlockMenu = ({ editor }) => {
-  const menuRef = (0, import_react26.useRef)(null);
-  const [align, setAlign] = (0, import_react26.useState)("center");
-  const [width, setWidth] = (0, import_react26.useState)(100);
-  (0, import_react26.useEffect)(() => {
-    if (!editor) return;
-    const update = () => {
-      if (!editor.isActive("videoBlock")) return;
-      const attrs = editor.getAttributes("videoBlock");
-      setAlign(attrs.align || "center");
-      const widthStr = attrs.width || "100%";
-      setWidth(parseInt(widthStr) || 100);
-    };
-    update();
-    editor.on("selectionUpdate", update);
-    editor.on("transaction", update);
-    return () => {
-      editor.off("selectionUpdate", update);
-      editor.off("transaction", update);
-    };
-  }, [editor]);
-  const shouldShow = (0, import_react26.useCallback)(() => {
-    if (!editor) return false;
-    const { state } = editor;
-    const { selection } = state;
-    if (selection.constructor.name !== "NodeSelection") return false;
-    const node = selection.node;
-    if (!node || node.type.name !== "videoBlock") return false;
-    return true;
-  }, [editor]);
-  const onAlignLeft = (0, import_react26.useCallback)(() => {
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var VideoBlockMenu = ({ editor, getPos }) => {
+  const menuRef = (0, import_react29.useRef)(null);
+  const { isVisible, align, width } = (0, import_react28.useEditorState)({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return { isVisible: false, align: "center", width: 100 };
+      const { state } = ctx.editor;
+      const { selection } = state;
+      const isNodeSel = selection instanceof import_state7.NodeSelection;
+      const isThisNode = isNodeSel && selection.from === getPos();
+      let currentAlign = "center";
+      let currentWidth = 100;
+      if (isThisNode) {
+        const attrs = ctx.editor.getAttributes("videoBlock");
+        currentAlign = attrs.align || "center";
+        const widthStr = attrs.width || "100%";
+        currentWidth = parseInt(widthStr) || 100;
+      }
+      return { isVisible: isThisNode, align: currentAlign, width: currentWidth };
+    }
+  });
+  const onAlignLeft = (0, import_react29.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockAlign("left").run();
   }, [editor]);
-  const onAlignCenter = (0, import_react26.useCallback)(() => {
+  const onAlignCenter = (0, import_react29.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockAlign("center").run();
   }, [editor]);
-  const onAlignRight = (0, import_react26.useCallback)(() => {
+  const onAlignRight = (0, import_react29.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockAlign("right").run();
   }, [editor]);
-  const onWidthChange = (0, import_react26.useCallback)(
+  const onWidthChange = (0, import_react29.useCallback)(
     (value) => {
       editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockWidth(value).run();
     },
     [editor]
   );
-  const onRemove = (0, import_react26.useCallback)(() => {
+  const onRemove = (0, import_react29.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).deleteSelection().run();
   }, [editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_menus5.BubbleMenu,
+  if (!isVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
     {
-      editor,
-      shouldShow,
-      updateDelay: 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "bubble-menu", ref: menuRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      className: "bubble-menu",
+      ref: menuRef,
+      style: {
+        position: "absolute",
+        top: "-40px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: "var(--nph-z, 50)"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -2734,10 +2989,10 @@ var VideoBlockMenu = ({ editor }) => {
             title: "Align left",
             onMouseDown: (e) => e.preventDefault(),
             onClick: onAlignLeft,
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_react9.IconAlignLeft, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react9.IconAlignLeft, { size: 16 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -2745,10 +3000,10 @@ var VideoBlockMenu = ({ editor }) => {
             title: "Align center",
             onMouseDown: (e) => e.preventDefault(),
             onClick: onAlignCenter,
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_react9.IconAlignCenter, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react9.IconAlignCenter, { size: 16 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -2756,25 +3011,25 @@ var VideoBlockMenu = ({ editor }) => {
             title: "Align right",
             onMouseDown: (e) => e.preventDefault(),
             onClick: onAlignRight,
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_react9.IconAlignRight, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react9.IconAlignRight, { size: 16 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           {
             className: "nph-link-popover__divider",
             style: { margin: "0 4px" }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageBlockWidth, { onChange: onWidthChange, value: width }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageBlockWidth, { onChange: onWidthChange, value: width }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           {
             className: "nph-link-popover__divider",
             style: { margin: "0 4px" }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -2782,17 +3037,17 @@ var VideoBlockMenu = ({ editor }) => {
             title: "Remove video",
             onMouseDown: (e) => e.preventDefault(),
             onClick: onRemove,
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_react9.IconTrash, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react9.IconTrash, { size: 16 })
           }
         )
-      ] })
+      ]
     }
   );
 };
 
 // src/react/menus/VideoBlock/VideoBlockView.tsx
 var import_icons_react10 = require("@tabler/icons-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function toEmbedUrl(url) {
   const ytMatch = url.match(
     /(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/
@@ -2808,15 +3063,23 @@ function toEmbedUrl(url) {
 }
 var VideoBlockView = (props) => {
   const { editor, getPos, node, updateAttributes } = props;
-  const wrapperRef = (0, import_react28.useRef)(null);
+  const wrapperRef = (0, import_react31.useRef)(null);
   const { src, width, align } = node.attrs;
-  const [inputUrl, setInputUrl] = (0, import_react28.useState)("");
-  const handleEmbed = (0, import_react28.useCallback)(() => {
+  const [inputUrl, setInputUrl] = (0, import_react31.useState)("");
+  const isSelected = (0, import_react30.useEditorState)({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return false;
+      const { selection } = ctx.editor.state;
+      return selection instanceof import_state8.NodeSelection && selection.from === getPos();
+    }
+  });
+  const handleEmbed = (0, import_react31.useCallback)(() => {
     if (!inputUrl.trim()) return;
     const embedUrl = toEmbedUrl(inputUrl.trim());
     updateAttributes({ src: embedUrl });
   }, [inputUrl, updateAttributes]);
-  const handleKeyDown = (0, import_react28.useCallback)(
+  const handleKeyDown = (0, import_react31.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -2825,13 +3088,13 @@ var VideoBlockView = (props) => {
     },
     [handleEmbed]
   );
-  const onClick = (0, import_react28.useCallback)(() => {
+  const onClick = (0, import_react31.useCallback)(() => {
     editor.commands.setNodeSelection(getPos());
   }, [getPos, editor.commands]);
   const getWrapperStyle = () => {
     const baseStyle = {
-      width: width || "100%",
-      maxWidth: "100%"
+      width: "fit-content",
+      maxWidth: width || "100%"
     };
     if (align === "left") {
       return { ...baseStyle, marginLeft: 0, marginRight: "auto" };
@@ -2842,10 +3105,10 @@ var VideoBlockView = (props) => {
     }
   };
   if (!src || src === "") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react27.NodeViewWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "nph-video-input", ref: wrapperRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "nph-video-input__icon", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react10.IconVideo, { size: 24 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "nph-video-input__content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react30.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: wrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "nph-video-input", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "nph-video-input__icon", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons_react10.IconVideo, { size: 24 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "nph-video-input__content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "input",
           {
             type: "text",
@@ -2856,7 +3119,7 @@ var VideoBlockView = (props) => {
             onKeyDown: handleKeyDown
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "button",
           {
             type: "button",
@@ -2869,38 +3132,730 @@ var VideoBlockView = (props) => {
       ] })
     ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react27.NodeViewWrapper, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react30.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      contentEditable: false,
+      ref: wrapperRef,
+      style: { position: "relative" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "nph-video-block", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "iframe",
+            {
+              src,
+              className: "nph-video-block__iframe",
+              allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+              allowFullScreen: true
+            }
+          ),
+          !isSelected && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "div",
+            {
+              className: "nph-video-block__overlay",
+              onClick
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VideoBlockMenu, { editor, getPos })
+      ]
+    }
+  ) });
+};
+
+// src/react/menus/DragHandle/BlockActionMenu.tsx
+var import_icons_react11 = require("@tabler/icons-react");
+var import_react32 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function BlockActionMenu({ editor, onClose }) {
+  const executeAndClose = (0, import_react32.useCallback)(
+    (fn) => {
+      fn();
+      onClose();
+    },
+    [onClose]
+  );
+  const handleDelete = (0, import_react32.useCallback)(() => {
+    executeAndClose(() => {
+      editor.commands.deleteSelection();
+    });
+  }, [editor, executeAndClose]);
+  const handleDuplicate = (0, import_react32.useCallback)(() => {
+    executeAndClose(() => {
+      const { state } = editor;
+      const { selection } = state;
+      const { $anchor } = selection;
+      const depth = $anchor.depth > 0 ? 1 : 0;
+      const start = $anchor.start(depth);
+      const end = $anchor.end(depth);
+      const node = state.doc.nodeAt(start - 1);
+      if (node) {
+        const insertPos = end + 1;
+        editor.chain().focus().insertContentAt(insertPos, node.toJSON()).run();
+      }
+    });
+  }, [editor, executeAndClose]);
+  const handleMoveUp = (0, import_react32.useCallback)(() => {
+    executeAndClose(() => {
+      const { state } = editor;
+      const { selection } = state;
+      const { $anchor } = selection;
+      const depth = $anchor.depth > 0 ? 1 : 0;
+      const blockStart = $anchor.start(depth) - 1;
+      if (blockStart <= 0) return;
+      const node = state.doc.nodeAt(blockStart);
+      if (!node) return;
+      const $pos = state.doc.resolve(blockStart);
+      const index = $pos.index($pos.depth);
+      if (index === 0) return;
+      const prevNode = $pos.node($pos.depth).child(index - 1);
+      const prevStart = blockStart - prevNode.nodeSize;
+      editor.chain().focus().command(({ tr }) => {
+        const currentSlice = state.doc.slice(blockStart, blockStart + node.nodeSize);
+        tr.delete(blockStart, blockStart + node.nodeSize);
+        tr.insert(prevStart, currentSlice.content);
+        return true;
+      }).run();
+    });
+  }, [editor, executeAndClose]);
+  const handleMoveDown = (0, import_react32.useCallback)(() => {
+    executeAndClose(() => {
+      const { state } = editor;
+      const { selection } = state;
+      const { $anchor } = selection;
+      const depth = $anchor.depth > 0 ? 1 : 0;
+      const blockStart = $anchor.start(depth) - 1;
+      const node = state.doc.nodeAt(blockStart);
+      if (!node) return;
+      const blockEnd = blockStart + node.nodeSize;
+      const $pos = state.doc.resolve(blockStart);
+      const parent = $pos.node($pos.depth);
+      const index = $pos.index($pos.depth);
+      if (index >= parent.childCount - 1) return;
+      const nextNode = parent.child(index + 1);
+      const nextEnd = blockEnd + nextNode.nodeSize;
+      editor.chain().focus().command(({ tr }) => {
+        const currentSlice = state.doc.slice(blockStart, blockEnd);
+        tr.delete(blockStart, blockEnd);
+        const insertPos = blockStart + nextNode.nodeSize;
+        tr.insert(insertPos, currentSlice.content);
+        return true;
+      }).run();
+    });
+  }, [editor, executeAndClose]);
+  const handleCopyToClipboard = (0, import_react32.useCallback)(() => {
+    executeAndClose(() => {
+      const { state } = editor;
+      const { selection } = state;
+      const { $anchor } = selection;
+      const depth = $anchor.depth > 0 ? 1 : 0;
+      const start = $anchor.start(depth) - 1;
+      const node = state.doc.nodeAt(start);
+      if (node) {
+        const text = node.textContent;
+        navigator.clipboard.writeText(text).catch(() => {
+        });
+      }
+    });
+  }, [editor, executeAndClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "nph-block-action-menu nph-command", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "nph-command__list", style: { maxHeight: "none" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "button",
       {
-        contentEditable: false,
-        ref: wrapperRef,
-        style: { position: "relative" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "nph-video-block", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          "iframe",
-          {
-            src,
-            className: "nph-video-block__iframe",
-            allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-            allowFullScreen: true
+        type: "button",
+        className: "nph-command__item",
+        onClick: handleDelete,
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_react11.IconTrash, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Delete" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "nph-command__item",
+        onClick: handleDuplicate,
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_react11.IconCopy, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Duplicate" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "nph-command__item",
+        onClick: handleCopyToClipboard,
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_react11.IconClipboard, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Copy to clipboard" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "nph-command__item",
+        onClick: handleMoveUp,
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_react11.IconArrowUp, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Move up" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "nph-command__item",
+        onClick: handleMoveDown,
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_react11.IconArrowDown, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Move down" })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/react/menus/TableMenu.tsx
+var import_react33 = require("@tiptap/react");
+var import_icons_react12 = require("@tabler/icons-react");
+var import_react34 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function TableMenu({ className: _className }) {
+  const { editor } = (0, import_react33.useCurrentEditor)();
+  const tableInfo = (0, import_react33.useEditorState)({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return null;
+      const { $from } = ctx.editor.state.selection;
+      for (let d = $from.depth; d > 0; d--) {
+        if ($from.node(d).type.name === "table") {
+          return { pos: $from.start(d) - 1, depth: d };
+        }
+      }
+      return null;
+    }
+  });
+  const [colGrips, setColGrips] = (0, import_react34.useState)([]);
+  const [rowGrips, setRowGrips] = (0, import_react34.useState)([]);
+  const [dropdown, setDropdown] = (0, import_react34.useState)(null);
+  const [tableRect, setTableRect] = (0, import_react34.useState)(null);
+  const [isHovering, setIsHovering] = (0, import_react34.useState)(false);
+  const [drag, setDrag] = (0, import_react34.useState)(null);
+  const dropdownRef = (0, import_react34.useRef)(null);
+  const dragRef = (0, import_react34.useRef)(null);
+  const getTableDom = (0, import_react34.useCallback)(() => {
+    if (!editor || !tableInfo) return null;
+    return editor.view.nodeDOM(tableInfo.pos);
+  }, [editor, tableInfo]);
+  const measureGrips = (0, import_react34.useCallback)(() => {
+    const tableDom = getTableDom();
+    if (!tableDom) {
+      setColGrips([]);
+      setRowGrips([]);
+      setTableRect(null);
+      return;
+    }
+    const rect = tableDom.getBoundingClientRect();
+    setTableRect(rect);
+    const firstRow = tableDom.querySelector("tr");
+    if (!firstRow) return;
+    const cells = firstRow.querySelectorAll("th, td");
+    const newColGrips = [];
+    cells.forEach((cell) => {
+      const cellRect = cell.getBoundingClientRect();
+      newColGrips.push({
+        left: cellRect.left,
+        top: rect.top,
+        width: cellRect.width,
+        height: 0
+      });
+    });
+    setColGrips(newColGrips);
+    const rows = tableDom.querySelectorAll("tr");
+    const newRowGrips = [];
+    rows.forEach((row) => {
+      const rowRect = row.getBoundingClientRect();
+      newRowGrips.push({
+        left: rect.left,
+        top: rowRect.top,
+        width: 0,
+        height: rowRect.height
+      });
+    });
+    setRowGrips(newRowGrips);
+  }, [getTableDom]);
+  (0, import_react34.useEffect)(() => {
+    if (!tableInfo) {
+      setColGrips([]);
+      setRowGrips([]);
+      setTableRect(null);
+      setDropdown(null);
+      return;
+    }
+    measureGrips();
+    const tableDom = getTableDom();
+    if (!tableDom) return;
+    const ro = new ResizeObserver(() => measureGrips());
+    ro.observe(tableDom);
+    const HOVER_PAD = 32;
+    const handleMouseMove = (e) => {
+      const r = tableDom.getBoundingClientRect();
+      const inside = e.clientX >= r.left - HOVER_PAD && e.clientX <= r.right + HOVER_PAD && e.clientY >= r.top - HOVER_PAD && e.clientY <= r.bottom + HOVER_PAD;
+      setIsHovering(inside);
+    };
+    document.addEventListener("mousemove", handleMouseMove, { passive: true });
+    const scrollParent = tableDom.closest(".nph-editor") || window;
+    const handleScroll = () => {
+      measureGrips();
+      setDropdown(null);
+    };
+    scrollParent.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      ro.disconnect();
+      document.removeEventListener("mousemove", handleMouseMove);
+      scrollParent.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [tableInfo, getTableDom, measureGrips]);
+  (0, import_react34.useEffect)(() => {
+    if (!dropdown) return;
+    const handlePointerDown = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setDropdown(null);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [dropdown]);
+  (0, import_react34.useEffect)(() => {
+    if (!editor || !dropdown) return;
+    const handleTransaction = () => setDropdown(null);
+    editor.on("transaction", handleTransaction);
+    return () => {
+      editor.off("transaction", handleTransaction);
+    };
+  }, [editor, dropdown]);
+  const handleColGripClick = (0, import_react34.useCallback)(
+    (index, e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!editor || !tableInfo) return;
+      const tableDom = getTableDom();
+      if (!tableDom) return;
+      const firstRow = tableDom.querySelector("tr");
+      if (!firstRow) return;
+      const cells = firstRow.querySelectorAll("th, td");
+      const cell = cells[index];
+      if (!cell) return;
+      const pos = editor.view.posAtDOM(cell, 0);
+      editor.chain().focus().setTextSelection(pos).run();
+      const rect = cell.getBoundingClientRect();
+      setDropdown({
+        type: "column",
+        index,
+        x: rect.left,
+        y: rect.top - 4
+      });
+    },
+    [editor, tableInfo, getTableDom]
+  );
+  const handleRowGripClick = (0, import_react34.useCallback)(
+    (index, e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!editor || !tableInfo) return;
+      const tableDom = getTableDom();
+      if (!tableDom) return;
+      const rows = tableDom.querySelectorAll("tr");
+      const row = rows[index];
+      if (!row) return;
+      const firstCell = row.querySelector("th, td");
+      if (!firstCell) return;
+      const pos = editor.view.posAtDOM(firstCell, 0);
+      editor.chain().focus().setTextSelection(pos).run();
+      const gripEl = e.currentTarget;
+      const gripRect = gripEl.getBoundingClientRect();
+      setDropdown({
+        type: "row",
+        index,
+        x: gripRect.left,
+        y: gripRect.bottom + 4
+      });
+    },
+    [editor, tableInfo, getTableDom]
+  );
+  const moveColumn = (0, import_react34.useCallback)(
+    (from, to) => {
+      if (!editor || !tableInfo || from === to) return;
+      const { state } = editor;
+      const tableStart = tableInfo.pos;
+      const tableNode = state.doc.nodeAt(tableStart);
+      if (!tableNode) return;
+      const tr = state.tr;
+      tableNode.forEach((row, rowOffset) => {
+        if (row.type.name !== "tableRow") return;
+        const cells = [];
+        row.forEach((cell, cellOffset) => {
+          cells.push({ node: cell, pos: tableStart + 1 + rowOffset + 1 + cellOffset });
+        });
+        if (from >= cells.length || to >= cells.length) return;
+        const reordered = [...cells];
+        const [moved] = reordered.splice(from, 1);
+        reordered.splice(to, 0, moved);
+        const rowPos = tableStart + 1 + rowOffset;
+        const mappedRowPos = tr.mapping.map(rowPos);
+        const newRow = row.type.create(row.attrs, reordered.map((c) => c.node));
+        tr.replaceWith(mappedRowPos, mappedRowPos + row.nodeSize, newRow);
+      });
+      editor.view.dispatch(tr);
+    },
+    [editor, tableInfo]
+  );
+  const moveRow = (0, import_react34.useCallback)(
+    (from, to) => {
+      if (!editor || !tableInfo || from === to) return;
+      const { state } = editor;
+      const tableStart = tableInfo.pos;
+      const tableNode = state.doc.nodeAt(tableStart);
+      if (!tableNode) return;
+      const rows = [];
+      tableNode.forEach((row) => rows.push(row));
+      if (from >= rows.length || to >= rows.length) return;
+      const reordered = [...rows];
+      const [moved] = reordered.splice(from, 1);
+      reordered.splice(to, 0, moved);
+      const tr = state.tr;
+      tr.replaceWith(
+        tableStart + 1,
+        tableStart + 1 + tableNode.content.size,
+        reordered
+      );
+      editor.view.dispatch(tr);
+    },
+    [editor, tableInfo]
+  );
+  const handleGripDragStart = (0, import_react34.useCallback)(
+    (type, index, e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDropdown(null);
+      const startX = e.clientX;
+      const startY = e.clientY;
+      let hasMoved = false;
+      const dragState = { type, fromIndex: index, toIndex: index };
+      dragRef.current = dragState;
+      setDrag(dragState);
+      const handleMouseMove = (ev) => {
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+        if (!hasMoved && Math.abs(type === "column" ? dx : dy) < 5) return;
+        hasMoved = true;
+        let newIndex = index;
+        if (type === "column") {
+          for (let i = 0; i < colGrips.length; i++) {
+            const mid = colGrips[i].left + colGrips[i].width / 2;
+            if (ev.clientX < mid) {
+              newIndex = i;
+              break;
+            }
+            newIndex = i;
+          }
+        } else {
+          for (let i = 0; i < rowGrips.length; i++) {
+            const mid = rowGrips[i].top + rowGrips[i].height / 2;
+            if (ev.clientY < mid) {
+              newIndex = i;
+              break;
+            }
+            newIndex = i;
+          }
+        }
+        const updated = { type, fromIndex: index, toIndex: newIndex };
+        dragRef.current = updated;
+        setDrag(updated);
+      };
+      const handleMouseUp = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        const finalDrag = dragRef.current;
+        dragRef.current = null;
+        setDrag(null);
+        if (finalDrag && hasMoved && finalDrag.fromIndex !== finalDrag.toIndex) {
+          if (type === "column") {
+            moveColumn(finalDrag.fromIndex, finalDrag.toIndex);
+          } else {
+            moveRow(finalDrag.fromIndex, finalDrag.toIndex);
           }
-        ) })
+        }
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [colGrips, rowGrips, moveColumn, moveRow]
+  );
+  if (!editor || !tableInfo || colGrips.length === 0) return null;
+  const GRIP_SIZE = 20;
+  const GRIP_GAP = 4;
+  const gripsVisible = isHovering || !!dropdown;
+  const columnDropdownItems = [
+    {
+      label: "Toggle header column",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconTableColumn, { size: 16 }),
+      action: () => {
+        editor.chain().focus().toggleHeaderColumn().run();
+        setDropdown(null);
       }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(VideoBlockMenu, { editor })
-  ] });
-};
+    },
+    {
+      label: "Insert column before",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconColumnInsertLeft, { size: 16 }),
+      action: () => {
+        editor.chain().focus().addColumnBefore().run();
+        setDropdown(null);
+      },
+      separator: true
+    },
+    {
+      label: "Insert column after",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconColumnInsertRight, { size: 16 }),
+      action: () => {
+        editor.chain().focus().addColumnAfter().run();
+        setDropdown(null);
+      }
+    },
+    {
+      label: "Merge cells",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconArrowMerge, { size: 16 }),
+      action: () => {
+        editor.chain().focus().mergeCells().run();
+        setDropdown(null);
+      },
+      separator: true
+    },
+    {
+      label: "Split cell",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconArrowsSplit, { size: 16 }),
+      action: () => {
+        editor.chain().focus().splitCell().run();
+        setDropdown(null);
+      }
+    },
+    {
+      label: "Delete column",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconColumnRemove, { size: 16 }),
+      action: () => {
+        editor.chain().focus().deleteColumn().run();
+        setDropdown(null);
+      },
+      destructive: true,
+      separator: true
+    }
+  ];
+  const rowDropdownItems = [
+    {
+      label: "Toggle header row",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconTableRow, { size: 16 }),
+      action: () => {
+        editor.chain().focus().toggleHeaderRow().run();
+        setDropdown(null);
+      }
+    },
+    {
+      label: "Insert row above",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconRowInsertTop, { size: 16 }),
+      action: () => {
+        editor.chain().focus().addRowBefore().run();
+        setDropdown(null);
+      },
+      separator: true
+    },
+    {
+      label: "Insert row below",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconRowInsertBottom, { size: 16 }),
+      action: () => {
+        editor.chain().focus().addRowAfter().run();
+        setDropdown(null);
+      }
+    },
+    {
+      label: "Merge cells",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconArrowMerge, { size: 16 }),
+      action: () => {
+        editor.chain().focus().mergeCells().run();
+        setDropdown(null);
+      },
+      separator: true
+    },
+    {
+      label: "Split cell",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconArrowsSplit, { size: 16 }),
+      action: () => {
+        editor.chain().focus().splitCell().run();
+        setDropdown(null);
+      }
+    },
+    {
+      label: "Delete row",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconRowRemove, { size: 16 }),
+      action: () => {
+        editor.chain().focus().deleteRow().run();
+        setDropdown(null);
+      },
+      destructive: true,
+      separator: true
+    }
+  ];
+  const dropdownItems = dropdown?.type === "column" ? columnDropdownItems : rowDropdownItems;
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      colGrips.map((grip, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          type: "button",
+          className: `nph-table-grip nph-table-grip--col${gripsVisible ? " nph-table-grip--visible" : ""}${drag?.type === "column" && drag.fromIndex === i ? " nph-table-grip--dragging" : ""}`,
+          style: {
+            position: "fixed",
+            left: grip.left + grip.width / 2 - GRIP_SIZE / 2,
+            top: grip.top - GRIP_SIZE - GRIP_GAP,
+            width: GRIP_SIZE,
+            height: GRIP_SIZE,
+            cursor: "grab"
+          },
+          onMouseDown: (e) => handleGripDragStart("column", i, e),
+          onClick: (e) => handleColGripClick(i, e),
+          "aria-label": `Column ${i + 1} options`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconGripHorizontal, { size: 14 })
+        },
+        `col-${i}`
+      )),
+      rowGrips.map((grip, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          type: "button",
+          className: `nph-table-grip nph-table-grip--row${gripsVisible ? " nph-table-grip--visible" : ""}${drag?.type === "row" && drag.fromIndex === i ? " nph-table-grip--dragging" : ""}`,
+          style: {
+            position: "fixed",
+            left: grip.left - GRIP_SIZE - GRIP_GAP,
+            top: grip.top + grip.height / 2 - GRIP_SIZE / 2,
+            width: GRIP_SIZE,
+            height: GRIP_SIZE,
+            cursor: "grab"
+          },
+          onMouseDown: (e) => handleGripDragStart("row", i, e),
+          onClick: (e) => handleRowGripClick(i, e),
+          "aria-label": `Row ${i + 1} options`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconGripVertical, { size: 14 })
+        },
+        `row-${i}`
+      )),
+      tableRect && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: `nph-table-grip nph-table-grip--delete${gripsVisible ? " nph-table-grip--visible" : ""}`,
+          style: {
+            position: "fixed",
+            left: tableRect.left + tableRect.width / 2 - 60,
+            top: tableRect.bottom + GRIP_GAP,
+            width: 120,
+            height: 24
+          },
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            editor.chain().focus().deleteTable().run();
+          },
+          "aria-label": "Delete table",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconTableOff, { size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 12 }, children: "Delete table" })
+          ]
+        }
+      ),
+      dropdown && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "div",
+        {
+          ref: dropdownRef,
+          className: "nph-table-dropdown",
+          style: {
+            position: "fixed",
+            left: dropdown.x,
+            top: dropdown.y,
+            transform: dropdown.type === "column" ? "translateY(-100%)" : void 0
+          },
+          children: dropdownItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+            item.separator && i > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "nph-table-dropdown__separator" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: `nph-table-dropdown__item ${item.destructive ? "nph-table-dropdown__item--destructive" : ""}`,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: item.action,
+                children: [
+                  item.icon,
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: item.label })
+                ]
+              }
+            )
+          ] }, i))
+        }
+      ),
+      drag && drag.fromIndex !== drag.toIndex && tableRect && (drag.type === "column" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "div",
+        {
+          className: "nph-table-drop-indicator nph-table-drop-indicator--col",
+          style: {
+            position: "fixed",
+            left: drag.toIndex < colGrips.length ? colGrips[drag.toIndex].left - 1 : colGrips[colGrips.length - 1].left + colGrips[colGrips.length - 1].width,
+            top: tableRect.top,
+            width: 2,
+            height: tableRect.height
+          }
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "div",
+        {
+          className: "nph-table-drop-indicator nph-table-drop-indicator--row",
+          style: {
+            position: "fixed",
+            left: tableRect.left,
+            top: drag.toIndex < rowGrips.length ? rowGrips[drag.toIndex].top - 1 : rowGrips[rowGrips.length - 1].top + rowGrips[rowGrips.length - 1].height,
+            width: tableRect.width,
+            height: 2
+          }
+        }
+      ))
+    ] }),
+    document.body
+  );
+}
 
 // src/react/Editor.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-function Editor3({
+var import_react35 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function Editor5({
   content,
   className,
   editable = true,
   immediatelyRender = false,
   showTextMenu = true,
   showSlashMenu = true,
-  showImageMenu = true,
+  showImageMenu = false,
+  showDragHandle = true,
   extensions,
   bubbleMenuExtras,
   onUpdate,
@@ -2912,6 +3867,41 @@ function Editor3({
   slashCommand,
   placeholder
 }) {
+  const [actionMenuAnchor, setActionMenuAnchor] = (0, import_react35.useState)(null);
+  const [actionMenuEditor, setActionMenuEditor] = (0, import_react35.useState)(null);
+  const actionMenuRef = (0, import_react35.useRef)(null);
+  (0, import_react35.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 = (0, import_react35.useMemo)(
+    () => ({
+      onAddBlock: (editor) => {
+        const { state } = editor;
+        const { selection } = state;
+        const { $anchor } = selection;
+        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();
+        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: [],
@@ -2928,59 +3918,185 @@ function Editor3({
   };
   const textExtras = normalizeExtras(bubbleMenuExtras?.text);
   const imageExtras = normalizeExtras(bubbleMenuExtras?.image);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(EditorRoot, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    EditorContent,
-    {
-      onUpdate,
-      onCreate,
-      immediatelyRender,
-      editable,
-      content,
-      extensions: [
-        ...extension_kit_default({
-          uploadImage,
-          collaboration,
-          imageBlockView: ImageBlockView,
-          videoBlockView: VideoBlockView,
-          mention: mentionOptions,
-          reference: referenceOptions,
-          slashCommand,
-          placeholder
-        }),
-        ...extensions ?? []
-      ],
-      editorProps: {
-        attributes: {
-          class: "nph-editor max-w-none outline-none"
-        },
-        handleKeyDown: (view, event) => {
-          return !!handleCommandNavigation?.(event);
-        }
-      },
-      children: [
-        showTextMenu ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          TextMenu,
-          {
-            leadingExtras: textExtras.start,
-            trailingExtras: textExtras.end
+  const handleCloseActionMenu = (0, import_react35.useCallback)(() => {
+    setActionMenuAnchor(null);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EditorRoot, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      EditorContent,
+      {
+        onUpdate,
+        onCreate,
+        immediatelyRender,
+        editable,
+        content,
+        extensions: [
+          ...extension_kit_default({
+            uploadImage,
+            collaboration,
+            imageBlockView: ImageBlockView,
+            videoBlockView: VideoBlockView,
+            mention: mentionOptions,
+            reference: referenceOptions,
+            slashCommand,
+            dragHandle: enableDragHandle,
+            dragHandleCallbacks: enableDragHandle ? dragHandleCallbacks : void 0,
+            placeholder
+          }),
+          ...extensions ?? []
+        ],
+        editorProps: {
+          attributes: {
+            class: "nph-editor max-w-none outline-none"
+          },
+          handleKeyDown: (view, event) => {
+            return !!handleCommandNavigation?.(event);
           }
-        ) : null,
-        showImageMenu ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          ImageMenu,
+        },
+        children: [
+          showTextMenu ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            TextMenu,
+            {
+              leadingExtras: textExtras.start,
+              trailingExtras: textExtras.end
+            }
+          ) : null,
+          showImageMenu ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            ImageMenu,
+            {
+              leadingExtras: imageExtras.start,
+              trailingExtras: imageExtras.end
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LinkMenu, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableMenu, {}),
+          showSlashMenu ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SlashMenu, {}) : null
+        ]
+      }
+    ) }),
+    actionMenuAnchor && actionMenuEditor && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        ref: actionMenuRef,
+        style: {
+          position: "fixed",
+          zIndex: 1e4,
+          top: actionMenuAnchor.getBoundingClientRect().bottom + 4,
+          left: actionMenuAnchor.getBoundingClientRect().left
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          BlockActionMenu,
           {
-            leadingExtras: imageExtras.start,
-            trailingExtras: imageExtras.end
+            editor: actionMenuEditor,
+            onClose: handleCloseActionMenu
           }
-        ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LinkMenu, {}),
-        showSlashMenu ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SlashMenu, {}) : null
-      ]
+        )
+      }
+    )
+  ] });
+}
+
+// src/react/TableOfContents.tsx
+var import_react36 = require("@tiptap/react");
+var import_react37 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function TableOfContents({
+  className,
+  itemClassName,
+  activeClassName
+}) {
+  const { editor } = (0, import_react36.useCurrentEditor)();
+  const [activeId, setActiveId] = (0, import_react37.useState)(null);
+  const observerRef = (0, import_react37.useRef)(null);
+  const headings = (0, import_react36.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;
     }
-  ) }) });
+  });
+  (0, import_react37.useEffect)(() => {
+    if (!editor || !headings || headings.length === 0) return;
+    observerRef.current?.disconnect();
+    const callback = (entries) => {
+      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;
+    const editorEl = editor.view.dom;
+    headings.forEach((heading) => {
+      try {
+        const domNode = editor.view.nodeDOM(heading.pos);
+        if (domNode && domNode instanceof HTMLElement) {
+          domNode.setAttribute("data-toc-id", heading.id);
+          observer.observe(domNode);
+        }
+      } catch {
+      }
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [editor, headings]);
+  const handleClick = (0, import_react37.useCallback)(
+    (pos) => {
+      if (!editor) return;
+      editor.chain().focus().setTextSelection(pos + 1).run();
+      try {
+        const domNode = editor.view.nodeDOM(pos);
+        if (domNode && domNode instanceof HTMLElement) {
+          domNode.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+      } catch {
+      }
+    },
+    [editor]
+  );
+  if (!editor || !headings || headings.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.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 /* @__PURE__ */ (0, import_jsx_runtime22.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
+    );
+  }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Editor,
+  TableOfContents,
   TextMenu
 });
 //# sourceMappingURL=index.cjs.map