neuphlo-editor 2.1.1 → 2.3.0

package/dist/react/index.js

@@ -19,7 +19,7 @@ import {
   queryAtom,
   setDragHandleCallbacks,
   store_exports
-} from "../chunk-MSNTVITF.js";
+} from "../chunk-VPI26I4P.js";
 
 // src/headless/extensions/extension-kit.ts
 import Collaboration from "@tiptap/extension-collaboration";
@@ -93,10 +93,11 @@ var VideoBlock = Node.create({
     };
   },
   addNodeView() {
+    console.log("[VideoBlock] addNodeView called, options:", Object.keys(this.options), "hasNodeView:", !!this.options.nodeView);
     if (this.options.nodeView) {
       return ReactNodeViewRenderer(this.options.nodeView);
     }
-    return null;
+    return void 0;
   }
 });
 
@@ -1267,7 +1268,8 @@ function ImageMenu({
 
 // src/react/menus/ImageBlock/ImageBlockView.tsx
 import { NodeViewWrapper } from "@tiptap/react";
-import { useCallback as useCallback7, useRef as useRef7 } from "react";
+import { useCallback as useCallback7, useRef as useRef7, useState as useState8 } from "react";
+import { IconPhotoOff } from "@tabler/icons-react";
 
 // src/react/menus/ImageBlock/ImageBlockMenu.tsx
 import { NodeSelection as NodeSelection3 } from "@tiptap/pm/state";
@@ -1351,6 +1353,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 NodeSelection3;
       const isThisNode = isNodeSel && selection.from === getPos();
       const visible = isThisNode;
@@ -1544,6 +1547,31 @@ var ImageUploader = ({ onUpload, editor }) => {
   if (loading) {
     return /* @__PURE__ */ jsx9(ImageBlockLoading, {});
   }
+  if (browseAssets) {
+    return /* @__PURE__ */ jsx9(
+      "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__ */ jsxs9("div", { className: "nph-image-uploader__browse-cta", children: [
+          /* @__PURE__ */ jsx9("div", { className: "nph-image-uploader__browse-icon-wrapper", children: /* @__PURE__ */ jsx9(IconPhoto2, { size: 28 }) }),
+          /* @__PURE__ */ jsxs9("div", { className: "nph-image-uploader__browse-text", children: [
+            /* @__PURE__ */ jsx9("span", { className: "nph-image-uploader__browse-title", children: "Choose from assets" }),
+            /* @__PURE__ */ jsx9("span", { className: "nph-image-uploader__browse-subtitle", children: "Select an image from your library" })
+          ] })
+        ] })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs9(
     "div",
     {
@@ -1556,34 +1584,19 @@ var ImageUploader = ({ onUpload, editor }) => {
         /* @__PURE__ */ jsx9(IconPhoto2, { size: 48, className: "nph-image-uploader__icon" }),
         /* @__PURE__ */ jsxs9("div", { className: "nph-image-uploader__content", children: [
           /* @__PURE__ */ jsx9("div", { className: "nph-image-uploader__text", children: draggedInside ? "Drop image here" : "Drag and drop or" }),
-          /* @__PURE__ */ jsxs9("div", { className: "nph-image-uploader__actions", children: [
-            /* @__PURE__ */ jsxs9(
-              "button",
-              {
-                type: "button",
-                disabled: draggedInside,
-                onClick: handleUploadClick,
-                className: "nph-btn nph-btn-ghost nph-btn-sm nph-image-uploader__button",
-                children: [
-                  /* @__PURE__ */ jsx9(IconUpload2, { size: 16 }),
-                  "Upload an image"
-                ]
-              }
-            ),
-            browseAssets && /* @__PURE__ */ jsxs9(
-              "button",
-              {
-                type: "button",
-                disabled: draggedInside,
-                onClick: () => browseAssets(onUpload),
-                className: "nph-btn nph-btn-ghost nph-btn-sm nph-image-uploader__button",
-                children: [
-                  /* @__PURE__ */ jsx9(IconPhoto2, { size: 16 }),
-                  "Browse assets"
-                ]
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsx9("div", { className: "nph-image-uploader__actions", children: /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              disabled: draggedInside,
+              onClick: handleUploadClick,
+              className: "nph-btn nph-btn-ghost nph-btn-sm nph-image-uploader__button",
+              children: [
+                /* @__PURE__ */ jsx9(IconUpload2, { size: 16 }),
+                "Upload an image"
+              ]
+            }
+          ) })
         ] }),
         /* @__PURE__ */ jsx9(
           "input",
@@ -1671,6 +1684,7 @@ import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var ImageBlockView = (props) => {
   const { editor, getPos, node, updateAttributes } = props;
   const imageWrapperRef = useRef7(null);
+  const [imageError, setImageError] = useState8(false);
   const { src, width, align, alt, loading } = node.attrs;
   const handleUpload = useCallback7(
     (url) => {
@@ -1710,6 +1724,15 @@ var ImageBlockView = (props) => {
   if (loading) {
     return /* @__PURE__ */ jsx11(NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ jsx11("div", { ref: imageWrapperRef, children: /* @__PURE__ */ jsx11(ImageBlockLoading, {}) }) });
   }
+  if (imageError) {
+    return /* @__PURE__ */ jsx11(NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ jsxs11("div", { contentEditable: false, ref: imageWrapperRef, style: getContentStyle(), children: [
+      /* @__PURE__ */ jsxs11("div", { className: "nph-image-block-error", onClick, children: [
+        /* @__PURE__ */ jsx11(IconPhotoOff, { size: 32 }),
+        /* @__PURE__ */ jsx11("span", { children: "Image could not be loaded" })
+      ] }),
+      editor.isEditable && /* @__PURE__ */ jsx11(ImageBlockMenu, { editor, getPos, appendTo: imageWrapperRef })
+    ] }) });
+  }
   return /* @__PURE__ */ jsx11(NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ jsxs11("div", { contentEditable: false, ref: imageWrapperRef, style: getContentStyle(), children: [
     editor.isEditable ? /* @__PURE__ */ jsx11(ImageResizeHandle, { onResize: handleResize, currentWidth: width, children: /* @__PURE__ */ jsx11(
       "img",
@@ -1717,6 +1740,7 @@ var ImageBlockView = (props) => {
         src,
         alt: alt || "",
         onClick,
+        onError: () => setImageError(true),
         className: "nph-image-block"
       }
     ) }) : /* @__PURE__ */ jsx11(
@@ -1724,6 +1748,7 @@ var ImageBlockView = (props) => {
       {
         src,
         alt: alt || "",
+        onError: () => setImageError(true),
         className: "nph-image-block"
       }
     ),
@@ -1734,7 +1759,7 @@ var ImageBlockView = (props) => {
 // src/react/menus/VideoBlock/VideoBlockView.tsx
 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";
+import { useCallback as useCallback9, useRef as useRef9, useState as useState9 } from "react";
 
 // src/react/menus/VideoBlock/VideoBlockMenu.tsx
 import { NodeSelection as NodeSelection4 } from "@tiptap/pm/state";
@@ -1866,26 +1891,34 @@ var VideoBlockMenu = ({ editor, getPos }) => {
 };
 
 // src/react/menus/VideoBlock/VideoBlockView.tsx
-import { IconVideo as IconVideo2 } from "@tabler/icons-react";
+import { IconVideo as IconVideo2, IconVideoOff } from "@tabler/icons-react";
 import { jsx as jsx13, jsxs as jsxs13 } from "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) => {
   const { editor, getPos, node, updateAttributes } = props;
   const wrapperRef = useRef9(null);
   const { src, width, align } = node.attrs;
-  const [inputUrl, setInputUrl] = useState8("");
+  const [inputUrl, setInputUrl] = useState9("");
+  const [videoError, setVideoError] = useState9(false);
   const isSelected = useEditorState4({
     editor,
     selector: (ctx) => {
@@ -1913,8 +1946,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" };
@@ -1926,18 +1959,23 @@ var VideoBlockView = (props) => {
   };
   if (!src || src === "") {
     if (!editor.isEditable) return /* @__PURE__ */ jsx13(NodeViewWrapper2, {});
-    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: [
+    return /* @__PURE__ */ jsx13(NodeViewWrapper2, { style: getWrapperStyle(), children: /* @__PURE__ */ jsx13("div", { ref: wrapperRef, children: /* @__PURE__ */ jsxs13("div", { className: "nph-video-placeholder", onClick, children: [
+      /* @__PURE__ */ jsx13("div", { className: "nph-video-placeholder__icon", children: /* @__PURE__ */ jsx13(IconVideo2, { size: 28, stroke: 1.5 }) }),
+      /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "2px" }, children: [
+        /* @__PURE__ */ jsx13("div", { style: { fontSize: "14px", fontWeight: 600, lineHeight: "20px" }, children: "Add a video" }),
+        /* @__PURE__ */ jsx13("div", { style: { fontSize: "13px", opacity: 0.5, lineHeight: "18px" }, children: "Paste a URL to embed" })
+      ] }),
+      /* @__PURE__ */ jsxs13("div", { className: "nph-video-placeholder__input", children: [
         /* @__PURE__ */ jsx13(
           "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__ */ jsx13(
@@ -1945,7 +1983,10 @@ var VideoBlockView = (props) => {
           {
             type: "button",
             className: "nph-video-input__button",
-            onClick: handleEmbed,
+            onClick: (e) => {
+              e.stopPropagation();
+              handleEmbed();
+            },
             disabled: !inputUrl.trim(),
             children: "Embed"
           }
@@ -1953,6 +1994,16 @@ var VideoBlockView = (props) => {
       ] })
     ] }) }) });
   }
+  if (videoError) {
+    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-error", onClick, children: [
+        /* @__PURE__ */ jsx13(IconVideoOff, { size: 32 }),
+        /* @__PURE__ */ jsx13("span", { children: "Video could not be loaded" }),
+        /* @__PURE__ */ jsx13("span", { className: "nph-video-block-error__url", children: src })
+      ] }),
+      editor.isEditable && /* @__PURE__ */ jsx13(VideoBlockMenu, { editor, getPos })
+    ] }) });
+  }
   return /* @__PURE__ */ jsx13(NodeViewWrapper2, { style: getWrapperStyle(), children: /* @__PURE__ */ jsxs13(
     "div",
     {
@@ -1967,7 +2018,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__ */ jsx13(
@@ -2172,7 +2224,7 @@ import {
   IconRowInsertTop
 } from "@tabler/icons-react";
 import {
-  useState as useState9,
+  useState as useState10,
   useEffect as useEffect6,
   useRef as useRef10,
   useCallback as useCallback11
@@ -2194,12 +2246,12 @@ function TableMenu({ className: _className }) {
       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 [colGrips, setColGrips] = useState10([]);
+  const [rowGrips, setRowGrips] = useState10([]);
+  const [dropdown, setDropdown] = useState10(null);
+  const [tableRect, setTableRect] = useState10(null);
+  const [isHovering, setIsHovering] = useState10(false);
+  const [drag, setDrag] = useState10(null);
   const dropdownRef = useRef10(null);
   const dragRef = useRef10(null);
   const getTableDom = useCallback11(() => {
@@ -2691,7 +2743,7 @@ function TableMenu({ className: _className }) {
 }
 
 // src/react/Editor.tsx
-import { useMemo as useMemo2, useState as useState10, useCallback as useCallback12, useRef as useRef11, useEffect as useEffect7 } from "react";
+import { useMemo as useMemo2, useState as useState11, 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,
@@ -2714,8 +2766,8 @@ function Editor5({
   slashCommand,
   placeholder
 }) {
-  const [actionMenuAnchor, setActionMenuAnchor] = useState10(null);
-  const [actionMenuEditor, setActionMenuEditor] = useState10(null);
+  const [actionMenuAnchor, setActionMenuAnchor] = useState11(null);
+  const [actionMenuEditor, setActionMenuEditor] = useState11(null);
   const actionMenuRef = useRef11(null);
   useEffect7(() => {
     if (!actionMenuAnchor) return;
@@ -2846,7 +2898,7 @@ function Editor5({
 
 // 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 { useCallback as useCallback13, useEffect as useEffect8, useRef as useRef12, useState as useState12 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 function TableOfContents({
   className,
@@ -2854,7 +2906,7 @@ function TableOfContents({
   activeClassName
 }) {
   const { editor } = useCurrentEditor6();
-  const [activeId, setActiveId] = useState11(null);
+  const [activeId, setActiveId] = useState12(null);
   const observerRef = useRef12(null);
   const headings = useEditorState6({
     editor,