neuphlo-editor 1.8.2 → 2.0.0

package/dist/react/index.js

@@ -1,23 +1,30 @@
 import {
   CodeBlock,
   Command,
+  DragHandle,
   EditorCommand,
-  EditorCommandEmpty,
   EditorCommandItem,
   EditorCommandList,
   EditorContent,
   EditorRoot,
   ImageBlock,
   Link,
+  MarkdownPaste,
   Placeholder,
   StarterKit,
+  TableKit,
   createMentionExtension,
   handleCommandNavigation,
-  renderItems
-} from "../chunk-4MV3UUZN.js";
+  novelStore,
+  queryAtom,
+  setDragHandleCallbacks,
+  store_exports
+} from "../chunk-457ETWB6.js";
 
 // src/headless/extensions/extension-kit.ts
 import Collaboration from "@tiptap/extension-collaboration";
+import CollaborationCaret from "@tiptap/extension-collaboration-caret";
+import Underline from "@tiptap/extension-underline";
 
 // src/headless/extensions/VideoBlock/VideoBlock.ts
 import { mergeAttributes, Node } from "@tiptap/core";
@@ -100,6 +107,7 @@ var ExtensionKit = (options) => {
     StarterKit.configure({ codeBlock: false, link: false }),
     CodeBlock,
     Link,
+    Underline,
     ImageBlock.configure({
       uploadImage: options?.uploadImage,
       nodeView: options?.imageBlockView
@@ -118,14 +126,29 @@ var ExtensionKit = (options) => {
         return enableSlashCommand ? "Press '/' for commands" : "";
       },
       includeChildren: true
-    })
+    }),
+    MarkdownPaste
   ];
