neuphlo-editor 2.0.0 → 2.1.0

package/dist/react/index.d.cts

@@ -28,6 +28,7 @@ type NeuphloEditorProps = {
     onUpdate?: EditorContentProps["onUpdate"];
     onCreate?: EditorContentProps["onCreate"];
     uploadImage?: (file: File) => Promise<string>;
+    browseAssets?: (onSelect: (url: string) => void) => void;
     collaboration?: {
         doc: any;
         field: string;
@@ -38,7 +39,7 @@ type NeuphloEditorProps = {
     slashCommand?: boolean;
     placeholder?: string;
 };
-declare function Editor({ content, className, editable, immediatelyRender, showTextMenu, showSlashMenu, showImageMenu, showDragHandle, extensions, bubbleMenuExtras, onUpdate, onCreate, uploadImage, collaboration, mentionOptions, referenceOptions, slashCommand, placeholder, }: NeuphloEditorProps): react_jsx_runtime.JSX.Element;
+declare function Editor({ content, className, editable, immediatelyRender, showTextMenu, showSlashMenu, showImageMenu, showDragHandle, extensions, bubbleMenuExtras, onUpdate, onCreate, uploadImage, browseAssets, collaboration, mentionOptions, referenceOptions, slashCommand, placeholder, }: NeuphloEditorProps): react_jsx_runtime.JSX.Element;
 
 type ExtraRenderer = (editor: Editor$1) => ReactNode;
 type TextMenuProps = {

package/dist/react/index.d.ts

@@ -28,6 +28,7 @@ type NeuphloEditorProps = {
     onUpdate?: EditorContentProps["onUpdate"];
     onCreate?: EditorContentProps["onCreate"];
     uploadImage?: (file: File) => Promise<string>;
+    browseAssets?: (onSelect: (url: string) => void) => void;
     collaboration?: {
         doc: any;
         field: string;
@@ -38,7 +39,7 @@ type NeuphloEditorProps = {
     slashCommand?: boolean;
     placeholder?: string;
 };
-declare function Editor({ content, className, editable, immediatelyRender, showTextMenu, showSlashMenu, showImageMenu, showDragHandle, extensions, bubbleMenuExtras, onUpdate, onCreate, uploadImage, collaboration, mentionOptions, referenceOptions, slashCommand, placeholder, }: NeuphloEditorProps): react_jsx_runtime.JSX.Element;
+declare function Editor({ content, className, editable, immediatelyRender, showTextMenu, showSlashMenu, showImageMenu, showDragHandle, extensions, bubbleMenuExtras, onUpdate, onCreate, uploadImage, browseAssets, collaboration, mentionOptions, referenceOptions, slashCommand, placeholder, }: NeuphloEditorProps): react_jsx_runtime.JSX.Element;
 
 type ExtraRenderer = (editor: Editor$1) => ReactNode;
 type TextMenuProps = {

package/dist/react/index.js

@@ -19,7 +19,7 @@ import {
   queryAtom,
   setDragHandleCallbacks,
   store_exports
-} from "../chunk-457ETWB6.js";
+} from "../chunk-P3YFYEUB.js";
 
 // src/headless/extensions/extension-kit.ts
 import Collaboration from "@tiptap/extension-collaboration";
@@ -110,6 +110,7 @@ var ExtensionKit = (options) => {
     Underline,
     ImageBlock.configure({
       uploadImage: options?.uploadImage,
+      browseAssets: options?.browseAssets,
       nodeView: options?.imageBlockView
     }),
     VideoBlock.configure({
@@ -1349,6 +1350,7 @@ var ImageBlockMenu = ({ editor, getPos, appendTo }) => {
       if (!ctx.editor) return { isVisible: false, align: "center", width: 100 };
       const { state } = ctx.editor;
       const { selection } = state;
+      if (!ctx.editor.isEditable) return { isVisible: false, align: "center", width: 100 };
       const isNodeSel = selection instanceof NodeSelection3;
       const isThisNode = isNodeSel && selection.from === getPos();
       const visible = isThisNode;
@@ -1482,13 +1484,14 @@ var ImageUploader = ({ onUpload, editor }) => {
   const [loading, setLoading] = useState6(false);
   const [draggedInside, setDraggedInside] = useState6(false);
   const fileInputRef = useRef5(null);
+  const imageExtension = editor.extensionManager.extensions.find(
+    (ext) => ext.name === "imageBlock"
+  );
+  const browseAssets = imageExtension?.options?.browseAssets;
   const uploadFile = useCallback5(
     async (file) => {
       setLoading(true);
       try {
-        const imageExtension = editor.extensionManager.extensions.find(
-          (ext) => ext.name === "imageBlock"
-        );
         const uploadImage = imageExtension?.options?.uploadImage;
         if (uploadImage) {
           const url = await uploadImage(file);
@@ -1502,7 +1505,7 @@ var ImageUploader = ({ onUpload, editor }) => {
         setLoading(false);
       }
     },
-    [editor, onUpload]
+    [imageExtension, onUpload]
   );
   const handleUploadClick = useCallback5(() => {
     fileInputRef.current?.click();
@@ -1553,19 +1556,34 @@ 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__ */ jsx9("div", { 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__ */ 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(
           "input",
@@ -1686,13 +1704,14 @@ var ImageBlockView = (props) => {
     position: "relative"
   });
   if (!src || src === "") {
+    if (!editor.isEditable) return /* @__PURE__ */ jsx11(NodeViewWrapper, {});
     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__ */ jsx11(NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ jsx11("div", { ref: imageWrapperRef, children: /* @__PURE__ */ jsx11(ImageBlockLoading, {}) }) });
   }
   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(
+    editor.isEditable ? /* @__PURE__ */ jsx11(ImageResizeHandle, { onResize: handleResize, currentWidth: width, children: /* @__PURE__ */ jsx11(
       "img",
       {
         src,
@@ -1700,8 +1719,15 @@ var ImageBlockView = (props) => {
         onClick,
         className: "nph-image-block"
       }
-    ) }),
-    /* @__PURE__ */ jsx11(ImageBlockMenu, { editor, getPos, appendTo: imageWrapperRef })
+    ) }) : /* @__PURE__ */ jsx11(
+      "img",
+      {
+        src,
+        alt: alt || "",
+        className: "nph-image-block"
+      }
+    ),
+    editor.isEditable && /* @__PURE__ */ jsx11(ImageBlockMenu, { editor, getPos, appendTo: imageWrapperRef })
   ] }) });
 };
 
@@ -1729,6 +1755,7 @@ var VideoBlockMenu = ({ editor, getPos }) => {
       if (!ctx.editor) return { isVisible: false, align: "center", width: 100 };
       const { state } = ctx.editor;
       const { selection } = state;
+      if (!ctx.editor.isEditable) return { isVisible: false, align: "center", width: 100 };
       const isNodeSel = selection instanceof NodeSelection4;
       const isThisNode = isNodeSel && selection.from === getPos();
       let currentAlign = "center";
@@ -1898,6 +1925,7 @@ 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: [
@@ -1950,7 +1978,7 @@ var VideoBlockView = (props) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx13(VideoBlockMenu, { editor, getPos })
+        editor.isEditable && /* @__PURE__ */ jsx13(VideoBlockMenu, { editor, getPos })
       ]
     }
   ) });
@@ -2679,6 +2707,7 @@ function Editor5({
   onUpdate,
   onCreate,
   uploadImage,
+  browseAssets,
   collaboration,
   mentionOptions,
   referenceOptions,
@@ -2751,6 +2780,7 @@ function Editor5({
         extensions: [
           ...extension_kit_default({
             uploadImage,
+            browseAssets,
             collaboration,
             imageBlockView: ImageBlockView,
             videoBlockView: VideoBlockView,