neuphlo-editor 2.1.1 → 2.3.0

package/dist/react/index.cjs

@@ -312,8 +312,6 @@ var ImageBlock = import_extension_image.Image.extend({
   addOptions() {
     return {
       ...this.parent?.(),
-      uploadImage: void 0,
-      browseAssets: void 0,
       inline: false
     };
   },
@@ -1361,10 +1359,11 @@ var VideoBlock = import_core5.Node.create({
     };
   },
   addNodeView() {
+    console.log("[VideoBlock] addNodeView called, options:", Object.keys(this.options), "hasNodeView:", !!this.options.nodeView);
     if (this.options.nodeView) {
       return (0, import_react11.ReactNodeViewRenderer)(this.options.nodeView);
     }
-    return null;
+    return void 0;
   }
 });
 
@@ -2486,6 +2485,7 @@ function ImageMenu({
 // src/react/menus/ImageBlock/ImageBlockView.tsx
 var import_react26 = require("@tiptap/react");
 var import_react27 = require("react");
+var import_icons_react9 = require("@tabler/icons-react");
 
 // src/react/menus/ImageBlock/ImageBlockMenu.tsx
 var import_state6 = require("@tiptap/pm/state");
@@ -2564,6 +2564,7 @@ var ImageBlockMenu = ({ editor, getPos, appendTo }) => {
       const { state } = ctx.editor;
       const { selection } = state;
       if (!ctx.editor.isEditable) return { isVisible: false, align: "center", width: 100 };
+      if (!ctx.editor.isFocused) return { isVisible: false, align: "center", width: 100 };
       const isNodeSel = selection instanceof import_state6.NodeSelection;
       const isThisNode = isNodeSel && selection.from === getPos();
       const visible = isThisNode;
@@ -2757,6 +2758,31 @@ var ImageUploader = ({ onUpload, editor }) => {
   if (loading) {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ImageBlockLoading, {});
   }
+  if (browseAssets) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        className: "nph-image-uploader nph-image-uploader--browse-only",
+        contentEditable: false,
+        onClick: () => browseAssets(onUpload),
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            browseAssets(onUpload);
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "nph-image-uploader__browse-cta", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "nph-image-uploader__browse-icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_react8.IconPhoto, { size: 28 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "nph-image-uploader__browse-text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "nph-image-uploader__browse-title", children: "Choose from assets" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "nph-image-uploader__browse-subtitle", children: "Select an image from your library" })
+          ] })
+        ] })
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
@@ -2769,34 +2795,19 @@ var ImageUploader = ({ onUpload, editor }) => {
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_react8.IconPhoto, { size: 48, className: "nph-image-uploader__icon" }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "nph-image-uploader__content", children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "nph-image-uploader__text", children: draggedInside ? "Drop image here" : "Drag and drop or" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "nph-image-uploader__actions", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-              "button",
-              {
-                type: "button",
-                disabled: draggedInside,
-                onClick: handleUploadClick,
-                className: "nph-btn nph-btn-ghost nph-btn-sm nph-image-uploader__button",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_react8.IconUpload, { size: 16 }),
-                  "Upload an image"
-                ]
-              }
-            ),
-            browseAssets && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-              "button",
-              {
-                type: "button",
-                disabled: draggedInside,
-                onClick: () => browseAssets(onUpload),
-                className: "nph-btn nph-btn-ghost nph-btn-sm nph-image-uploader__button",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_react8.IconPhoto, { size: 16 }),
-                  "Browse assets"
-                ]
-              }
-            )
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "nph-image-uploader__actions", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "button",
+            {
+              type: "button",
+              disabled: draggedInside,
+              onClick: handleUploadClick,
+              className: "nph-btn nph-btn-ghost nph-btn-sm nph-image-uploader__button",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_react8.IconUpload, { size: 16 }),
+                "Upload an image"
+              ]
+            }
+          ) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "input",
@@ -2884,6 +2895,7 @@ var import_jsx_runtime16 = require("react/jsx-runtime");
 var ImageBlockView = (props) => {
   const { editor, getPos, node, updateAttributes } = props;
   const imageWrapperRef = (0, import_react27.useRef)(null);
+  const [imageError, setImageError] = (0, import_react27.useState)(false);
   const { src, width, align, alt, loading } = node.attrs;
   const handleUpload = (0, import_react27.useCallback)(
     (url) => {
@@ -2923,6 +2935,15 @@ var ImageBlockView = (props) => {
   if (loading) {
     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, {}) }) });
   }
