@kopexa/tiptap 17.2.0 → 17.2.2

package/dist/extensions/image/index.js

@@ -26,7 +26,7 @@ __export(image_exports, {
   imageMessages: () => messages
 });
 module.exports = __toCommonJS(image_exports);
-var import_core = require("@tiptap/core");
+var import_extension_image = require("@tiptap/extension-image");
 var import_react4 = require("@tiptap/react");
 
 // src/extensions/image/image-view.tsx
@@ -54,6 +54,10 @@ var messages = (0, import_react_intl.defineMessages)({
     id: "editor.image.loading",
     defaultMessage: "Loading image..."
   },
+  uploading: {
+    id: "editor.image.uploading",
+    defaultMessage: "Uploading..."
+  },
   error: {
     id: "editor.image.error",
     defaultMessage: "Failed to load image"
@@ -62,38 +66,6 @@ var messages = (0, import_react_intl.defineMessages)({
     id: "editor.image.upload_error",
     defaultMessage: "Failed to upload image"
   },
-  uploading: {
-    id: "editor.image.uploading",
-    defaultMessage: "Uploading..."
-  },
-  upload_placeholder: {
-    id: "editor.image.upload_placeholder",
-    defaultMessage: "Click to upload or drag & drop"
-  },
-  upload_hint: {
-    id: "editor.image.upload_hint",
-    defaultMessage: "PNG, JPG, GIF, WebP, SVG"
-  },
-  alt_text: {
-    id: "editor.image.alt_text",
-    defaultMessage: "Alt text"
-  },
-  alt_placeholder: {
-    id: "editor.image.alt_placeholder",
-    defaultMessage: "Describe the image..."
-  },
-  files_not_supported: {
-    id: "editor.image.files_not_supported",
-    defaultMessage: "File upload is not configured"
-  },
-  file_too_large: {
-    id: "editor.image.file_too_large",
-    defaultMessage: "File is too large (max {maxSize})"
-  },
-  invalid_type: {
-    id: "editor.image.invalid_type",
-    defaultMessage: "Invalid file type"
-  },
   retry: {
     id: "editor.image.retry",
     defaultMessage: "Retry"
@@ -110,7 +82,7 @@ function ImageNodeView({ editor, node, getPos }) {
   var _a;
   const intl = (0, import_react_intl2.useIntl)();
   const fileHandler = useEditorFile();
-  const attrs = node.attrs;
+  const { src, alt, title, uploadState, uploadProgress } = node.attrs;
   const isEditable = (0, import_react2.useEditorState)({
     editor,
     selector: ({ editor: e }) => {
@@ -118,7 +90,6 @@ function ImageNodeView({ editor, node, getPos }) {
       return (_a2 = e == null ? void 0 : e.isEditable) != null ? _a2 : false;
     }
   });
-  const { src, alt, title, uploadState, uploadProgress } = attrs;
   const [resolvedUrl, setResolvedUrl] = (0, import_react3.useState)(null);
   const [resolveState, setResolveState] = (0, import_react3.useState)("idle");
   const needsResolve = (_a = fileHandler == null ? void 0 : fileHandler.isReference(src)) != null ? _a : false;
@@ -130,7 +101,8 @@ function ImageNodeView({ editor, node, getPos }) {
       return;
     }
     if (!fileHandler) {
-      setResolveState("error");
+      setResolvedUrl(src);
+      setResolveState("resolved");
       return;
     }
     setResolveState("loading");
@@ -156,156 +128,16 @@ function ImageNodeView({ editor, node, getPos }) {
       to: pos + node.nodeSize
     });
   }, [editor, getPos, node.nodeSize]);
-  const fileInputRef = (0, import_react3.useRef)(null);
-  const handleFileSelect = (0, import_react3.useCallback)(
-    async (file) => {
-      if (!fileHandler) return;
-      const pos = getPos();
-      if (pos === void 0) return;
-      editor.view.dispatch(
-        editor.state.tr.setNodeMarkup(pos, void 0, {
-          ...attrs,
-          uploadState: "uploading",
-          uploadProgress: 0
-        })
-      );
-      try {
-        const ref = await fileHandler.upload(file, (percent) => {
-          const currentPos = getPos();
-          if (currentPos === void 0) return;
-          editor.view.dispatch(
-            editor.state.tr.setNodeMarkup(currentPos, void 0, {
-              ...attrs,
-              uploadState: "uploading",
-              uploadProgress: percent
-            })
-          );
-        });
-        const finalPos = getPos();
-        if (finalPos === void 0) return;
-        editor.view.dispatch(
-          editor.state.tr.setNodeMarkup(finalPos, void 0, {
-            src: ref,
-            uploadState: null,
-            uploadProgress: null
-          })
-        );
-      } catch {
-        const errorPos = getPos();
-        if (errorPos === void 0) return;
-        editor.view.dispatch(
-          editor.state.tr.setNodeMarkup(errorPos, void 0, {
-            ...attrs,
-            uploadState: "error",
-            uploadProgress: null
-          })
-        );
-      }
-    },
-    [fileHandler, editor, getPos, attrs]
-  );
-  const handleInputChange = (0, import_react3.useCallback)(
-    (e) => {
-      var _a2;
-      const file = (_a2 = e.target.files) == null ? void 0 : _a2[0];
-      if (file) {
-        handleFileSelect(file);
-      }
-    },
-    [handleFileSelect]
-  );
-  const handleDrop = (0, import_react3.useCallback)(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      const file = e.dataTransfer.files[0];
-      if (file == null ? void 0 : file.type.startsWith("image/")) {
-        handleFileSelect(file);
-      }
-    },
-    [handleFileSelect]
-  );
-  const handleDragOver = (0, import_react3.useCallback)((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
-  const styles = (0, import_react3.useMemo)(() => (0, import_theme.imagePlaceholder)({ size: "md" }), []);
   const errorStyles = (0, import_react3.useMemo)(
     () => (0, import_theme.imagePlaceholder)({ size: "md", variant: "error" }),
     []
   );
-  const uploadingStyles = (0, import_react3.useMemo)(
+  const loadingStyles = (0, import_react3.useMemo)(
     () => (0, import_theme.imagePlaceholder)({ size: "md", variant: "uploading" }),
     []
   );
-  const disabledStyles = (0, import_react3.useMemo)(
-    () => (0, import_theme.imagePlaceholder)({ size: "md", variant: "disabled" }),
-    []
-  );
-  const isEmpty = !src;
-  if (isEmpty && !uploadState) {
-    if (!fileHandler) {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: disabledStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: disabledStyles.content(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.ImageIcon, { className: disabledStyles.icon() }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: disabledStyles.text(), children: intl.formatMessage(messages.files_not_supported) }),
-        isEditable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_button.IconButton,
-          {
-            size: "sm",
-            variant: "ghost",
-            onClick: handleRemove,
-            "aria-label": intl.formatMessage(messages.remove),
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.TrashIcon, { className: "size-4" })
-          }
-        )
-      ] }) }) });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      "div",
-      {
-        className: styles.root(),
-        onClick: () => {
-          var _a2;
-          return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
-        },
-        onDrop: handleDrop,
-        onDragOver: handleDragOver,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: styles.content(), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.UploadIcon, { className: styles.icon() }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.text(), children: intl.formatMessage(messages.upload_placeholder) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.hint(), children: intl.formatMessage(messages.upload_hint) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "input",
-            {
-              ref: fileInputRef,
-              type: "file",
-              accept: "image/*",
-              className: "hidden",
-              onChange: handleInputChange
-            }
-          ),
-          isEditable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_button.IconButton,
-            {
-              size: "sm",
-              variant: "ghost",
-              className: styles.removeButton(),
-              onClick: (e) => {
-                e.stopPropagation();
-                handleRemove();
-              },
-              "aria-label": intl.formatMessage(messages.remove),
-              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.TrashIcon, { className: "size-3.5" })
-            }
-          )
-        ]
-      }
-    ) });
-  }
   if (uploadState === "uploading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: uploadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: uploadingStyles.content(), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: loadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: loadingStyles.content(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative size-12", children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "svg",
@@ -347,14 +179,14 @@ function ImageNodeView({ editor, node, getPos }) {
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: uploadingStyles.text(), children: intl.formatMessage(messages.uploading) })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: loadingStyles.text(), children: intl.formatMessage(messages.uploading) })
     ] }) }) });
   }
   if (uploadState === "error") {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: errorStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: errorStyles.content(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.AlertCircleIcon, { className: errorStyles.icon() }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: errorStyles.text(), children: intl.formatMessage(messages.upload_error) }),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_button.IconButton,
         {
           size: "sm",
@@ -363,11 +195,11 @@ function ImageNodeView({ editor, node, getPos }) {
           "aria-label": intl.formatMessage(messages.remove),
           children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.TrashIcon, { className: "size-4" })
         }
