neuphlo-editor 1.0.4 → 1.1.0

package/dist/react/index.cjs

@@ -324,11 +324,214 @@ var handleCommandNavigation = (event) => {
   }
 };
 
+// src/headless/extensions/Image/Image.ts
+var import_extension_image = require("@tiptap/extension-image");
+var import_state2 = require("@tiptap/pm/state");
+var Image = import_extension_image.Image.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      uploadImage: void 0,
+      allowBase64: false
+    };
+  },
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      src: {
+        default: null
+      },
+      alt: {
+        default: null
+      },
+      title: {
+        default: null
+      },
+      width: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("width"),
+        renderHTML: (attributes) => {
+          if (!attributes.width) {
+            return {};
+          }
+          return {
+            width: attributes.width
+          };
+        }
+      },
+      height: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("height"),
+        renderHTML: (attributes) => {
+          if (!attributes.height) {
+            return {};
+          }
+          return {
+            height: attributes.height
+          };
+        }
+      },
+      align: {
+        default: "left",
+        parseHTML: (element) => element.getAttribute("data-align") || "left",
+        renderHTML: (attributes) => {
+          return {
+            "data-align": attributes.align
+          };
+        }
+      }
+    };
+  },
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      setImage: (options) => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: options
+        });
+      },
+      uploadImage: () => ({ editor }) => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
+        input.onchange = async (e) => {
+          const file = e.target.files?.[0];
+          if (!file) return;
+          if (this.options.uploadImage) {
+            try {
+              const url = await this.options.uploadImage(file);
+              editor.chain().focus().setImage({ src: url }).run();
+            } catch (error) {
+              console.error("Failed to upload image:", error);
+            }
+          } else if (this.options.allowBase64) {
+            const reader = new FileReader();
+            reader.onload = () => {
+              const url = reader.result;
+              editor.chain().focus().setImage({ src: url }).run();
+            };
+            reader.readAsDataURL(file);
+          } else {
+            console.warn(
+              "No upload handler provided. Please provide uploadImage option or enable allowBase64."
+            );
+          }
+        };
+        input.click();
+        return true;
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      new import_state2.Plugin({
+        key: new import_state2.PluginKey("imageDrop"),
+        props: {
+          handleDOMEvents: {
+            drop: (view, event) => {
+              const hasFiles = event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length;
+              if (!hasFiles) {
+                return false;
+              }
+              const images = Array.from(event.dataTransfer.files).filter(
+                (file) => /image/i.test(file.type)
+              );
+              if (images.length === 0) {
+                return false;
+              }
+              event.preventDefault();
+              const { schema } = view.state;
+              const coordinates = view.posAtCoords({
+                left: event.clientX,
+                top: event.clientY
+              });
+              if (!coordinates) return false;
+              images.forEach(async (image) => {
+                if (this.options.uploadImage) {
+                  try {
+                    const url = await this.options.uploadImage(image);
+                    const node = schema.nodes.image.create({ src: url });
+                    const transaction = view.state.tr.insert(
+                      coordinates.pos,
+                      node
+                    );
+                    view.dispatch(transaction);
+                  } catch (error) {
+                    console.error("Failed to upload image:", error);
+                  }
+                } else if (this.options.allowBase64) {
+                  const reader = new FileReader();
+                  reader.onload = (readerEvent) => {
+                    const node = schema.nodes.image.create({
+                      src: readerEvent.target?.result
+                    });
+                    const transaction = view.state.tr.insert(
+                      coordinates.pos,
+                      node
+                    );
+                    view.dispatch(transaction);
+                  };
+                  reader.readAsDataURL(image);
+                }
+              });
+              return true;
+            },
+            paste: (view, event) => {
+              const hasFiles = event.clipboardData && event.clipboardData.files && event.clipboardData.files.length;
+              if (!hasFiles) {
+                return false;
+              }
+              const images = Array.from(event.clipboardData.files).filter(
+                (file) => /image/i.test(file.type)
+              );
+              if (images.length === 0) {
+                return false;
+              }
+              event.preventDefault();
+              images.forEach(async (image) => {
+                if (this.options.uploadImage) {
+                  try {
+                    const url = await this.options.uploadImage(image);
+                    view.dispatch(
+                      view.state.tr.replaceSelectionWith(
+                        view.state.schema.nodes.image.create({ src: url })
+                      )
+                    );
+                  } catch (error) {
+                    console.error("Failed to upload image:", error);
+                  }
+                } else if (this.options.allowBase64) {
+                  const reader = new FileReader();
+                  reader.onload = (readerEvent) => {
+                    view.dispatch(
+                      view.state.tr.replaceSelectionWith(
+                        view.state.schema.nodes.image.create({
+                          src: readerEvent.target?.result
+                        })
+                      )
+                    );
+                  };
+                  reader.readAsDataURL(image);
+                }
+              });
+              return true;
+            }
+          }
+        }
+      })
+    ];
+  }
+});
+
 // src/headless/extensions/extension-kit.ts