+  if (imageError) {
+    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.jsxs)("div", { className: "nph-image-block-error", onClick, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_react9.IconPhotoOff, { size: 32 }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Image could not be loaded" })
+      ] }),
+      editor.isEditable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageBlockMenu, { editor, getPos, appendTo: imageWrapperRef })
+    ] }) });
+  }
   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: [
     editor.isEditable ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageResizeHandle, { onResize: handleResize, currentWidth: width, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "img",
@@ -2930,6 +2951,7 @@ var ImageBlockView = (props) => {
         src,
         alt: alt || "",
         onClick,
+        onError: () => setImageError(true),
         className: "nph-image-block"
       }
     ) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -2937,6 +2959,7 @@ var ImageBlockView = (props) => {
       {
         src,
         alt: alt || "",
+        onError: () => setImageError(true),
         className: "nph-image-block"
       }
     ),
@@ -2953,7 +2976,7 @@ var import_react31 = 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_icons_react10 = require("@tabler/icons-react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var VideoBlockMenu = ({ editor, getPos }) => {
   const menuRef = (0, import_react29.useRef)(null);
@@ -3017,7 +3040,7 @@ var VideoBlockMenu = ({ editor, getPos }) => {
             title: "Align left",
             onMouseDown: (e) => e.preventDefault(),
             onClick: onAlignLeft,
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react9.IconAlignLeft, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react10.IconAlignLeft, { size: 16 })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -3028,7 +3051,7 @@ var VideoBlockMenu = ({ editor, getPos }) => {
             title: "Align center",
             onMouseDown: (e) => e.preventDefault(),
             onClick: onAlignCenter,
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react9.IconAlignCenter, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react10.IconAlignCenter, { size: 16 })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -3039,7 +3062,7 @@ var VideoBlockMenu = ({ editor, getPos }) => {
             title: "Align right",
             onMouseDown: (e) => e.preventDefault(),
             onClick: onAlignRight,
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react9.IconAlignRight, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react10.IconAlignRight, { size: 16 })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -3065,7 +3088,7 @@ var VideoBlockMenu = ({ editor, getPos }) => {
             title: "Remove video",
             onMouseDown: (e) => e.preventDefault(),
             onClick: onRemove,
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react9.IconTrash, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react10.IconTrash, { size: 16 })
           }
         )
       ]
@@ -3074,19 +3097,26 @@ var VideoBlockMenu = ({ editor, getPos }) => {
 };
 
 // src/react/menus/VideoBlock/VideoBlockView.tsx