-      ) })
+      )
     ] }) }) });
   }
   if (resolveState === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${uploadingStyles.root()} animate-pulse`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: uploadingStyles.text(), children: intl.formatMessage(messages.loading) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${loadingStyles.root()} animate-pulse`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: loadingStyles.text(), children: intl.formatMessage(messages.loading) }) }) });
   }
   if (resolveState === "error") {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: errorStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: errorStyles.content(), children: [
@@ -422,34 +254,12 @@ function ImageNodeView({ editor, node, getPos }) {
 }
 
 // src/extensions/image/index.ts
-var ImageNode = import_core.Node.create({
-  name: "image",
-  group: "block",
-  atom: true,
-  draggable: true,
-  addOptions() {
-    return {
-      allowBase64: true,
-      HTMLAttributes: {}
-    };
-  },
+var ImageNode = import_extension_image.Image.extend({
   addAttributes() {
+    var _a;
     return {
-      src: {
-        default: null
-      },
-      alt: {
-        default: null
-      },
-      title: {
-        default: null
-      },
-      width: {
-        default: null
-      },
-      height: {
-        default: null
-      },
+      ...(_a = this.parent) == null ? void 0 : _a.call(this),
+      // Upload state for drag & drop / paste uploads
       uploadState: {
         default: null,
         rendered: false
@@ -460,31 +270,8 @@ var ImageNode = import_core.Node.create({
       }
     };
   },
-  parseHTML() {
-    return [
-      {
-        tag: "img[src]"
-      }
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "img",
-      (0, import_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes)
-    ];
-  },
   addNodeView() {
     return (0, import_react4.ReactNodeViewRenderer)(ImageNodeView);
-  },
-  addCommands() {
-    return {
-      setImage: (options) => ({ commands }) => {
-        return commands.insertContent({
-          type: this.name,
-          attrs: options
-        });
-      }
-    };
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/extensions/image/index.mjs

@@ -1,13 +1,13 @@
 "use client";
 import {
   ImageNode
-} from "../../chunk-WAAH3NLG.mjs";
+} from "../../chunk-HTJ2RXOG.mjs";
 import {
   ImageNodeView
-} from "../../chunk-LMCQMSW2.mjs";
+} from "../../chunk-KYLBKQ2E.mjs";
 import {
   messages
-} from "../../chunk-5GFFTVMZ.mjs";
+} from "../../chunk-Z365KVQY.mjs";
 import "../../chunk-VRQ6OSAZ.mjs";
 export {
   ImageNode,

package/dist/extensions/image/messages.d.mts

@@ -3,43 +3,15 @@ declare const messages: {
         id: string;
         defaultMessage: string;
     };
-    error: {
-        id: string;
-        defaultMessage: string;
-    };
-    upload_error: {
-        id: string;
-        defaultMessage: string;
-    };
     uploading: {
         id: string;
         defaultMessage: string;
     };
-    upload_placeholder: {
-        id: string;
-        defaultMessage: string;
-    };
-    upload_hint: {
-        id: string;
-        defaultMessage: string;
-    };
-    alt_text: {
-        id: string;
-        defaultMessage: string;
-    };
-    alt_placeholder: {
-        id: string;
-        defaultMessage: string;
-    };
-    files_not_supported: {
-        id: string;
-        defaultMessage: string;
-    };
-    file_too_large: {
+    error: {
         id: string;
         defaultMessage: string;
     };
-    invalid_type: {
+    upload_error: {
         id: string;
         defaultMessage: string;
     };

package/dist/extensions/image/messages.d.ts

@@ -3,43 +3,15 @@ declare const messages: {
         id: string;
         defaultMessage: string;
     };
-    error: {
-        id: string;
-        defaultMessage: string;
-    };
-    upload_error: {
-        id: string;
-        defaultMessage: string;
-    };
     uploading: {
         id: string;
         defaultMessage: string;
     };
-    upload_placeholder: {
-        id: string;
-        defaultMessage: string;
-    };
-    upload_hint: {
-        id: string;
-        defaultMessage: string;
-    };
-    alt_text: {
-        id: string;
-        defaultMessage: string;
-    };
-    alt_placeholder: {
-        id: string;
-        defaultMessage: string;
-    };
-    files_not_supported: {
-        id: string;
-        defaultMessage: string;
-    };
-    file_too_large: {
+    error: {
         id: string;
         defaultMessage: string;
     };
-    invalid_type: {
+    upload_error: {
         id: string;
         defaultMessage: string;
     };

package/dist/extensions/image/messages.js

@@ -30,6 +30,10 @@ var messages = (0, import_react_intl.defineMessages)({
     id: "editor.image.loading",
     defaultMessage: "Loading image..."
   },
+  uploading: {
+    id: "editor.image.uploading",
+    defaultMessage: "Uploading..."
+  },
   error: {
     id: "editor.image.error",
     defaultMessage: "Failed to load image"
@@ -38,38 +42,6 @@ var messages = (0, import_react_intl.defineMessages)({
     id: "editor.image.upload_error",
     defaultMessage: "Failed to upload image"
   },
-  uploading: {
-    id: "editor.image.uploading",
-    defaultMessage: "Uploading..."
-  },
-  upload_placeholder: {
-    id: "editor.image.upload_placeholder",
-    defaultMessage: "Click to upload or drag & drop"
-  },
-  upload_hint: {
-    id: "editor.image.upload_hint",
-    defaultMessage: "PNG, JPG, GIF, WebP, SVG"
-  },
-  alt_text: {
-    id: "editor.image.alt_text",
-    defaultMessage: "Alt text"
-  },
-  alt_placeholder: {
-    id: "editor.image.alt_placeholder",
-    defaultMessage: "Describe the image..."
-  },
-  files_not_supported: {
-    id: "editor.image.files_not_supported",
-    defaultMessage: "File upload is not configured"
-  },
-  file_too_large: {
-    id: "editor.image.file_too_large",
-    defaultMessage: "File is too large (max {maxSize})"
-  },
-  invalid_type: {
-    id: "editor.image.invalid_type",
-    defaultMessage: "Invalid file type"
-  },
   retry: {
     id: "editor.image.retry",
     defaultMessage: "Retry"

package/dist/extensions/image/messages.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   messages
-} from "../../chunk-5GFFTVMZ.mjs";
+} from "../../chunk-Z365KVQY.mjs";
 export {
   messages
 };

package/dist/extensions/image-upload/image-upload-view.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NodeViewProps } from '@tiptap/react';
+
+/**
+ * ImageUploadNodeView - Upload placeholder component
+ *
+ * Shows a dropzone/file picker UI. After successful upload,
+ * replaces itself with a standard `image` node.
+ */
+declare function ImageUploadNodeView({ editor, node, getPos }: NodeViewProps): react_jsx_runtime.JSX.Element;
+
+export { ImageUploadNodeView, ImageUploadNodeView as default };

package/dist/extensions/image-upload/image-upload-view.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NodeViewProps } from '@tiptap/react';
+
+/**
+ * ImageUploadNodeView - Upload placeholder component
+ *
+ * Shows a dropzone/file picker UI. After successful upload,
+ * replaces itself with a standard `image` node.
+ */
+declare function ImageUploadNodeView({ editor, node, getPos }: NodeViewProps): react_jsx_runtime.JSX.Element;
+
+export { ImageUploadNodeView, ImageUploadNodeView as default };