@kopexa/tiptap 17.2.0 → 17.2.2

package/dist/extensions/image-upload/image-upload-view.js

@@ -0,0 +1,338 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/extensions/image-upload/image-upload-view.tsx
+var image_upload_view_exports = {};
+__export(image_upload_view_exports, {
+  ImageUploadNodeView: () => ImageUploadNodeView,
+  default: () => image_upload_view_default
+});
+module.exports = __toCommonJS(image_upload_view_exports);
+var import_button = require("@kopexa/button");
+var import_icons = require("@kopexa/icons");
+var import_theme = require("@kopexa/theme");
+var import_react2 = require("@tiptap/react");
+var import_react3 = require("react");
+var import_react_intl2 = require("react-intl");
+
+// src/context/editor-file-context.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EditorFileContext = (0, import_react.createContext)(null);
+var DEFAULT_CACHE_BUFFER = 2 * 60 * 1e3;
+var DEFAULT_CACHE_TTL = 10 * 60 * 1e3;
+function useEditorFile() {
+  return (0, import_react.useContext)(EditorFileContext);
+}
+
+// src/extensions/image-upload/messages.ts
+var import_react_intl = require("react-intl");
+var messages = (0, import_react_intl.defineMessages)({
+  upload_error: {
+    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"
+  },
+  click_to_retry: {
+    id: "editor.image.click_to_retry",
+    defaultMessage: "Click to try again"
+  },
+  files_not_supported: {
+    id: "editor.image.files_not_supported",
+    defaultMessage: "File upload is not configured"
+  },
+  remove: {
+    id: "editor.image.remove",
+    defaultMessage: "Remove"
+  }
+});
+
+// src/extensions/image-upload/image-upload-view.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ImageUploadNodeView({ editor, node, getPos }) {
+  const intl = (0, import_react_intl2.useIntl)();
+  const fileHandler = useEditorFile();
+  const isEditable = (0, import_react2.useEditorState)({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a;
+      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
+    }
+  });
+  const [uploadState, setUploadState] = (0, import_react3.useState)("idle");
+  const [uploadProgress, setUploadProgress] = (0, import_react3.useState)(0);
+  const [isDragOver, setIsDragOver] = (0, import_react3.useState)(false);
+  const fileInputRef = (0, import_react3.useRef)(null);
+  const handleRemove = (0, import_react3.useCallback)(() => {
+    const pos = getPos();
+    if (pos === void 0) return;
+    editor.commands.deleteRange({
+      from: pos,
+      to: pos + node.nodeSize
+    });
+  }, [editor, getPos, node.nodeSize]);
+  const handleFileSelect = (0, import_react3.useCallback)(
+    async (file) => {
+      if (!fileHandler) return;
+      const pos = getPos();
+      if (pos === void 0) return;
+      setUploadState("uploading");
+      setUploadProgress(0);
+      try {
+        const ref = await fileHandler.upload(file, (percent) => {
+          setUploadProgress(percent);
+        });
+        const currentPos = getPos();
+        if (currentPos === void 0) return;
+        editor.chain().focus().deleteRange({ from: currentPos, to: currentPos + node.nodeSize }).insertContentAt(currentPos, {
+          type: "image",
+          attrs: {
+            src: ref,
+            alt: file.name.replace(/\.[^/.]+$/, ""),
+            title: file.name.replace(/\.[^/.]+$/, "")
+          }
+        }).run();
+      } catch (error) {
+        console.error("[ImageUpload] Upload failed:", error);
+        setUploadState("error");
+        setUploadProgress(0);
+      }
+    },
+    [fileHandler, editor, getPos, node.nodeSize]
+  );
+  const handleInputChange = (0, import_react3.useCallback)(
+    (e) => {
+      var _a;
+      const file = (_a = e.target.files) == null ? void 0 : _a[0];
+      if (file) {
+        handleFileSelect(file);
+      }
+      e.target.value = "";
+    },
+    [handleFileSelect]
+  );
+  const handleDrop = (0, import_react3.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+      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 handleDragEnter = (0, import_react3.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = (0, import_react3.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsDragOver(false);
+    }
+  }, []);
+  const handleClick = (0, import_react3.useCallback)(() => {
+    var _a;
+    if (uploadState === "idle" || uploadState === "error") {
+      (_a = fileInputRef.current) == null ? void 0 : _a.click();
+    }
+  }, [uploadState]);
+  const styles = (0, import_react3.useMemo)(
+    () => (0, import_theme.imagePlaceholder)({
+      size: "md",
+      variant: isDragOver ? "default" : void 0
+    }),
+    [isDragOver]
+  );
+  const errorStyles = (0, import_react3.useMemo)(
+    () => (0, import_theme.imagePlaceholder)({ size: "md", variant: "error" }),
+    []
+  );
+  const uploadingStyles = (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" }),
+    []
+  );
+  if (!fileHandler) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", 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" })
+        }
+      )
+    ] }) }) });
+  }
+  if (uploadState === "uploading") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: uploadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: uploadingStyles.content(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative size-12", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "svg",
+          {
+            className: "size-12 -rotate-90",
+            viewBox: "0 0 36 36",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "circle",
+                {
+                  cx: "18",
+                  cy: "18",
+                  r: "16",
+                  fill: "none",
+                  className: "stroke-muted",
+                  strokeWidth: "2"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "circle",
+                {
+                  cx: "18",
+                  cy: "18",
+                  r: "16",
+                  fill: "none",
+                  className: "stroke-primary",
+                  strokeWidth: "2",
+                  strokeDasharray: 100,
+                  strokeDashoffset: 100 - uploadProgress,
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium", children: [
+          uploadProgress,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: uploadingStyles.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-upload", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: errorStyles.root(), onClick: handleClick, 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) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: errorStyles.hint(), children: intl.formatMessage(messages.click_to_retry) })
+      ] }),
+      /* @__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: errorStyles.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" })
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: `${styles.root()} ${isDragOver ? "border-primary bg-primary/10" : ""}`,
+      onClick: handleClick,
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      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" })
+          }
+        )
+      ]
+    }
+  ) });
+}
+var image_upload_view_default = ImageUploadNodeView;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImageUploadNodeView
+});

package/dist/extensions/image-upload/image-upload-view.mjs

@@ -0,0 +1,12 @@
+"use client";
+"use client";
+import {
+  ImageUploadNodeView,
+  image_upload_view_default
+} from "../../chunk-EAAQE5ZV.mjs";
+import "../../chunk-DSBJFMHK.mjs";
+import "../../chunk-VRQ6OSAZ.mjs";
+export {
+  ImageUploadNodeView,
+  image_upload_view_default as default
+};

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

@@ -0,0 +1,46 @@
+import { Node } from '@tiptap/core';
+export { default as ImageUploadNodeView } from './image-upload-view.mjs';
+export { messages as imageUploadMessages } from './messages.mjs';
+import 'react/jsx-runtime';
+import '@tiptap/react';
+
+interface ImageUploadNodeOptions {
+    /**
+     * Allowed MIME types for upload
+     * @default ["image/*"]
+     */
+    accept: string;
+    /**
+     * Maximum file size in bytes (0 = unlimited)
+     * @default 0
+     */
+    maxSize: number;
+    /**
+     * HTML attributes to add to the wrapper element
+     */
+    HTMLAttributes: Record<string, unknown>;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        imageUpload: {
+            /**
+             * Insert an image upload placeholder
+             */
+            setImageUpload: () => ReturnType;
+        };
+    }
+}
+/**
+ * ImageUploadNode - Upload placeholder that converts to a regular image node
+ *
+ * This extension provides a file upload UI that, after successful upload,
+ * replaces itself with a standard `image` node from @tiptap/extension-image.
+ *
+ * This separation allows:
+ * - Clean coexistence with the standard image extension
+ * - Upload UI only when needed
+ * - Standard image handling for display
+ */
+declare const ImageUploadNode: Node<ImageUploadNodeOptions, any>;
+
+export { ImageUploadNode, type ImageUploadNodeOptions };

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