-var import_icons_react10 = require("@tabler/icons-react");
+var import_icons_react11 = require("@tabler/icons-react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function toEmbedUrl(url) {
+  if (url.includes("/embed/") || url.includes("player.vimeo.com") || url.includes("loom.com/embed")) {
+    return url;
+  }
   const ytMatch = url.match(
-    /(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/
+    /(?:youtube\.com\/(?:watch\?v=|shorts\/)|youtu\.be\/)([\w-]+)/
   );
   if (ytMatch) {
     return `https://www.youtube.com/embed/${ytMatch[1]}`;
   }
-  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
+  const vimeoMatch = url.match(/vimeo\.com\/(?:channels\/[\w-]+\/)?(\d+)/);
   if (vimeoMatch) {
     return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
   }
+  const loomMatch = url.match(/loom\.com\/share\/([\w-]+)/);
+  if (loomMatch) {
+    return `https://www.loom.com/embed/${loomMatch[1]}`;
+  }
   return url;
 }
 var VideoBlockView = (props) => {
@@ -3094,6 +3124,7 @@ var VideoBlockView = (props) => {
   const wrapperRef = (0, import_react31.useRef)(null);
   const { src, width, align } = node.attrs;
   const [inputUrl, setInputUrl] = (0, import_react31.useState)("");
+  const [videoError, setVideoError] = (0, import_react31.useState)(false);
   const isSelected = (0, import_react30.useEditorState)({
     editor,
     selector: (ctx) => {
@@ -3121,8 +3152,8 @@ var VideoBlockView = (props) => {
   }, [getPos, editor.commands]);
   const getWrapperStyle = () => {
     const baseStyle = {
-      width: "fit-content",
-      maxWidth: width || "100%"
+      width: width || "100%",
+      maxWidth: "100%"
     };
     if (align === "left") {
       return { ...baseStyle, marginLeft: 0, marginRight: "auto" };
@@ -3134,18 +3165,23 @@ var VideoBlockView = (props) => {
   };
   if (!src || src === "") {
     if (!editor.isEditable) return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react30.NodeViewWrapper, {});
-    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: [
+    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-placeholder", onClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "nph-video-placeholder__icon", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons_react11.IconVideo, { size: 28, stroke: 1.5 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "2px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: "14px", fontWeight: 600, lineHeight: "20px" }, children: "Add a video" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: "13px", opacity: 0.5, lineHeight: "18px" }, children: "Paste a URL to embed" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "nph-video-placeholder__input", children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "input",
           {
             type: "text",
             className: "nph-video-input__field",
-            placeholder: "Paste a YouTube, Vimeo, or video URL...",
+            placeholder: "YouTube, Vimeo, or Loom URL...",
             value: inputUrl,
             onChange: (e) => setInputUrl(e.target.value),
-            onKeyDown: handleKeyDown
+            onKeyDown: handleKeyDown,
+            onClick: (e) => e.stopPropagation()
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -3153,7 +3189,10 @@ var VideoBlockView = (props) => {
           {
             type: "button",
             className: "nph-video-input__button",
-            onClick: handleEmbed,
+            onClick: (e) => {
+              e.stopPropagation();
+              handleEmbed();
+            },
             disabled: !inputUrl.trim(),
             children: "Embed"
           }
@@ -3161,6 +3200,16 @@ var VideoBlockView = (props) => {
       ] })
     ] }) }) });
   }
+  if (videoError) {
+    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-error", onClick, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons_react11.IconVideoOff, { size: 32 }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "Video could not be loaded" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "nph-video-block-error__url", children: src })
+      ] }),
+      editor.isEditable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VideoBlockMenu, { editor, getPos })
+    ] }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react30.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
@@ -3175,7 +3224,8 @@ var VideoBlockView = (props) => {
               src,
               className: "nph-video-block__iframe",
               allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-              allowFullScreen: true
+              allowFullScreen: true,
+              onError: () => setVideoError(true)
             }
           ),
           !isSelected && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -3193,7 +3243,7 @@ var VideoBlockView = (props) => {
 };
 
 // src/react/menus/DragHandle/BlockActionMenu.tsx
-var import_icons_react11 = require("@tabler/icons-react");
+var import_icons_react12 = require("@tabler/icons-react");
 var import_react32 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function BlockActionMenu({ editor, onClose }) {
@@ -3296,7 +3346,7 @@ function BlockActionMenu({ editor, onClose }) {
         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)(import_icons_react12.IconTrash, { size: 16 }),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Delete" })
         ]
       }
@@ -3309,7 +3359,7 @@ function BlockActionMenu({ editor, onClose }) {
         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)(import_icons_react12.IconCopy, { size: 16 }),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Duplicate" })
         ]
       }
@@ -3322,7 +3372,7 @@ function BlockActionMenu({ editor, onClose }) {
         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)(import_icons_react12.IconClipboard, { size: 16 }),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Copy to clipboard" })
         ]
       }
@@ -3335,7 +3385,7 @@ function BlockActionMenu({ editor, onClose }) {
         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)(import_icons_react12.IconArrowUp, { size: 16 }),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Move up" })
         ]
       }
@@ -3348,7 +3398,7 @@ function BlockActionMenu({ editor, onClose }) {
         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)(import_icons_react12.IconArrowDown, { size: 16 }),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Move down" })
         ]
       }