-var ExtensionKit = () => [
+var ExtensionKit = (options) => [
   import_starter_kit.StarterKit.configure({}),
   CodeBlock,
   Link,
+  Image.configure({
+    uploadImage: options?.uploadImage
+  }),
   import_extension_placeholder.Placeholder.configure({
     placeholder: ({ node }) => {
       if (node.type.name === "heading") {
@@ -1166,14 +1369,205 @@ function SlashMenu({ className }) {
               }
             )
           }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          EditorCommandItem,
+          {
+            value: "image photo picture",
+            className: "nph-command__item",
+            onCommand: ({
+              editor: editor2,
+              range
+            }) => {
+              ;
+              editor2.chain().focus().deleteRange(range).run();
+              editor2.chain().focus().uploadImage().run();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "span",
+              {
+                style: { display: "inline-flex", alignItems: "center", gap: 8 },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_react4.IconPhoto, { size: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Image" })
+                ]
+              }
+            )
+          }
         )
       ]
     }
   ) });
 }
 
-// src/react/Editor.tsx
+// src/react/menus/ImageMenu.tsx
+var import_react12 = require("@tiptap/react");
+var import_menus2 = require("@tiptap/react/menus");
+var import_icons_react5 = require("@tabler/icons-react");
+var import_react13 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+function ImageMenu({ className }) {
+  const { editor } = (0, import_react12.useCurrentEditor)();
+  const [size, setSize] = (0, import_react13.useState)(100);
+  const [align, setAlign] = (0, import_react13.useState)("left");
+  (0, import_react13.useEffect)(() => {
+    if (!editor) return;
+    const update = () => {
+      if (!editor.isActive("image")) return;
+      const attrs = editor.getAttributes("image") ?? {
+        width: "",
+        align: "left"
+      };
+      const width = attrs.width ?? "";
+      if (width.includes("%")) {
+        setSize(parseInt(width) || 100);
+      } else {
+        setSize(100);
+      }
+      setAlign(attrs.align ?? "left");
+    };
+    update();
+    editor.on("selectionUpdate", update);
+    editor.on("transaction", update);
+    editor.on("update", update);
+    return () => {
+      editor.off("selectionUpdate", update);
+      editor.off("transaction", update);
+      editor.off("update", update);
+    };
+  }, [editor]);
+  if (!editor) return null;
+  const updateImageSize = (newSize) => {
+    setSize(newSize);
+    editor.commands.updateAttributes("image", {
+      width: `${newSize}%`
+    });
+  };
+  const updateImageAlign = (newAlign) => {
+    setAlign(newAlign);
+    editor.commands.updateAttributes("image", { align: newAlign });
+  };
+  const removeImage = () => {
+    editor.chain().focus().deleteSelection().run();
+  };
+  const triggerUpload = () => {
+    ;
+    editor.chain().focus().uploadImage().run();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_menus2.BubbleMenu,
+    {
+      editor,
+      shouldShow: ({ editor: e }) => {
+        return e.isActive("image");
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: className ? `bubble-menu ${className}` : "bubble-menu", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              minWidth: 140
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { fontSize: "12px", whiteSpace: "nowrap" }, children: [
+                size,
+                "%"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "input",
+                {
+                  type: "range",
+                  min: "25",
+                  max: "100",
+                  step: "5",
+                  value: size,
+                  onChange: (e) => updateImageSize(parseInt(e.target.value)),
+                  onMouseDown: (e) => e.stopPropagation(),
+                  style: { flex: 1 }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            className: "nph-link-popover__divider",
+            style: { margin: "0 4px" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${align === "left" ? " is-active" : ""}`,
+            title: "Align left",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => updateImageAlign("left"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react5.IconAlignLeft, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${align === "center" ? " is-active" : ""}`,
+            title: "Align center",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => updateImageAlign("center"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react5.IconAlignCenter, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            className: `nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon${align === "right" ? " is-active" : ""}`,
+            title: "Align right",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => updateImageAlign("right"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react5.IconAlignRight, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            className: "nph-link-popover__divider",
+            style: { margin: "0 4px" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon",
+            title: "Upload new image",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: triggerUpload,
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react5.IconUpload, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "nph-btn nph-btn-ghost nph-btn-xs nph-btn-icon",
+            title: "Remove image",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: removeImage,
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_react5.IconTrash, { size: 16 })
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/react/Editor.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Editor({
   content,
   className,
@@ -1181,11 +1575,13 @@ function Editor({
   immediatelyRender = false,
   showTextMenu = true,
   showSlashMenu = true,
+  showImageMenu = true,
   extensions,
   onUpdate,
-  onCreate
+  onCreate,
+  uploadImage
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EditorRoot, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EditorRoot, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     EditorContent,
     {
       onUpdate,
@@ -1193,7 +1589,7 @@ function Editor({
       immediatelyRender,
       editable,
       content,
-      extensions: [...extension_kit_default(), ...extensions ?? []],
+      extensions: [...extension_kit_default({ uploadImage }), ...extensions ?? []],
       editorProps: {
         attributes: {
           class: "nph-editor max-w-none outline-none"
@@ -1203,8 +1599,9 @@ function Editor({
         }
       },
       children: [
-        showTextMenu ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TextMenu, {}) : null,
-        showSlashMenu ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SlashMenu, {}) : null
+        showTextMenu ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TextMenu, {}) : null,
+        showImageMenu ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ImageMenu, {}) : null,
+        showSlashMenu ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SlashMenu, {}) : null
       ]
     }
   ) }) });