@@ -0,0 +1,46 @@
+import { Node } from '@tiptap/core';
+export { default as ImageUploadNodeView } from './image-upload-view.js';
+export { messages as imageUploadMessages } from './messages.js';
+import 'react/jsx-runtime';
+import '@tiptap/react';
+
+interface ImageUploadNodeOptions {
+    /**
+     * Allowed MIME types for upload
+     * @default ["image/*"]
+     */
+    accept: string;
+    /**
+     * Maximum file size in bytes (0 = unlimited)
+     * @default 0
+     */
+    maxSize: number;
+    /**
+     * HTML attributes to add to the wrapper element
+     */
+    HTMLAttributes: Record<string, unknown>;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        imageUpload: {
+            /**
+             * Insert an image upload placeholder
+             */
+            setImageUpload: () => ReturnType;
+        };
+    }
+}
+/**
+ * ImageUploadNode - Upload placeholder that converts to a regular image node
+ *
+ * This extension provides a file upload UI that, after successful upload,
+ * replaces itself with a standard `image` node from @tiptap/extension-image.
+ *
+ * This separation allows:
+ * - Clean coexistence with the standard image extension
+ * - Upload UI only when needed
+ * - Standard image handling for display
+ */
+declare const ImageUploadNode: Node<ImageUploadNodeOptions, any>;
+
+export { ImageUploadNode, type ImageUploadNodeOptions };