@kopexa/tiptap 17.1.0 → 17.2.1

package/dist/{chunk-SFG45HEU.mjs → chunk-2U5CQUZH.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   MathBlockView
-} from "./chunk-DSK3HK5D.mjs";
+} from "./chunk-UVHVCION.mjs";
 
 // src/extensions/math/index.ts
 import { InputRule, mergeAttributes, Node } from "@tiptap/core";

package/dist/{chunk-QCRK7XVV.mjs → chunk-32SUXCAQ.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   CalloutNodeView
-} from "./chunk-MYO2CUDR.mjs";
+} from "./chunk-VF3G2URZ.mjs";
 
 // src/extensions/callout/index.ts
 import { mergeAttributes, Node } from "@tiptap/core";

package/dist/{chunk-EBFGDPWY.mjs → chunk-3ZPLSXTZ.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   useSlashDropdownMenu
-} from "./chunk-EH2JHHGJ.mjs";
+} from "./chunk-6552DQWB.mjs";
 import {
   SuggestionMenu
-} from "./chunk-XLSZK3WJ.mjs";
+} from "./chunk-ZYFCSR3E.mjs";
 import {
   filterSuggestionItems
 } from "./chunk-CNVACBGT.mjs";

package/dist/{chunk-EH2JHHGJ.mjs → chunk-6552DQWB.mjs}

@@ -349,11 +349,9 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
     },
     // Upload
     image: {
-      check: (editor) => isNodeInSchema("image", editor),
+      check: (editor) => isNodeInSchema("imageUpload", editor),
       action: ({ editor }) => {
-        editor.chain().focus().insertContent({
-          type: "imageUpload"
-        }).run();
+        editor.chain().focus().setImageUpload().run();
       }
     }
   };

package/dist/{chunk-WKJGDCGA.mjs → chunk-7VGROP26.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useLinkPopover
-} from "./chunk-LHXRE26G.mjs";
+} from "./chunk-VTKJPVNM.mjs";
 import {
   useTiptapEditor
 } from "./chunk-P55PLOHR.mjs";

package/dist/{chunk-6YGMTHOY.mjs → chunk-7VW67NVL.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   InlineMathView
-} from "./chunk-SCL22AGK.mjs";
+} from "./chunk-BXHPO3T7.mjs";
 
 // src/extensions/math/inline-math.ts
 import { InputRule, mergeAttributes, Node } from "@tiptap/core";

package/dist/{chunk-SCL22AGK.mjs → chunk-BXHPO3T7.mjs}