@@ -3358,7 +3408,7 @@ function BlockActionMenu({ editor, onClose }) {
 
 // src/react/menus/TableMenu.tsx
 var import_react33 = require("@tiptap/react");
-var import_icons_react12 = require("@tabler/icons-react");
+var import_icons_react13 = require("@tabler/icons-react");
 var import_react34 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -3643,7 +3693,7 @@ function TableMenu({ className: _className }) {
   const columnDropdownItems = [
     {
       label: "Toggle header column",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconTableColumn, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconTableColumn, { size: 16 }),
       action: () => {
         editor.chain().focus().toggleHeaderColumn().run();
         setDropdown(null);
@@ -3651,7 +3701,7 @@ function TableMenu({ className: _className }) {
     },
     {
       label: "Insert column before",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconColumnInsertLeft, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconColumnInsertLeft, { size: 16 }),
       action: () => {
         editor.chain().focus().addColumnBefore().run();
         setDropdown(null);
@@ -3660,7 +3710,7 @@ function TableMenu({ className: _className }) {
     },
     {
       label: "Insert column after",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconColumnInsertRight, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconColumnInsertRight, { size: 16 }),
       action: () => {
         editor.chain().focus().addColumnAfter().run();
         setDropdown(null);
@@ -3668,7 +3718,7 @@ function TableMenu({ className: _className }) {
     },
     {
       label: "Merge cells",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconArrowMerge, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconArrowMerge, { size: 16 }),
       action: () => {
         editor.chain().focus().mergeCells().run();
         setDropdown(null);
@@ -3677,7 +3727,7 @@ function TableMenu({ className: _className }) {
     },
     {
       label: "Split cell",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconArrowsSplit, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconArrowsSplit, { size: 16 }),
       action: () => {
         editor.chain().focus().splitCell().run();
         setDropdown(null);
@@ -3685,7 +3735,7 @@ function TableMenu({ className: _className }) {
     },
     {
       label: "Delete column",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconColumnRemove, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconColumnRemove, { size: 16 }),
       action: () => {
         editor.chain().focus().deleteColumn().run();
         setDropdown(null);
@@ -3697,7 +3747,7 @@ function TableMenu({ className: _className }) {
   const rowDropdownItems = [
     {
       label: "Toggle header row",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconTableRow, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconTableRow, { size: 16 }),
       action: () => {
         editor.chain().focus().toggleHeaderRow().run();
         setDropdown(null);
@@ -3705,7 +3755,7 @@ function TableMenu({ className: _className }) {
     },
     {
       label: "Insert row above",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconRowInsertTop, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconRowInsertTop, { size: 16 }),
       action: () => {
         editor.chain().focus().addRowBefore().run();
         setDropdown(null);
@@ -3714,7 +3764,7 @@ function TableMenu({ className: _className }) {
     },
     {
       label: "Insert row below",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconRowInsertBottom, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconRowInsertBottom, { size: 16 }),
       action: () => {
         editor.chain().focus().addRowAfter().run();
         setDropdown(null);
@@ -3722,7 +3772,7 @@ function TableMenu({ className: _className }) {
     },
     {
       label: "Merge cells",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconArrowMerge, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconArrowMerge, { size: 16 }),
       action: () => {
         editor.chain().focus().mergeCells().run();
         setDropdown(null);
@@ -3731,7 +3781,7 @@ function TableMenu({ className: _className }) {
     },
     {
       label: "Split cell",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconArrowsSplit, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconArrowsSplit, { size: 16 }),
       action: () => {
         editor.chain().focus().splitCell().run();
         setDropdown(null);
@@ -3739,7 +3789,7 @@ function TableMenu({ className: _className }) {
     },
     {
       label: "Delete row",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconRowRemove, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconRowRemove, { size: 16 }),
       action: () => {
         editor.chain().focus().deleteRow().run();
         setDropdown(null);
@@ -3767,7 +3817,7 @@ function TableMenu({ className: _className }) {
           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 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconGripHorizontal, { size: 14 })
         },
         `col-${i}`
       )),
@@ -3787,7 +3837,7 @@ function TableMenu({ className: _className }) {
           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 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconGripVertical, { size: 14 })
         },
         `row-${i}`
       )),
@@ -3809,7 +3859,7 @@ function TableMenu({ className: _className }) {
           },
           "aria-label": "Delete table",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react12.IconTableOff, { size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react13.IconTableOff, { size: 14 }),
             /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 12 }, children: "Delete table" })
           ]
         }