+  if (options?.table !== false) {
+    extensions.push(
+      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(
       Command.configure({
         suggestion: {
           char: "/",
-          render: renderItems,
           allowSpaces: true,
           allowedPrefixes: null
         }
@@ -151,18 +174,45 @@ var ExtensionKit = (options) => {
         field: options.collaboration.field
       })
     );
+    if (options.collaboration.provider && options.collaboration.user) {
+      extensions.push(
+        CollaborationCaret.configure({
+          provider: options.collaboration.provider,
+          user: options.collaboration.user,
+          render: (user) => {
+            const cursor = document.createElement("span");
+            cursor.classList.add("nph-collab-caret");
+            cursor.setAttribute("style", `border-color: ${user.color || "#3b82f6"}`);
+            const label = document.createElement("div");
+            label.classList.add("nph-collab-caret__label");
+            label.setAttribute("style", `background-color: ${user.color || "#3b82f6"}`);
+            label.insertBefore(document.createTextNode(user.name || "Anonymous"), null);
+            cursor.insertBefore(label, null);
+            return cursor;
+          },
+          selectionRender: (user) => ({
+            nodeName: "span",
+            class: "nph-collab-selection",
+            style: `background-color: ${user.color || "#3b82f6"}20`
+          })
+        })
+      );
+    }
   }
   return extensions;
 };
 var extension_kit_default = ExtensionKit;
 
 // src/react/menus/TextMenu.tsx
+import { NodeSelection } from "@tiptap/pm/state";
 import { useCurrentEditor, useEditorState } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import {
   IconBold,
   IconItalic,
+  IconUnderline,
   IconStrikethrough,
+  IconCode as IconCode2,
   IconArrowBackUp,
   IconLink,
   IconCheck,
@@ -435,6 +485,9 @@ function MenuList({
 
 // src/react/menus/TextMenu.tsx
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Separator() {
+  return /* @__PURE__ */ jsx2("div", { className: "nph-bubble-separator" });
+}
 function TextMenu({
   className,
   leadingExtras,
@@ -451,6 +504,7 @@ function TextMenu({
       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"),
@@ -496,6 +550,7 @@ function TextMenu({
     }
     return has;
   };
+  const isInCode = editorState.isCode || editorState.isCodeBlock;
   return /* @__PURE__ */ jsx2(
     BubbleMenu,
     {
@@ -504,7 +559,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 NodeSelection) return false;
         if (from === to) return false;
         if (e.isActive("link")) return false;
         let hasImage = false;
@@ -520,6 +575,7 @@ function TextMenu({
       children: /* @__PURE__ */ jsxs2("div", { className: className ? `bubble-menu ${className}` : "bubble-menu", children: [
         leadingExtras && editor ? leadingExtras.map((renderExtra, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderExtra(editor) }, `leading-extra-${index}`)) : null,
         /* @__PURE__ */ jsx2(MenuList, { editor }),
+        /* @__PURE__ */ jsx2(Separator, {}),
         /* @__PURE__ */ jsx2(
           "button",
           {
@@ -527,8 +583,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__ */ jsx2(IconBold, { size: 16 })
@@ -541,13 +597,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__ */ jsx2(IconItalic, { size: 16 })
           }
         ),
+        /* @__PURE__ */ jsx2(
+          "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__ */ jsx2(IconUnderline, { size: 16 })
+          }
+        ),
         /* @__PURE__ */ jsx2(
           "button",
           {
@@ -555,13 +625,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__ */ jsx2(IconStrikethrough, { size: 16 })
           }
         ),
+        /* @__PURE__ */ jsx2(
+          "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__ */ jsx2(IconCode2, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx2(Separator, {}),
         !isAddingLink ? /* @__PURE__ */ jsx2(
           "button",
           {
@@ -569,8 +654,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__ */ jsx2(IconLink, { size: 16 })
@@ -632,20 +717,23 @@ function TextMenu({
         (() => {
           const hasInlineMarks = hasAnyMarksInSelection();
           const isPlainParagraph = editorState.isParagraph && !editorState.isHeading && !editorState.isList && !editorState.isBlockquote && !editorState.isCodeBlock && !hasInlineMarks;
-          return /* @__PURE__ */ jsx2(
-            "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__ */ jsx2(IconArrowBackUp, { size: 16 })
-            }
-          );
+          return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            /* @__PURE__ */ jsx2(Separator, {}),
+            /* @__PURE__ */ jsx2(
+              "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__ */ jsx2(IconArrowBackUp, { size: 16 })
+              }
+            )
+          ] });
         })(),
         trailingExtras && editor ? trailingExtras.map((renderExtra, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderExtra(editor) }, `trailing-extra-${index}`)) : null
       ] })
@@ -655,10 +743,9 @@ function TextMenu({
 
 // src/react/menus/SlashMenu.tsx
 import { useCurrentEditor as useCurrentEditor2 } from "@tiptap/react";
+import { useAtomValue } from "jotai";
 import {
-  IconBold as IconBold2,
-  IconItalic as IconItalic2,
-  IconStrikethrough as IconStrikethrough2,
+  IconTypography as IconTypography2,
   IconH1 as IconH12,
   IconH2 as IconH22,
   IconH3 as IconH32,
@@ -666,323 +753,182 @@ import {
   IconList as IconList2,
   IconListNumbers as IconListNumbers2,
   IconBlockquote as IconBlockquote2,
-  IconCode as IconCode2,
+  IconCode as IconCode3,
   IconSourceCode as IconSourceCode2,
   IconPhoto,
-  IconVideo
+  IconVideo,
+  IconMinus,
+  IconTable,
+  IconListCheck
 } from "@tabler/icons-react";
+import { useMemo } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SLASH_COMMANDS = [
+  {
+    group: "Format",
+    items: [
+      {
+        value: "paragraph text",
+        label: "Paragraph",
+        description: "Plain text block",
+        icon: IconTypography2,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).setParagraph().run()
+      },
+      {
+        value: "heading1 h1",
+        label: "Heading 1",
+        description: "Large section heading",
+        icon: IconH12,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 1 }).run()
+      },
+      {
+        value: "heading2 h2",
+        label: "Heading 2",
+        description: "Medium section heading",
+        icon: IconH22,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 2 }).run()
+      },
+      {
+        value: "heading3 h3",
+        label: "Heading 3",
+        description: "Small section heading",
+        icon: IconH32,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 3 }).run()
+      },
+      {
+        value: "heading4 h4",
+        label: "Heading 4",
+        description: "Subsection heading",
+        icon: IconH42,
+        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: IconList2,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleBulletList().run()
+      },
+      {
+        value: "ordered list ol numbered",
+        label: "Numbered List",
+        description: "Ordered list of items",
+        icon: IconListNumbers2,
+        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: IconListCheck,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleTaskList().run()
+      },
+      {
+        value: "quote blockquote",
+        label: "Blockquote",
+        description: "Highlight a quote or excerpt",
+        icon: IconBlockquote2,
+        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: 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: 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: 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: IconSourceCode2,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
+      },
+      {
+        value: "code inline",
+        label: "Inline Code",
+        description: "Mark text as inline code",
+        icon: IconCode3,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCode().run()
+      },
+      {
+        value: "divider horizontal rule separator",
+        label: "Divider",
+        description: "Horizontal separator line",
+        icon: IconMinus,
+        onCommand: ({ editor, range }) => editor.chain().focus().deleteRange(range).setHorizontalRule().run()
+      }
+    ]
+  }
+];
 function SlashMenu({ className }) {
   const { editor } = useCurrentEditor2();
+  const query = useAtomValue(queryAtom, { store: novelStore });
+  const filteredGroups = 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__ */ jsx3(EditorCommand, { className: className ?? "nph-command", children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx3(EditorCommand, { className: className ?? "nph-command", children: /* @__PURE__ */ jsx3(
     EditorCommandList,
     {
       className: "nph-command__list",
       style: { display: "flex", flexDirection: "column", gap: 2 },
-      children: [
-        /* @__PURE__ */ jsx3(EditorCommandEmpty, { style: { padding: "8px 12px", fontSize: 14 }, children: "No commands found" }),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "bold",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleBold().run(),
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconBold2, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Bold" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "italic",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleItalic().run(),
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconItalic2, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Italic" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "strike",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleStrike().run(),
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconStrikethrough2, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Strike" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "heading1 h1",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleHeading({ level: 1 }).run(),
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconH12, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Heading 1" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "heading2 h2",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleHeading({ level: 2 }).run(),
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconH22, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Heading 2" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "heading3 h3",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleHeading({ level: 3 }).run(),
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconH32, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Heading 3" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "heading4 h4",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleHeading({ level: 4 }).run(),
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconH42, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Heading 4" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "bullet list ul",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleBulletList().run(),
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconList2, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Bullet list" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "ordered list ol",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleOrderedList().run(),
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconListNumbers2, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Ordered list" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "quote blockquote",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleBlockquote().run(),
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconBlockquote2, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Quote" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "code inline",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleCode().run(),
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconCode2, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Code" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "code block codeblock",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => editor2.chain().focus().deleteRange(range).toggleCodeBlock().run(),
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconSourceCode2, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Code Block" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          EditorCommandItem,
-          {
-            value: "image photo picture block",
-            className: "nph-command__item",
-            onCommand: ({
-              editor: editor2,
-              range
-            }) => {
-              ;
-              editor2.chain().focus().deleteRange(range).setImageBlock({ src: "" }).run();
-            },
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconPhoto, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Image" })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          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__ */ jsx3("div", { style: { padding: "8px 12px", fontSize: 14, color: "var(--muted-foreground, #6b7280)" }, children: "No commands found" }) : filteredGroups.map((group) => /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("div", { className: "nph-command__group-header", children: group.group }),
+        group.items.map((item) => {
+          const Icon = item.icon;
+          return /* @__PURE__ */ jsxs3(
+            EditorCommandItem,
+            {
+              value: item.value,
+              className: "nph-command__item",
+              onCommand: item.onCommand,
+              children: [
+                /* @__PURE__ */ jsx3("div", { className: "nph-command__item-icon", children: /* @__PURE__ */ jsx3(Icon, { size: 18 }) }),
+                /* @__PURE__ */ jsxs3("div", { className: "nph-command__item-content", children: [
+                  /* @__PURE__ */ jsx3("span", { className: "nph-command__item-title", children: item.label }),
+                  /* @__PURE__ */ jsx3("span", { className: "nph-command__item-description", children: item.description })
+                ] })
+              ]
             },
-            children: /* @__PURE__ */ jsxs3(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx3(IconVideo, { size: 16 }),
-                  /* @__PURE__ */ jsx3("span", { children: "Video" })
-                ]
-              }
-            )
-          }
-        )
-      ]
+            item.value
+          );
+        })
+      ] }, group.group))
     }
   ) });
 }