@@ -7,7 +7,10 @@ import {
 import { Button } from "@kopexa/button";
 import { Dialog } from "@kopexa/dialog";
 import { Label } from "@kopexa/label";
-import { NodeViewWrapper } from "@tiptap/react";
+import {
+  NodeViewWrapper,
+  useEditorState
+} from "@tiptap/react";
 import katex from "katex";
 import "katex/dist/katex.min.css";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -17,6 +20,13 @@ function InlineMathView({ editor, node, getPos }) {
   const intl = useIntl();
   const attrs = node.attrs;
   const { latex = "" } = attrs;
+  const isEditable = useEditorState({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a;
+      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
+    }
+  });
   const [isOpen, setIsOpen] = useState(false);
   const [localLatex, setLocalLatex] = useState(latex);
   const [error, setError] = useState(null);
@@ -69,11 +79,11 @@ function InlineMathView({ editor, node, getPos }) {
     (e) => {
       e.stopPropagation();
       e.preventDefault();
-      if (editor.isEditable) {
+      if (isEditable) {
         setIsOpen(true);
       }
     },
-    [editor.isEditable]
+    [isEditable]
   );
   const isEmpty = !latex;
   return /* @__PURE__ */ jsxs(
@@ -87,7 +97,7 @@ function InlineMathView({ editor, node, getPos }) {
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: `inline-math cursor-pointer rounded px-0.5 transition-colors ${editor.isEditable ? "hover:bg-primary/10 hover:ring-1 hover:ring-primary/20" : ""} ${isEmpty ? "text-muted-foreground italic" : ""}`,
+            className: `inline-math cursor-pointer rounded px-0.5 transition-colors ${isEditable ? "hover:bg-primary/10 hover:ring-1 hover:ring-primary/20" : ""} ${isEmpty ? "text-muted-foreground italic" : ""}`,
             onClick: handleClick,
             children: isEmpty ? /* @__PURE__ */ jsx("span", { className: "text-xs", children: "$?$" }) : renderedHtml ? /* @__PURE__ */ jsx(
               "span",

package/dist/chunk-DSBJFMHK.mjs

@@ -0,0 +1,38 @@
+"use client";
+
+// src/extensions/image-upload/messages.ts
+import { defineMessages } from "react-intl";
+var messages = 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"
+  }
+});
+
+export {
+  messages
+};

package/dist/chunk-EAAQE5ZV.mjs

@@ -0,0 +1,283 @@
+"use client";
+import {
+  messages
+} from "./chunk-DSBJFMHK.mjs";
+import {
+  useEditorFile
+} from "./chunk-VRQ6OSAZ.mjs";
+
+// src/extensions/image-upload/image-upload-view.tsx
+import { IconButton } from "@kopexa/button";
+import {
+  AlertCircleIcon,
+  ImageIcon,
+  TrashIcon,
+  UploadIcon
+} from "@kopexa/icons";
+import { imagePlaceholder } from "@kopexa/theme";
+import {
+  NodeViewWrapper,
+  useEditorState
+} from "@tiptap/react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useIntl } from "react-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ImageUploadNodeView({ editor, node, getPos }) {
+  const intl = useIntl();
+  const fileHandler = useEditorFile();
+  const isEditable = useEditorState({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a;
+      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
+    }
+  });
+  const [uploadState, setUploadState] = useState("idle");
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const fileInputRef = useRef(null);
+  const handleRemove = useCallback(() => {
+    const pos = getPos();
+    if (pos === void 0) return;
+    editor.commands.deleteRange({
+      from: pos,
+      to: pos + node.nodeSize
+    });
+  }, [editor, getPos, node.nodeSize]);
+  const handleFileSelect = 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 = 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 = 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 = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDragEnter = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsDragOver(false);
+    }
+  }, []);
+  const handleClick = useCallback(() => {
+    var _a;
+    if (uploadState === "idle" || uploadState === "error") {
+      (_a = fileInputRef.current) == null ? void 0 : _a.click();
+    }
+  }, [uploadState]);
+  const styles = useMemo(
+    () => imagePlaceholder({
+      size: "md",
+      variant: isDragOver ? "default" : void 0
+    }),
+    [isDragOver]
+  );
+  const errorStyles = useMemo(
+    () => imagePlaceholder({ size: "md", variant: "error" }),
+    []
+  );
+  const uploadingStyles = useMemo(
+    () => imagePlaceholder({ size: "md", variant: "uploading" }),
+    []
+  );
+  const disabledStyles = useMemo(
+    () => imagePlaceholder({ size: "md", variant: "disabled" }),
+    []
+  );
+  if (!fileHandler) {
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ jsx("div", { className: disabledStyles.root(), children: /* @__PURE__ */ jsxs("div", { className: disabledStyles.content(), children: [
+      /* @__PURE__ */ jsx(ImageIcon, { className: disabledStyles.icon() }),
+      /* @__PURE__ */ jsx("span", { className: disabledStyles.text(), children: intl.formatMessage(messages.files_not_supported) }),
+      isEditable && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          variant: "ghost",
+          onClick: handleRemove,
+          "aria-label": intl.formatMessage(messages.remove),
+          children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-4" })
+        }
+      )
+    ] }) }) });
+  }
+  if (uploadState === "uploading") {
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ jsx("div", { className: uploadingStyles.root(), children: /* @__PURE__ */ jsxs("div", { className: uploadingStyles.content(), children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative size-12", children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "size-12 -rotate-90",
+            viewBox: "0 0 36 36",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "18",
+                  cy: "18",
+                  r: "16",
+                  fill: "none",
+                  className: "stroke-muted",
+                  strokeWidth: "2"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "18",
+                  cy: "18",
+                  r: "16",
+                  fill: "none",
+                  className: "stroke-primary",
+                  strokeWidth: "2",
+                  strokeDasharray: 100,
+                  strokeDashoffset: 100 - uploadProgress,
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium", children: [
+          uploadProgress,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: uploadingStyles.text(), children: intl.formatMessage(messages.uploading) })
+    ] }) }) });
+  }
+  if (uploadState === "error") {
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ jsxs("div", { className: errorStyles.root(), onClick: handleClick, children: [
+      /* @__PURE__ */ jsxs("div", { className: errorStyles.content(), children: [
+        /* @__PURE__ */ jsx(AlertCircleIcon, { className: errorStyles.icon() }),
+        /* @__PURE__ */ jsx("span", { className: errorStyles.text(), children: intl.formatMessage(messages.upload_error) }),
+        /* @__PURE__ */ jsx("span", { className: errorStyles.hint(), children: intl.formatMessage(messages.click_to_retry) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: "image/*",
+          className: "hidden",
+          onChange: handleInputChange
+        }
+      ),
+      isEditable && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          variant: "ghost",
+          className: errorStyles.removeButton(),
+          onClick: (e) => {
+            e.stopPropagation();
+            handleRemove();
+          },
+          "aria-label": intl.formatMessage(messages.remove),
+          children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-3.5" })
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${styles.root()} ${isDragOver ? "border-primary bg-primary/10" : ""}`,
+      onClick: handleClick,
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.content(), children: [
+          /* @__PURE__ */ jsx(UploadIcon, { className: styles.icon() }),
+          /* @__PURE__ */ jsx("span", { className: styles.text(), children: intl.formatMessage(messages.upload_placeholder) }),
+          /* @__PURE__ */ jsx("span", { className: styles.hint(), children: intl.formatMessage(messages.upload_hint) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*",
+            className: "hidden",
+            onChange: handleInputChange
+          }
+        ),
+        isEditable && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            variant: "ghost",
+            className: styles.removeButton(),
+            onClick: (e) => {
+              e.stopPropagation();
+              handleRemove();
+            },
+            "aria-label": intl.formatMessage(messages.remove),
+            children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  ) });
+}
+var image_upload_view_default = ImageUploadNodeView;
+
+export {
+  ImageUploadNodeView,
+  image_upload_view_default
+};

package/dist/{chunk-Z6GJ2GKW.mjs → chunk-FDPXD6VC.mjs}

@@ -1,7 +1,4 @@
 "use client";
-import {
-  TableButton
-} from "./chunk-VX3HSJ76.mjs";
 import {
   TextAlignButton
 } from "./chunk-GYIYX2JH.mjs";
@@ -11,28 +8,34 @@ import {
 import {
   UndoRedoButton
 } from "./chunk-2SI7MRAE.mjs";
+import {
+  TableButton
+} from "./chunk-VX3HSJ76.mjs";
 import {
   ListDropdownMenu
 } from "./chunk-Q7DFJ5NI.mjs";
 import {
   ColorHighlightPopover
-} from "./chunk-XL5FS7LN.mjs";
+} from "./chunk-C5RQWJKE.mjs";
 import {
   HeadingDropdownMenu
 } from "./chunk-V6TAZMQN.mjs";
-import {
-  LinkPopover
-} from "./chunk-WKJGDCGA.mjs";
 import {
   MarkButton,
   canToggleMark
 } from "./chunk-LNVWG34E.mjs";
+import {
+  LinkPopover
+} from "./chunk-7VGROP26.mjs";
 import {
   CodeBlockButton
 } from "./chunk-OEVR5N7X.mjs";
 import {
   BlockquoteButton
 } from "./chunk-W2FLOOJ6.mjs";
+import {
+  useTiptapEditor
+} from "./chunk-P55PLOHR.mjs";
 import {
   useEditorUIContext
 } from "./chunk-REJEJXOZ.mjs";
@@ -42,9 +45,6 @@ import {
 import {
   useWindowSize
 } from "./chunk-DT7ML2P4.mjs";
-import {
-  useTiptapEditor
-} from "./chunk-P55PLOHR.mjs";
 
 // src/presets/basic/editor-header.tsx
 import { MoreVerticalIcon } from "@kopexa/icons";

package/dist/chunk-HTJ2RXOG.mjs

@@ -0,0 +1,32 @@
+"use client";
+import {
+  ImageNodeView
+} from "./chunk-KYLBKQ2E.mjs";
+
+// src/extensions/image/index.ts
+import { Image as TiptapImage } from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+var ImageNode = TiptapImage.extend({
+  addAttributes() {
+    var _a;
+    return {
+      ...(_a = this.parent) == null ? void 0 : _a.call(this),
+      // Upload state for drag & drop / paste uploads
+      uploadState: {
+        default: null,
+        rendered: false
+      },
+      uploadProgress: {
+        default: null,
+        rendered: false
+      }
+    };
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageNodeView);
+  }
+});
+
+export {
+  ImageNode
+};