neuphlo-editor 1.8.2 → 1.8.3

package/dist/react/index.cjs

@@ -31,7 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/react/index.ts
 var react_exports = {};
 __export(react_exports, {
-  Editor: () => Editor3,
+  Editor: () => Editor5,
   TextMenu: () => TextMenu
 });
 module.exports = __toCommonJS(react_exports);
@@ -1167,6 +1167,7 @@ var ExtensionKit = (options) => {
 var extension_kit_default = ExtensionKit;
 
 // src/react/menus/TextMenu.tsx
+var import_state3 = require("@tiptap/pm/state");
 var import_react14 = require("@tiptap/react");
 var import_menus = require("@tiptap/react/menus");
 var import_icons_react2 = require("@tabler/icons-react");
@@ -1494,7 +1495,7 @@ function TextMenu({
         if (e.isActive("imageBlock")) return false;
         if (e.isActive("videoBlock")) return false;
         const { selection } = state;
-        if (selection.constructor.name === "NodeSelection") return false;
+        if (selection instanceof import_state3.NodeSelection) return false;
         if (from === to) return false;
         if (e.isActive("link")) return false;
         let hasImage = false;
@@ -2108,6 +2109,7 @@ function LinkMenu() {
 }
 
 // src/react/menus/ImageMenu.tsx
+var import_state4 = require("@tiptap/pm/state");
 var import_react19 = require("@tiptap/react");
 var import_menus3 = require("@tiptap/react/menus");
 var import_icons_react5 = require("@tabler/icons-react");
@@ -2169,7 +2171,7 @@ function ImageMenu({
       shouldShow: ({ editor: e, state }) => {
         if (!e.isActive("imageBlock")) return false;
         const { selection } = state;
-        const isNodeSelection = selection.constructor.name === "NodeSelection";
+        const isNodeSelection = selection instanceof import_state4.NodeSelection;
         return isNodeSelection;
       },
       updateDelay: 0,
@@ -2281,12 +2283,13 @@ function ImageMenu({
 }
 
 // src/react/menus/ImageBlock/ImageBlockView.tsx
-var import_react24 = require("@tiptap/react");
-var import_react25 = require("react");
+var import_react25 = require("@tiptap/react");
+var import_react26 = require("react");
 
 // src/react/menus/ImageBlock/ImageBlockMenu.tsx
-var import_menus4 = require("@tiptap/react/menus");
-var import_react22 = require("react");
+var import_state5 = require("@tiptap/pm/state");
+var import_react22 = require("@tiptap/react");
+var import_react23 = require("react");
 
 // src/react/menus/ImageBlock/ImageBlockWidth.tsx
 var import_react21 = require("react");
@@ -2351,82 +2354,60 @@ ImageBlockWidth.displayName = "ImageBlockWidth";
 // src/react/menus/ImageBlock/ImageBlockMenu.tsx
 var import_icons_react6 = require("@tabler/icons-react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var ImageBlockMenu = ({ editor, appendTo }) => {
-  const menuRef = (0, import_react22.useRef)(null);
-  const [align, setAlign] = (0, import_react22.useState)("center");
-  const [width, setWidth] = (0, import_react22.useState)(100);
-  (0, import_react22.useEffect)(() => {
-    if (!editor) return;
-    const update = () => {
-      if (!editor.isActive("imageBlock")) return;
-      const attrs = editor.getAttributes("imageBlock");
-      setAlign(attrs.align || "center");
-      const widthStr = attrs.width || "100%";
-      setWidth(parseInt(widthStr) || 100);
-    };
-    update();
-    editor.on("selectionUpdate", update);
-    editor.on("transaction", update);
-    return () => {
-      editor.off("selectionUpdate", update);
-      editor.off("transaction", update);
-    };
-  }, [editor]);
-  const getReferenceClientRect = (0, import_react22.useCallback)(() => {
-    if (!editor) return new DOMRect(-1e3, -1e3, 0, 0);
-    const { view } = editor;
-    const { state } = view;
-    const { selection } = state;
-    const node = selection instanceof window.ProseMirror?.state?.NodeSelection ? selection.node : null;
-    if (node && node.type.name === "imageBlock") {
-      const nodePos = selection.from;
-      const domNode = view.nodeDOM(nodePos);
-      if (domNode && domNode instanceof HTMLElement) {
-        return domNode.getBoundingClientRect();
-      }
-    }
-    const imageBlockElements = document.querySelectorAll("[data-node-view-wrapper]");
-    for (const el of Array.from(imageBlockElements)) {
-      if (el.querySelector("img")) {
-        return el.getBoundingClientRect();
+var ImageBlockMenu = ({ editor, getPos, appendTo }) => {
+  const menuRef = (0, import_react23.useRef)(null);
+  const { isVisible, align, width } = (0, import_react22.useEditorState)({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return { isVisible: false, align: "center", width: 100 };
+      const { state } = ctx.editor;
+      const { selection } = state;
+      const isNodeSel = selection instanceof import_state5.NodeSelection;
+      const isThisNode = isNodeSel && selection.from === getPos();
+      const visible = isThisNode;
+      let currentAlign = "center";
+      let currentWidth = 100;
+      if (visible) {
+        const attrs = ctx.editor.getAttributes("imageBlock");
+        currentAlign = attrs.align || "center";
+        const widthStr = attrs.width || "100%";
+        currentWidth = parseInt(widthStr) || 100;
       }
+      return { isVisible: visible, align: currentAlign, width: currentWidth };
     }
-    return new DOMRect(-1e3, -1e3, 0, 0);
-  }, [editor]);
-  const shouldShow = (0, import_react22.useCallback)(() => {
-    if (!editor) return false;
-    const isActive = editor.isActive("imageBlock");
-    if (!isActive) return false;
-    const { state } = editor;
-    const { selection } = state;
-    const isNodeSelection = selection.constructor.name === "NodeSelection";
-    return isNodeSelection;
-  }, [editor]);
-  const onAlignImageLeft = (0, import_react22.useCallback)(() => {
+  });
+  const onAlignImageLeft = (0, import_react23.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockAlign("left").run();
   }, [editor]);
-  const onAlignImageCenter = (0, import_react22.useCallback)(() => {
+  const onAlignImageCenter = (0, import_react23.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockAlign("center").run();
   }, [editor]);
-  const onAlignImageRight = (0, import_react22.useCallback)(() => {
+  const onAlignImageRight = (0, import_react23.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockAlign("right").run();
   }, [editor]);
-  const onWidthChange = (0, import_react22.useCallback)(
+  const onWidthChange = (0, import_react23.useCallback)(
     (value) => {
       editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockWidth(value).run();
     },
     [editor]
   );
-  const onRemoveImage = (0, import_react22.useCallback)(() => {
+  const onRemoveImage = (0, import_react23.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).deleteSelection().run();
   }, [editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_menus4.BubbleMenu,
+  if (!isVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
     {
-      editor,
-      shouldShow,
-      updateDelay: 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "bubble-menu", ref: menuRef, children: [
+      className: "bubble-menu",
+      ref: menuRef,
+      style: {
+        position: "absolute",
+        top: "-40px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: "var(--nph-z, 50)"
+      },
+      children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
@@ -2486,14 +2467,14 @@ var ImageBlockMenu = ({ editor, appendTo }) => {
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons_react6.IconTrash, { size: 16 })
           }
         )
-      ] })
+      ]
     }
   );
 };
 
 // src/react/menus/ImageBlock/ImageUploader.tsx
 var import_icons_react8 = require("@tabler/icons-react");
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/react/menus/ImageBlock/ImageBlockLoading.tsx
 var import_icons_react7 = require("@tabler/icons-react");
@@ -2511,10 +2492,10 @@ var ImageBlockLoading = () => {
 // src/react/menus/ImageBlock/ImageUploader.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var ImageUploader = ({ onUpload, editor }) => {
-  const [loading, setLoading] = (0, import_react23.useState)(false);
-  const [draggedInside, setDraggedInside] = (0, import_react23.useState)(false);
-  const fileInputRef = (0, import_react23.useRef)(null);
-  const uploadFile = (0, import_react23.useCallback)(
+  const [loading, setLoading] = (0, import_react24.useState)(false);
+  const [draggedInside, setDraggedInside] = (0, import_react24.useState)(false);
+  const fileInputRef = (0, import_react24.useRef)(null);
+  const uploadFile = (0, import_react24.useCallback)(
     async (file) => {
       setLoading(true);
       try {
@@ -2536,10 +2517,10 @@ var ImageUploader = ({ onUpload, editor }) => {
     },
     [editor, onUpload]
   );
-  const handleUploadClick = (0, import_react23.useCallback)(() => {
+  const handleUploadClick = (0, import_react24.useCallback)(() => {
     fileInputRef.current?.click();
   }, []);
-  const onFileChange = (0, import_react23.useCallback)(
+  const onFileChange = (0, import_react24.useCallback)(
     (e) => {
       const file = e.target.files?.[0];
       if (file) {
@@ -2548,7 +2529,7 @@ var ImageUploader = ({ onUpload, editor }) => {
     },
     [uploadFile]
   );
-  const onDrop = (0, import_react23.useCallback)(
+  const onDrop = (0, import_react24.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -2560,12 +2541,12 @@ var ImageUploader = ({ onUpload, editor }) => {
     },
     [uploadFile]
   );
-  const onDragEnter = (0, import_react23.useCallback)((e) => {
+  const onDragEnter = (0, import_react24.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     setDraggedInside(true);
   }, []);
-  const onDragLeave = (0, import_react23.useCallback)((e) => {
+  const onDragLeave = (0, import_react24.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     setDraggedInside(false);
@@ -2618,21 +2599,21 @@ var ImageUploader = ({ onUpload, editor }) => {
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var ImageBlockView = (props) => {
   const { editor, getPos, node, updateAttributes } = props;
-  const imageWrapperRef = (0, import_react25.useRef)(null);
+  const imageWrapperRef = (0, import_react26.useRef)(null);
   const { src, width, align, alt, loading } = node.attrs;
-  const handleUpload = (0, import_react25.useCallback)(
+  const handleUpload = (0, import_react26.useCallback)(
     (url) => {
       updateAttributes({ src: url, loading: false });
     },
     [updateAttributes]
   );
-  const onClick = (0, import_react25.useCallback)(() => {
+  const onClick = (0, import_react26.useCallback)(() => {
     editor.commands.setNodeSelection(getPos());
   }, [getPos, editor.commands]);
   const getWrapperStyle = () => {
     const baseStyle = {
-      width: width || "100%",
-      maxWidth: "100%"
+      width: "fit-content",
+      maxWidth: width || "100%"
     };
     if (align === "left") {
       return { ...baseStyle, marginLeft: 0, marginRight: "auto" };
@@ -2642,14 +2623,17 @@ var ImageBlockView = (props) => {
       return { ...baseStyle, marginLeft: "auto", marginRight: "auto" };
     }
   };
+  const getContentStyle = () => ({
+    position: "relative"
+  });
   if (!src || src === "") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react24.NodeViewWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: imageWrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageUploader, { onUpload: handleUpload, editor }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: imageWrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageUploader, { onUpload: handleUpload, editor }) }) });
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react24.NodeViewWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: imageWrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageBlockLoading, {}) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: imageWrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageBlockLoading, {}) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react24.NodeViewWrapper, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { contentEditable: false, ref: imageWrapperRef, style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { contentEditable: false, ref: imageWrapperRef, style: getContentStyle(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "img",
       {
         src,
@@ -2657,75 +2641,75 @@ var ImageBlockView = (props) => {
         onClick,
         className: "nph-image-block"
       }
-    ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageBlockMenu, { editor, appendTo: imageWrapperRef })
-  ] });
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageBlockMenu, { editor, getPos, appendTo: imageWrapperRef })
+  ] }) });
 };
 
 // src/react/menus/VideoBlock/VideoBlockView.tsx
-var import_react27 = require("@tiptap/react");
-var import_react28 = require("react");
+var import_state7 = require("@tiptap/pm/state");
+var import_react29 = require("@tiptap/react");
+var import_react30 = require("react");
 
 // src/react/menus/VideoBlock/VideoBlockMenu.tsx
-var import_menus5 = require("@tiptap/react/menus");
-var import_react26 = require("react");
+var import_state6 = require("@tiptap/pm/state");
+var import_react27 = require("@tiptap/react");
+var import_react28 = require("react");
 var import_icons_react9 = require("@tabler/icons-react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var VideoBlockMenu = ({ editor }) => {
-  const menuRef = (0, import_react26.useRef)(null);
-  const [align, setAlign] = (0, import_react26.useState)("center");
-  const [width, setWidth] = (0, import_react26.useState)(100);
-  (0, import_react26.useEffect)(() => {
-    if (!editor) return;
-    const update = () => {
-      if (!editor.isActive("videoBlock")) return;
-      const attrs = editor.getAttributes("videoBlock");
-      setAlign(attrs.align || "center");
-      const widthStr = attrs.width || "100%";
-      setWidth(parseInt(widthStr) || 100);
-    };
-    update();
-    editor.on("selectionUpdate", update);
-    editor.on("transaction", update);
-    return () => {
-      editor.off("selectionUpdate", update);
-      editor.off("transaction", update);
-    };
-  }, [editor]);
-  const shouldShow = (0, import_react26.useCallback)(() => {
-    if (!editor) return false;
-    const { state } = editor;
-    const { selection } = state;
-    if (selection.constructor.name !== "NodeSelection") return false;
-    const node = selection.node;
-    if (!node || node.type.name !== "videoBlock") return false;
-    return true;
-  }, [editor]);
-  const onAlignLeft = (0, import_react26.useCallback)(() => {
+var VideoBlockMenu = ({ editor, getPos }) => {
+  const menuRef = (0, import_react28.useRef)(null);
+  const { isVisible, align, width } = (0, import_react27.useEditorState)({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return { isVisible: false, align: "center", width: 100 };
+      const { state } = ctx.editor;
+      const { selection } = state;
+      const isNodeSel = selection instanceof import_state6.NodeSelection;
+      const isThisNode = isNodeSel && selection.from === getPos();
+      let currentAlign = "center";
+      let currentWidth = 100;
+      if (isThisNode) {
+        const attrs = ctx.editor.getAttributes("videoBlock");
+        currentAlign = attrs.align || "center";
+        const widthStr = attrs.width || "100%";
+        currentWidth = parseInt(widthStr) || 100;
+      }
+      return { isVisible: isThisNode, align: currentAlign, width: currentWidth };
+    }
+  });
+  const onAlignLeft = (0, import_react28.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockAlign("left").run();
   }, [editor]);
-  const onAlignCenter = (0, import_react26.useCallback)(() => {
+  const onAlignCenter = (0, import_react28.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockAlign("center").run();
   }, [editor]);
-  const onAlignRight = (0, import_react26.useCallback)(() => {
+  const onAlignRight = (0, import_react28.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockAlign("right").run();
   }, [editor]);
-  const onWidthChange = (0, import_react26.useCallback)(
+  const onWidthChange = (0, import_react28.useCallback)(
     (value) => {
       editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockWidth(value).run();
     },
     [editor]
   );
-  const onRemove = (0, import_react26.useCallback)(() => {
+  const onRemove = (0, import_react28.useCallback)(() => {
     editor.chain().focus(void 0, { scrollIntoView: false }).deleteSelection().run();
   }, [editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_menus5.BubbleMenu,
+  if (!isVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
     {
-      editor,
-      shouldShow,
-      updateDelay: 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "bubble-menu", ref: menuRef, children: [
+      className: "bubble-menu",
+      ref: menuRef,
+      style: {
+        position: "absolute",
+        top: "-40px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: "var(--nph-z, 50)"
+      },
+      children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "button",
           {
@@ -2785,7 +2769,7 @@ var VideoBlockMenu = ({ editor }) => {
             children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_react9.IconTrash, { size: 16 })
           }
         )
-      ] })
+      ]
     }
   );
 };
@@ -2808,15 +2792,23 @@ function toEmbedUrl(url) {
 }
 var VideoBlockView = (props) => {
   const { editor, getPos, node, updateAttributes } = props;
-  const wrapperRef = (0, import_react28.useRef)(null);
+  const wrapperRef = (0, import_react30.useRef)(null);
   const { src, width, align } = node.attrs;
-  const [inputUrl, setInputUrl] = (0, import_react28.useState)("");
-  const handleEmbed = (0, import_react28.useCallback)(() => {
+  const [inputUrl, setInputUrl] = (0, import_react30.useState)("");
+  const isSelected = (0, import_react29.useEditorState)({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return false;
+      const { selection } = ctx.editor.state;
+      return selection instanceof import_state7.NodeSelection && selection.from === getPos();
+    }
+  });
+  const handleEmbed = (0, import_react30.useCallback)(() => {
     if (!inputUrl.trim()) return;
     const embedUrl = toEmbedUrl(inputUrl.trim());
     updateAttributes({ src: embedUrl });
   }, [inputUrl, updateAttributes]);
-  const handleKeyDown = (0, import_react28.useCallback)(
+  const handleKeyDown = (0, import_react30.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -2825,7 +2817,7 @@ var VideoBlockView = (props) => {
     },
     [handleEmbed]
   );
-  const onClick = (0, import_react28.useCallback)(() => {
+  const onClick = (0, import_react30.useCallback)(() => {
     editor.commands.setNodeSelection(getPos());
   }, [getPos, editor.commands]);
   const getWrapperStyle = () => {
@@ -2842,7 +2834,7 @@ var VideoBlockView = (props) => {
     }
   };
   if (!src || src === "") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react27.NodeViewWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "nph-video-input", ref: wrapperRef, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react29.NodeViewWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "nph-video-input", ref: wrapperRef, children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "nph-video-input__icon", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react10.IconVideo, { size: 24 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "nph-video-input__content", children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -2869,38 +2861,47 @@ var VideoBlockView = (props) => {
       ] })
     ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react27.NodeViewWrapper, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "div",
-      {
-        contentEditable: false,
-        ref: wrapperRef,
-        style: { position: "relative" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "nph-video-block", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          "iframe",
-          {
-            src,
-            className: "nph-video-block__iframe",
-            allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-            allowFullScreen: true
-          }
-        ) })
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(VideoBlockMenu, { editor })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react29.NodeViewWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      contentEditable: false,
+      ref: wrapperRef,
+      style: { position: "relative" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "nph-video-block", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "iframe",
+            {
+              src,
+              className: "nph-video-block__iframe",
+              allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+              allowFullScreen: true
+            }
+          ),
+          !isSelected && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "div",
+            {
+              className: "nph-video-block__overlay",
+              onClick
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(VideoBlockMenu, { editor, getPos })
+      ]
+    }
+  ) }) });
 };
 
 // src/react/Editor.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function Editor3({
+function Editor5({
   content,
   className,
   editable = true,
   immediatelyRender = false,
   showTextMenu = true,
   showSlashMenu = true,
-  showImageMenu = true,
+  showImageMenu = false,
   extensions,
   bubbleMenuExtras,
   onUpdate,