@@ -1139,6 +1085,7 @@ function LinkMenu() {
 }
 
 // src/react/menus/ImageMenu.tsx
+import { NodeSelection as NodeSelection2 } from "@tiptap/pm/state";
 import { useCurrentEditor as useCurrentEditor4 } from "@tiptap/react";
 import { BubbleMenu as BubbleMenu3 } from "@tiptap/react/menus";
 import {
@@ -1206,7 +1153,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 NodeSelection2;
         return isNodeSelection;
       },
       updateDelay: 0,
@@ -1319,11 +1266,12 @@ function ImageMenu({
 
 // src/react/menus/ImageBlock/ImageBlockView.tsx
 import { NodeViewWrapper } from "@tiptap/react";
-import { useCallback as useCallback6, useRef as useRef6 } from "react";
+import { useCallback as useCallback7, useRef as useRef7 } from "react";
 
 // src/react/menus/ImageBlock/ImageBlockMenu.tsx
-import { BubbleMenu as BubbleMenu4 } from "@tiptap/react/menus";
-import { useCallback as useCallback4, useRef as useRef4, useState as useState6, useEffect as useEffect6 } from "react";
+import { NodeSelection as NodeSelection3 } from "@tiptap/pm/state";
+import { useEditorState as useEditorState2 } from "@tiptap/react";
+import { useCallback as useCallback4, useRef as useRef4 } from "react";
 
 // src/react/menus/ImageBlock/ImageBlockWidth.tsx
 import { memo, useCallback as useCallback3, useEffect as useEffect5, useState as useState5 } from "react";
@@ -1393,57 +1341,28 @@ import {
   IconTrash as IconTrash3
 } from "@tabler/icons-react";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-var ImageBlockMenu = ({ editor, appendTo }) => {
+var ImageBlockMenu = ({ editor, getPos, appendTo }) => {
   const menuRef = useRef4(null);
-  const [align, setAlign] = useState6("center");
-  const [width, setWidth] = useState6(100);
-  useEffect6(() => {
-    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 = useCallback4(() => {
-    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();
+  const { isVisible, align, width } = useEditorState2({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return { isVisible: false, align: "center", width: 100 };
+      const { state } = ctx.editor;
+      const { selection } = state;
+      const isNodeSel = selection instanceof NodeSelection3;
+      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 = useCallback4(() => {
-    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 = useCallback4(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockAlign("left").run();
   }, [editor]);
@@ -1462,13 +1381,20 @@ var ImageBlockMenu = ({ editor, appendTo }) => {
   const onRemoveImage = useCallback4(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).deleteSelection().run();
   }, [editor]);
-  return /* @__PURE__ */ jsx7(
-    BubbleMenu4,
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxs7(
+    "div",
     {
-      editor,
-      shouldShow,
-      updateDelay: 0,
-      children: /* @__PURE__ */ jsxs7("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__ */ jsx7(
           "button",
           {
@@ -1528,14 +1454,14 @@ var ImageBlockMenu = ({ editor, appendTo }) => {
             children: /* @__PURE__ */ jsx7(IconTrash3, { size: 16 })
           }
         )
-      ] })
+      ]
     }
   );
 };
 
 // src/react/menus/ImageBlock/ImageUploader.tsx
 import { IconPhoto as IconPhoto2, IconUpload as IconUpload2 } from "@tabler/icons-react";
-import { useCallback as useCallback5, useRef as useRef5, useState as useState7 } from "react";
+import { useCallback as useCallback5, useRef as useRef5, useState as useState6 } from "react";
 
 // src/react/menus/ImageBlock/ImageBlockLoading.tsx
 import { IconLoader2 } from "@tabler/icons-react";
@@ -1553,8 +1479,8 @@ var ImageBlockLoading = () => {
 // src/react/menus/ImageBlock/ImageUploader.tsx
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var ImageUploader = ({ onUpload, editor }) => {
-  const [loading, setLoading] = useState7(false);
-  const [draggedInside, setDraggedInside] = useState7(false);
+  const [loading, setLoading] = useState6(false);
+  const [draggedInside, setDraggedInside] = useState6(false);
   const fileInputRef = useRef5(null);
   const uploadFile = useCallback5(
     async (file) => {
@@ -1656,21 +1582,93 @@ var ImageUploader = ({ onUpload, editor }) => {
   );
 };
 
-// src/react/menus/ImageBlock/ImageBlockView.tsx
+// src/react/menus/ImageBlock/ImageResizeHandle.tsx
+import { useCallback as useCallback6, useRef as useRef6, useState as useState7 } from "react";
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function ImageResizeHandle({
+  children,
+  onResize,
+  currentWidth
+}) {
+  const containerRef = useRef6(null);
+  const [isResizing, setIsResizing] = useState7(false);
+  const handleMouseDown = useCallback6(
+    (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__ */ jsxs10(
+    "div",
+    {
+      ref: containerRef,
+      className: `nph-resize-wrapper${isResizing ? " nph-resize-wrapper--active" : ""}`,
+      children: [
+        children,
+        /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: "nph-resize-handle nph-resize-handle--left",
+            onMouseDown: (e) => handleMouseDown(e, "left")
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: "nph-resize-handle nph-resize-handle--right",
+            onMouseDown: (e) => handleMouseDown(e, "right")
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/menus/ImageBlock/ImageBlockView.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var ImageBlockView = (props) => {
   const { editor, getPos, node, updateAttributes } = props;
-  const imageWrapperRef = useRef6(null);
+  const imageWrapperRef = useRef7(null);
   const { src, width, align, alt, loading } = node.attrs;
-  const handleUpload = useCallback6(
+  const handleUpload = useCallback7(
     (url) => {
       updateAttributes({ src: url, loading: false });
     },
     [updateAttributes]
   );
-  const onClick = useCallback6(() => {
+  const onClick = useCallback7(() => {
     editor.commands.setNodeSelection(getPos());
   }, [getPos, editor.commands]);
+  const handleResize = useCallback7(
+    (widthPercent) => {
+      updateAttributes({ width: `${widthPercent}%` });
+    },
+    [updateAttributes]
+  );
   const getWrapperStyle = () => {
     const baseStyle = {
       width: width || "100%",
@@ -1684,14 +1682,17 @@ var ImageBlockView = (props) => {
       return { ...baseStyle, marginLeft: "auto", marginRight: "auto" };
     }
   };
+  const getContentStyle = () => ({
+    position: "relative"
+  });
   if (!src || src === "") {
-    return /* @__PURE__ */ jsx10(NodeViewWrapper, { children: /* @__PURE__ */ jsx10("div", { style: getWrapperStyle(), children: /* @__PURE__ */ jsx10("div", { ref: imageWrapperRef, children: /* @__PURE__ */ jsx10(ImageUploader, { onUpload: handleUpload, editor }) }) }) });
+    return /* @__PURE__ */ jsx11(NodeViewWrapper, { style: { width: "100%", marginTop: "0.5rem", marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsx11("div", { ref: imageWrapperRef, children: /* @__PURE__ */ jsx11(ImageUploader, { onUpload: handleUpload, editor }) }) });
   }
   if (loading) {
-    return /* @__PURE__ */ jsx10(NodeViewWrapper, { children: /* @__PURE__ */ jsx10("div", { style: getWrapperStyle(), children: /* @__PURE__ */ jsx10("div", { ref: imageWrapperRef, children: /* @__PURE__ */ jsx10(ImageBlockLoading, {}) }) }) });
+    return /* @__PURE__ */ jsx11(NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ jsx11("div", { ref: imageWrapperRef, children: /* @__PURE__ */ jsx11(ImageBlockLoading, {}) }) });
   }
-  return /* @__PURE__ */ jsxs10(NodeViewWrapper, { children: [
-    /* @__PURE__ */ jsx10("div", { style: getWrapperStyle(), children: /* @__PURE__ */ jsx10("div", { contentEditable: false, ref: imageWrapperRef, style: { position: "relative" }, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ jsxs11("div", { contentEditable: false, ref: imageWrapperRef, style: getContentStyle(), children: [
+    /* @__PURE__ */ jsx11(ImageResizeHandle, { onResize: handleResize, currentWidth: width, children: /* @__PURE__ */ jsx11(
       "img",
       {
         src,
@@ -1699,81 +1700,81 @@ var ImageBlockView = (props) => {
         onClick,
         className: "nph-image-block"
       }
-    ) }) }),
-    /* @__PURE__ */ jsx10(ImageBlockMenu, { editor, appendTo: imageWrapperRef })
-  ] });
+    ) }),
+    /* @__PURE__ */ jsx11(ImageBlockMenu, { editor, getPos, appendTo: imageWrapperRef })
+  ] }) });
 };
 
 // src/react/menus/VideoBlock/VideoBlockView.tsx
-import { NodeViewWrapper as NodeViewWrapper2 } from "@tiptap/react";
-import { useCallback as useCallback8, useRef as useRef8, useState as useState9 } from "react";
+import { NodeSelection as NodeSelection5 } from "@tiptap/pm/state";
+import { NodeViewWrapper as NodeViewWrapper2, useEditorState as useEditorState4 } from "@tiptap/react";
+import { useCallback as useCallback9, useRef as useRef9, useState as useState8 } from "react";
 
 // src/react/menus/VideoBlock/VideoBlockMenu.tsx
-import { BubbleMenu as BubbleMenu5 } from "@tiptap/react/menus";
-import { useCallback as useCallback7, useRef as useRef7, useState as useState8, useEffect as useEffect7 } from "react";
+import { NodeSelection as NodeSelection4 } from "@tiptap/pm/state";
+import { useEditorState as useEditorState3 } from "@tiptap/react";
+import { useCallback as useCallback8, useRef as useRef8 } from "react";
 import {
   IconAlignLeft as IconAlignLeft3,
   IconAlignCenter as IconAlignCenter3,
   IconAlignRight as IconAlignRight3,
   IconTrash as IconTrash4
 } from "@tabler/icons-react";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-var VideoBlockMenu = ({ editor }) => {
-  const menuRef = useRef7(null);
-  const [align, setAlign] = useState8("center");
-  const [width, setWidth] = useState8(100);
-  useEffect7(() => {
-    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 = useCallback7(() => {
-    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 = useCallback7(() => {
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var VideoBlockMenu = ({ editor, getPos }) => {
+  const menuRef = useRef8(null);
+  const { isVisible, align, width } = useEditorState3({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return { isVisible: false, align: "center", width: 100 };
+      const { state } = ctx.editor;
+      const { selection } = state;
+      const isNodeSel = selection instanceof NodeSelection4;
+      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 = useCallback8(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockAlign("left").run();
   }, [editor]);
-  const onAlignCenter = useCallback7(() => {
+  const onAlignCenter = useCallback8(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockAlign("center").run();
   }, [editor]);
-  const onAlignRight = useCallback7(() => {
+  const onAlignRight = useCallback8(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockAlign("right").run();
   }, [editor]);
-  const onWidthChange = useCallback7(
+  const onWidthChange = useCallback8(
     (value) => {
       editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockWidth(value).run();
     },
     [editor]
   );
-  const onRemove = useCallback7(() => {
+  const onRemove = useCallback8(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).deleteSelection().run();
   }, [editor]);
-  return /* @__PURE__ */ jsx11(
-    BubbleMenu5,
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxs12(
+    "div",
     {
-      editor,
-      shouldShow,
-      updateDelay: 0,
-      children: /* @__PURE__ */ jsxs11("div", { className: "bubble-menu", ref: menuRef, children: [
-        /* @__PURE__ */ jsx11(
+      className: "bubble-menu",
+      ref: menuRef,
+      style: {
+        position: "absolute",
+        top: "-40px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: "var(--nph-z, 50)"
+      },
+      children: [
+        /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -1781,10 +1782,10 @@ var VideoBlockMenu = ({ editor }) => {
             title: "Align left",
             onMouseDown: (e) => e.preventDefault(),
             onClick: onAlignLeft,
-            children: /* @__PURE__ */ jsx11(IconAlignLeft3, { size: 16 })
+            children: /* @__PURE__ */ jsx12(IconAlignLeft3, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -1792,10 +1793,10 @@ var VideoBlockMenu = ({ editor }) => {
             title: "Align center",
             onMouseDown: (e) => e.preventDefault(),
             onClick: onAlignCenter,
-            children: /* @__PURE__ */ jsx11(IconAlignCenter3, { size: 16 })
+            children: /* @__PURE__ */ jsx12(IconAlignCenter3, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -1803,25 +1804,25 @@ var VideoBlockMenu = ({ editor }) => {
             title: "Align right",
             onMouseDown: (e) => e.preventDefault(),
             onClick: onAlignRight,
-            children: /* @__PURE__ */ jsx11(IconAlignRight3, { size: 16 })
+            children: /* @__PURE__ */ jsx12(IconAlignRight3, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "div",
           {
             className: "nph-link-popover__divider",
             style: { margin: "0 4px" }
           }
         ),
-        /* @__PURE__ */ jsx11(ImageBlockWidth, { onChange: onWidthChange, value: width }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(ImageBlockWidth, { onChange: onWidthChange, value: width }),
+        /* @__PURE__ */ jsx12(
           "div",
           {
             className: "nph-link-popover__divider",
             style: { margin: "0 4px" }
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -1829,17 +1830,17 @@ var VideoBlockMenu = ({ editor }) => {
             title: "Remove video",
             onMouseDown: (e) => e.preventDefault(),
             onClick: onRemove,
-            children: /* @__PURE__ */ jsx11(IconTrash4, { size: 16 })
+            children: /* @__PURE__ */ jsx12(IconTrash4, { size: 16 })
           }
         )
-      ] })
+      ]
     }
   );
 };
 
 // src/react/menus/VideoBlock/VideoBlockView.tsx
 import { IconVideo as IconVideo2 } from "@tabler/icons-react";
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function toEmbedUrl(url) {
   const ytMatch = url.match(
     /(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/
@@ -1855,15 +1856,23 @@ function toEmbedUrl(url) {
 }
 var VideoBlockView = (props) => {
   const { editor, getPos, node, updateAttributes } = props;
-  const wrapperRef = useRef8(null);
+  const wrapperRef = useRef9(null);
   const { src, width, align } = node.attrs;
-  const [inputUrl, setInputUrl] = useState9("");
-  const handleEmbed = useCallback8(() => {
+  const [inputUrl, setInputUrl] = useState8("");
+  const isSelected = useEditorState4({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return false;
+      const { selection } = ctx.editor.state;
+      return selection instanceof NodeSelection5 && selection.from === getPos();
+    }
+  });
+  const handleEmbed = useCallback9(() => {
     if (!inputUrl.trim()) return;
     const embedUrl = toEmbedUrl(inputUrl.trim());
     updateAttributes({ src: embedUrl });
   }, [inputUrl, updateAttributes]);
-  const handleKeyDown = useCallback8(
+  const handleKeyDown = useCallback9(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -1872,13 +1881,13 @@ var VideoBlockView = (props) => {
     },
     [handleEmbed]
   );
-  const onClick = useCallback8(() => {
+  const onClick = useCallback9(() => {
     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" };
@@ -1889,10 +1898,10 @@ var VideoBlockView = (props) => {
     }
   };
   if (!src || src === "") {
-    return /* @__PURE__ */ jsx12(NodeViewWrapper2, { children: /* @__PURE__ */ jsx12("div", { style: getWrapperStyle(), children: /* @__PURE__ */ jsxs12("div", { className: "nph-video-input", ref: wrapperRef, children: [
-      /* @__PURE__ */ jsx12("div", { className: "nph-video-input__icon", children: /* @__PURE__ */ jsx12(IconVideo2, { size: 24 }) }),
-      /* @__PURE__ */ jsxs12("div", { className: "nph-video-input__content", children: [
-        /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(NodeViewWrapper2, { style: getWrapperStyle(), children: /* @__PURE__ */ jsx13("div", { ref: wrapperRef, children: /* @__PURE__ */ jsxs13("div", { className: "nph-video-input", children: [
+      /* @__PURE__ */ jsx13("div", { className: "nph-video-input__icon", children: /* @__PURE__ */ jsx13(IconVideo2, { size: 24 }) }),
+      /* @__PURE__ */ jsxs13("div", { className: "nph-video-input__content", children: [
+        /* @__PURE__ */ jsx13(
           "input",
           {
             type: "text",
@@ -1903,7 +1912,7 @@ var VideoBlockView = (props) => {
             onKeyDown: handleKeyDown
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
@@ -1916,38 +1925,755 @@ var VideoBlockView = (props) => {
       ] })
     ] }) }) });
   }
-  return /* @__PURE__ */ jsxs12(NodeViewWrapper2, { children: [
-    /* @__PURE__ */ jsx12("div", { style: getWrapperStyle(), children: /* @__PURE__ */ jsx12(
-      "div",
+  return /* @__PURE__ */ jsx13(NodeViewWrapper2, { style: getWrapperStyle(), children: /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      contentEditable: false,
+      ref: wrapperRef,
+      style: { position: "relative" },
+      children: [
+        /* @__PURE__ */ jsxs13("div", { className: "nph-video-block", children: [
+          /* @__PURE__ */ jsx13(
+            "iframe",
+            {
+              src,
+              className: "nph-video-block__iframe",
+              allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+              allowFullScreen: true
+            }
+          ),
+          !isSelected && /* @__PURE__ */ jsx13(
+            "div",
+            {
+              className: "nph-video-block__overlay",
+              onClick
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx13(VideoBlockMenu, { editor, getPos })
+      ]
+    }
+  ) });
+};
+
+// src/react/menus/DragHandle/BlockActionMenu.tsx
+import {
+  IconCopy,
+  IconTrash as IconTrash5,
+  IconArrowUp,
+  IconArrowDown,
+  IconClipboard
+} from "@tabler/icons-react";
+import { useCallback as useCallback10 } from "react";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+function BlockActionMenu({ editor, onClose }) {
+  const executeAndClose = useCallback10(
+    (fn) => {
+      fn();
+      onClose();
+    },
+    [onClose]
+  );
+  const handleDelete = useCallback10(() => {
+    executeAndClose(() => {
+      editor.commands.deleteSelection();
+    });
+  }, [editor, executeAndClose]);
+  const handleDuplicate = useCallback10(() => {
+    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 = useCallback10(() => {
+    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 = useCallback10(() => {
+    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 = useCallback10(() => {
+    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__ */ jsx14("div", { className: "nph-block-action-menu nph-command", children: /* @__PURE__ */ jsxs14("div", { className: "nph-command__list", style: { maxHeight: "none" }, children: [
+    /* @__PURE__ */ jsxs14(
+      "button",
       {
-        contentEditable: false,
-        ref: wrapperRef,
-        style: { position: "relative" },
-        children: /* @__PURE__ */ jsx12("div", { className: "nph-video-block", onClick, children: /* @__PURE__ */ jsx12(
-          "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__ */ jsx14(IconTrash5, { size: 16 }),
+          /* @__PURE__ */ jsx14("span", { children: "Delete" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs14(
+      "button",
+      {
+        type: "button",
+        className: "nph-command__item",
+        onClick: handleDuplicate,
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsx14(IconCopy, { size: 16 }),
+          /* @__PURE__ */ jsx14("span", { children: "Duplicate" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs14(
+      "button",
+      {
+        type: "button",
+        className: "nph-command__item",
+        onClick: handleCopyToClipboard,
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsx14(IconClipboard, { size: 16 }),
+          /* @__PURE__ */ jsx14("span", { children: "Copy to clipboard" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs14(
+      "button",
+      {
+        type: "button",
+        className: "nph-command__item",
+        onClick: handleMoveUp,
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsx14(IconArrowUp, { size: 16 }),
+          /* @__PURE__ */ jsx14("span", { children: "Move up" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs14(
+      "button",
+      {
+        type: "button",
+        className: "nph-command__item",
+        onClick: handleMoveDown,
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsx14(IconArrowDown, { size: 16 }),
+          /* @__PURE__ */ jsx14("span", { children: "Move down" })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/react/menus/TableMenu.tsx
+import { useCurrentEditor as useCurrentEditor5, useEditorState as useEditorState5 } from "@tiptap/react";
+import {
+  IconRowInsertBottom,
+  IconColumnInsertRight,
+  IconColumnInsertLeft,
+  IconRowRemove,
+  IconColumnRemove,
+  IconTableRow,
+  IconTableColumn,
+  IconArrowMerge,
+  IconArrowsSplit,
+  IconTableOff,
+  IconGripVertical,
+  IconGripHorizontal,
+  IconRowInsertTop
+} from "@tabler/icons-react";
+import {
+  useState as useState9,
+  useEffect as useEffect6,
+  useRef as useRef10,
+  useCallback as useCallback11
+} from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+function TableMenu({ className: _className }) {
+  const { editor } = useCurrentEditor5();
+  const tableInfo = useEditorState5({
+    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] = useState9([]);
+  const [rowGrips, setRowGrips] = useState9([]);
+  const [dropdown, setDropdown] = useState9(null);
+  const [tableRect, setTableRect] = useState9(null);
+  const [isHovering, setIsHovering] = useState9(false);
+  const [drag, setDrag] = useState9(null);
+  const dropdownRef = useRef10(null);
+  const dragRef = useRef10(null);
+  const getTableDom = useCallback11(() => {
+    if (!editor || !tableInfo) return null;
+    return editor.view.nodeDOM(tableInfo.pos);
+  }, [editor, tableInfo]);
+  const measureGrips = useCallback11(() => {
+    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]);
+  useEffect6(() => {
+    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]);
+  useEffect6(() => {
+    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]);
+  useEffect6(() => {
+    if (!editor || !dropdown) return;
+    const handleTransaction = () => setDropdown(null);
+    editor.on("transaction", handleTransaction);
+    return () => {
+      editor.off("transaction", handleTransaction);
+    };
+  }, [editor, dropdown]);
+  const handleColGripClick = useCallback11(
+    (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 = useCallback11(
+    (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 = useCallback11(
+    (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 = useCallback11(
+    (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 = useCallback11(
+    (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__ */ jsx15(IconTableColumn, { size: 16 }),
+      action: () => {
+        editor.chain().focus().toggleHeaderColumn().run();
+        setDropdown(null);
       }
-    ) }),
-    /* @__PURE__ */ jsx12(VideoBlockMenu, { editor })
-  ] });
-};
+    },
+    {
+      label: "Insert column before",
+      icon: /* @__PURE__ */ jsx15(IconColumnInsertLeft, { size: 16 }),
+      action: () => {
+        editor.chain().focus().addColumnBefore().run();
+        setDropdown(null);
+      },
+      separator: true
+    },
+    {
+      label: "Insert column after",
+      icon: /* @__PURE__ */ jsx15(IconColumnInsertRight, { size: 16 }),
+      action: () => {
+        editor.chain().focus().addColumnAfter().run();
+        setDropdown(null);
+      }
+    },
+    {
+      label: "Merge cells",
+      icon: /* @__PURE__ */ jsx15(IconArrowMerge, { size: 16 }),
+      action: () => {
+        editor.chain().focus().mergeCells().run();
+        setDropdown(null);
+      },
+      separator: true
+    },
+    {
+      label: "Split cell",
+      icon: /* @__PURE__ */ jsx15(IconArrowsSplit, { size: 16 }),
+      action: () => {
+        editor.chain().focus().splitCell().run();
+        setDropdown(null);
+      }
+    },
+    {
+      label: "Delete column",
+      icon: /* @__PURE__ */ jsx15(IconColumnRemove, { size: 16 }),
+      action: () => {
+        editor.chain().focus().deleteColumn().run();
+        setDropdown(null);
+      },
+      destructive: true,
+      separator: true
+    }
+  ];
+  const rowDropdownItems = [
+    {
+      label: "Toggle header row",
+      icon: /* @__PURE__ */ jsx15(IconTableRow, { size: 16 }),
+      action: () => {
+        editor.chain().focus().toggleHeaderRow().run();
+        setDropdown(null);
+      }
+    },
+    {
+      label: "Insert row above",
+      icon: /* @__PURE__ */ jsx15(IconRowInsertTop, { size: 16 }),
+      action: () => {
+        editor.chain().focus().addRowBefore().run();
+        setDropdown(null);
+      },
+      separator: true
+    },
+    {
+      label: "Insert row below",
+      icon: /* @__PURE__ */ jsx15(IconRowInsertBottom, { size: 16 }),
+      action: () => {
+        editor.chain().focus().addRowAfter().run();
+        setDropdown(null);
+      }
+    },
+    {
+      label: "Merge cells",
+      icon: /* @__PURE__ */ jsx15(IconArrowMerge, { size: 16 }),
+      action: () => {
+        editor.chain().focus().mergeCells().run();
+        setDropdown(null);
+      },
+      separator: true
+    },
+    {
+      label: "Split cell",
+      icon: /* @__PURE__ */ jsx15(IconArrowsSplit, { size: 16 }),
+      action: () => {
+        editor.chain().focus().splitCell().run();
+        setDropdown(null);
+      }
+    },
+    {
+      label: "Delete row",
+      icon: /* @__PURE__ */ jsx15(IconRowRemove, { size: 16 }),
+      action: () => {
+        editor.chain().focus().deleteRow().run();
+        setDropdown(null);
+      },
+      destructive: true,
+      separator: true
+    }
+  ];
+  const dropdownItems = dropdown?.type === "column" ? columnDropdownItems : rowDropdownItems;
+  return createPortal(
+    /* @__PURE__ */ jsxs15(Fragment5, { children: [
+      colGrips.map((grip, i) => /* @__PURE__ */ jsx15(
+        "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__ */ jsx15(IconGripHorizontal, { size: 14 })
+        },
+        `col-${i}`
+      )),
+      rowGrips.map((grip, i) => /* @__PURE__ */ jsx15(
+        "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__ */ jsx15(IconGripVertical, { size: 14 })
+        },
+        `row-${i}`
+      )),
+      tableRect && /* @__PURE__ */ jsxs15(
+        "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__ */ jsx15(IconTableOff, { size: 14 }),
+            /* @__PURE__ */ jsx15("span", { style: { fontSize: 12 }, children: "Delete table" })
+          ]
+        }
+      ),
+      dropdown && /* @__PURE__ */ jsx15(
+        "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__ */ jsxs15("div", { children: [
+            item.separator && i > 0 && /* @__PURE__ */ jsx15("div", { className: "nph-table-dropdown__separator" }),
+            /* @__PURE__ */ jsxs15(
+              "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__ */ jsx15("span", { children: item.label })
+                ]
+              }
+            )
+          ] }, i))
+        }
+      ),
+      drag && drag.fromIndex !== drag.toIndex && tableRect && (drag.type === "column" ? /* @__PURE__ */ jsx15(
+        "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__ */ jsx15(
+        "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
-import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
-function Editor3({
+import { useMemo as useMemo2, useState as useState10, useCallback as useCallback12, useRef as useRef11, useEffect as useEffect7 } from "react";
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+function Editor5({
   content,
   className,
   editable = true,
   immediatelyRender = false,
   showTextMenu = true,
   showSlashMenu = true,
-  showImageMenu = true,
+  showImageMenu = false,
+  showDragHandle = true,
   extensions,
   bubbleMenuExtras,
   onUpdate,
@@ -1959,6 +2685,41 @@ function Editor3({
   slashCommand,
   placeholder
 }) {
+  const [actionMenuAnchor, setActionMenuAnchor] = useState10(null);
+  const [actionMenuEditor, setActionMenuEditor] = useState10(null);
+  const actionMenuRef = useRef11(null);
+  useEffect7(() => {
+    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 = useMemo2(
+    () => ({
+      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: [],
@@ -1975,58 +2736,184 @@ function Editor3({
   };
   const textExtras = normalizeExtras(bubbleMenuExtras?.text);
   const imageExtras = normalizeExtras(bubbleMenuExtras?.image);
-  return /* @__PURE__ */ jsx13("div", { className, children: /* @__PURE__ */ jsx13(EditorRoot, { children: /* @__PURE__ */ jsxs13(
-    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__ */ jsx13(
-          TextMenu,
-          {
-            leadingExtras: textExtras.start,
-            trailingExtras: textExtras.end
+  const handleCloseActionMenu = useCallback12(() => {
+    setActionMenuAnchor(null);
+  }, []);
+  return /* @__PURE__ */ jsxs16("div", { className, children: [
+    /* @__PURE__ */ jsx16(EditorRoot, { children: /* @__PURE__ */ jsxs16(
+      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__ */ jsx13(
-          ImageMenu,
+        },
+        children: [
+          showTextMenu ? /* @__PURE__ */ jsx16(
+            TextMenu,
+            {
+              leadingExtras: textExtras.start,
+              trailingExtras: textExtras.end
+            }
+          ) : null,
+          showImageMenu ? /* @__PURE__ */ jsx16(
+            ImageMenu,
+            {
+              leadingExtras: imageExtras.start,
+              trailingExtras: imageExtras.end
+            }
+          ) : null,
+          /* @__PURE__ */ jsx16(LinkMenu, {}),
+          /* @__PURE__ */ jsx16(TableMenu, {}),
+          showSlashMenu ? /* @__PURE__ */ jsx16(SlashMenu, {}) : null
+        ]
+      }
+    ) }),
+    actionMenuAnchor && actionMenuEditor && /* @__PURE__ */ jsx16(
+      "div",
+      {
+        ref: actionMenuRef,
+        style: {
+          position: "fixed",
+          zIndex: 1e4,
+          top: actionMenuAnchor.getBoundingClientRect().bottom + 4,
+          left: actionMenuAnchor.getBoundingClientRect().left
+        },
+        children: /* @__PURE__ */ jsx16(
+          BlockActionMenu,
           {
-            leadingExtras: imageExtras.start,
-            trailingExtras: imageExtras.end
+            editor: actionMenuEditor,
+            onClose: handleCloseActionMenu
           }
-        ) : null,
-        /* @__PURE__ */ jsx13(LinkMenu, {}),
-        showSlashMenu ? /* @__PURE__ */ jsx13(SlashMenu, {}) : null
-      ]
+        )
+      }
+    )
+  ] });
+}
+
+// src/react/TableOfContents.tsx
+import { useCurrentEditor as useCurrentEditor6, useEditorState as useEditorState6 } from "@tiptap/react";
+import { useCallback as useCallback13, useEffect as useEffect8, useRef as useRef12, useState as useState11 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function TableOfContents({
+  className,
+  itemClassName,
+  activeClassName
+}) {
+  const { editor } = useCurrentEditor6();
+  const [activeId, setActiveId] = useState11(null);
+  const observerRef = useRef12(null);
+  const headings = useEditorState6({
+    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;
     }
-  ) }) });
+  });
+  useEffect8(() => {
+    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 = useCallback13(
+    (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__ */ jsx17("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__ */ jsx17(
+      "button",
+      {
+        type: "button",
+        className: itemClass,
+        style: { paddingLeft: `${(heading.level - 1) * 12 + 8}px` },
+        onClick: () => handleClick(heading.pos),
+        title: heading.text,
+        children: heading.text || `Heading ${heading.level}`
+      },
+      heading.id
+    );
+  }) });
 }
 export {
-  Editor3 as Editor,
+  Editor5 as Editor,
+  TableOfContents,
   TextMenu
 };
 //# sourceMappingURL=index.js.map