@kopexa/tiptap 17.1.0 → 17.2.0

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-5GFFTVMZ.mjs

@@ -0,0 +1,62 @@
+"use client";
+
+// src/extensions/image/messages.ts
+import { defineMessages } from "react-intl";
+var messages = defineMessages({
+  loading: {
+    id: "editor.image.loading",
+    defaultMessage: "Loading image..."
+  },
+  error: {
+    id: "editor.image.error",
+    defaultMessage: "Failed to load image"
+  },
+  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"
+  },
+  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"
+  },
+  remove: {
+    id: "editor.image.remove",
+    defaultMessage: "Remove"
+  }
+});
+
+export {
+  messages
+};

package/dist/{chunk-B6SP3ADV.mjs → chunk-7SRL3P4B.mjs}

@@ -1,19 +1,19 @@
 "use client";
 import {
   SlashDropdownMenu
-} from "./chunk-EBFGDPWY.mjs";
-import {
-  useScrollToHash
-} from "./chunk-JNL4KY45.mjs";
+} from "./chunk-E5NW3MJZ.mjs";
 import {
   LinkBubble
 } from "./chunk-XNDXYI2N.mjs";
 import {
-  BubbleMenu
-} from "./chunk-KTIMXK5V.mjs";
+  useScrollToHash
+} from "./chunk-DZLGLP7R.mjs";
 import {
   EditorHeader
-} from "./chunk-Z6GJ2GKW.mjs";
+} from "./chunk-QAE2D4KV.mjs";
+import {
+  BubbleMenu
+} from "./chunk-NSYSECKW.mjs";
 import {
   useUiEditorState
 } from "./chunk-BXJYNSWQ.mjs";
@@ -22,7 +22,7 @@ import {
 } from "./chunk-REJEJXOZ.mjs";
 import {
   useCreateEditor
-} from "./chunk-IY4SCXZN.mjs";
+} from "./chunk-UU6JK5HX.mjs";
 
 // src/presets/basic/index.tsx
 import {

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-EBFGDPWY.mjs → chunk-E5NW3MJZ.mjs}

@@ -1,13 +1,13 @@
 "use client";
-import {
-  useSlashDropdownMenu
-} from "./chunk-EH2JHHGJ.mjs";
 import {
   SuggestionMenu
-} from "./chunk-XLSZK3WJ.mjs";
+} from "./chunk-ZYFCSR3E.mjs";
 import {
   filterSuggestionItems
 } from "./chunk-CNVACBGT.mjs";
+import {
+  useSlashDropdownMenu
+} from "./chunk-NEHW62L7.mjs";
 
 // src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
 import { Button } from "@kopexa/button";

package/dist/chunk-LMCQMSW2.mjs

@@ -0,0 +1,345 @@
+"use client";
+import {
+  messages
+} from "./chunk-5GFFTVMZ.mjs";
+import {
+  useEditorFile
+} from "./chunk-VRQ6OSAZ.mjs";
+
+// src/extensions/image/image-view.tsx
+import { IconButton } from "@kopexa/button";
+import {
+  AlertCircleIcon,
+  ArrowCounterClockwiseIcon,
+  ImageIcon,
+  TrashIcon,
+  UploadIcon
+} from "@kopexa/icons";
+import { imagePlaceholder } from "@kopexa/theme";
+import {
+  NodeViewWrapper,
+  useEditorState
+} from "@tiptap/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useIntl } from "react-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ImageNodeView({ editor, node, getPos }) {
+  var _a;
+  const intl = useIntl();
+  const fileHandler = useEditorFile();
+  const attrs = node.attrs;
+  const isEditable = useEditorState({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a2;
+      return (_a2 = e == null ? void 0 : e.isEditable) != null ? _a2 : false;
+    }
+  });
+  const { src, alt, title, uploadState, uploadProgress } = attrs;
+  const [resolvedUrl, setResolvedUrl] = useState(null);
+  const [resolveState, setResolveState] = useState("idle");
+  const needsResolve = (_a = fileHandler == null ? void 0 : fileHandler.isReference(src)) != null ? _a : false;
+  const resolveImage = useCallback(async () => {
+    if (!src) return;
+    if (!needsResolve) {
+      setResolvedUrl(src);
+      setResolveState("resolved");
+      return;
+    }
+    if (!fileHandler) {
+      setResolveState("error");
+      return;
+    }
+    setResolveState("loading");
+    try {
+      const url = await fileHandler.resolve(src);
+      setResolvedUrl(url);
+      setResolveState("resolved");
+    } catch {
+      setResolveState("error");
+    }
+  }, [src, needsResolve, fileHandler]);
+  useEffect(() => {
+    resolveImage();
+  }, [resolveImage]);
+  const handleRetry = useCallback(() => {
+    resolveImage();
+  }, [resolveImage]);
+  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 fileInputRef = useRef(null);
+  const handleFileSelect = 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 = useCallback(
+    (e) => {
+      var _a2;
+      const file = (_a2 = e.target.files) == null ? void 0 : _a2[0];
+      if (file) {
+        handleFileSelect(file);
+      }
+    },
+    [handleFileSelect]
+  );
+  const handleDrop = 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 = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const styles = useMemo(() => imagePlaceholder({ size: "md" }), []);
+  const errorStyles = useMemo(
+    () => imagePlaceholder({ size: "md", variant: "error" }),
+    []
+  );
+  const uploadingStyles = useMemo(
+    () => imagePlaceholder({ size: "md", variant: "uploading" }),
+    []
+  );
+  const disabledStyles = useMemo(
+    () => imagePlaceholder({ size: "md", variant: "disabled" }),
+    []
+  );
+  const isEmpty = !src;
+  if (isEmpty && !uploadState) {
+    if (!fileHandler) {
+      return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "my-4", "data-type": "image", 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" })
+          }
+        )
+      ] }) }) });
+    }
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.root(),
+        onClick: () => {
+          var _a2;
+          return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+        },
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        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" })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+  if (uploadState === "uploading") {
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "my-4", "data-type": "image", 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 != null ? uploadProgress : 0),
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium", children: [
+          uploadProgress != null ? uploadProgress : 0,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: uploadingStyles.text(), children: intl.formatMessage(messages.uploading) })
+    ] }) }) });
+  }
+  if (uploadState === "error") {
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ jsx("div", { className: errorStyles.root(), 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) }),
+      isEditable && /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          variant: "ghost",
+          onClick: handleRemove,
+          "aria-label": intl.formatMessage(messages.remove),
+          children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-4" })
+        }
+      ) })
+    ] }) }) });
+  }
+  if (resolveState === "loading") {
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ jsx("div", { className: `${uploadingStyles.root()} animate-pulse`, children: /* @__PURE__ */ jsx("span", { className: uploadingStyles.text(), children: intl.formatMessage(messages.loading) }) }) });
+  }
+  if (resolveState === "error") {
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ jsx("div", { className: errorStyles.root(), children: /* @__PURE__ */ jsxs("div", { className: errorStyles.content(), children: [
+      /* @__PURE__ */ jsx(AlertCircleIcon, { className: errorStyles.icon() }),
+      /* @__PURE__ */ jsx("span", { className: errorStyles.text(), children: intl.formatMessage(messages.error) }),
+      isEditable && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            variant: "outline",
+            onClick: handleRetry,
+            "aria-label": intl.formatMessage(messages.retry),
+            children: /* @__PURE__ */ jsx(ArrowCounterClockwiseIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            variant: "ghost",
+            onClick: handleRemove,
+            "aria-label": intl.formatMessage(messages.remove),
+            children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-4" })
+          }
+        )
+      ] })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: "my-4 relative group", "data-type": "image", children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: resolvedUrl != null ? resolvedUrl : src,
+        alt: alt != null ? alt : "",
+        title: title != null ? title : void 0,
+        className: "max-w-full h-auto rounded-lg",
+        draggable: false
+      }
+    ),
+    isEditable && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1", children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "sm",
+        variant: "outline",
+        onClick: handleRemove,
+        "aria-label": intl.formatMessage(messages.remove),
+        children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-3.5" })
+      }
+    ) })
+  ] });
+}
+var image_view_default = ImageNodeView;
+
+export {
+  ImageNodeView,
+  image_view_default
+};

package/dist/{chunk-EH2JHHGJ.mjs → chunk-NEHW62L7.mjs}

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

package/dist/{chunk-KTIMXK5V.mjs → chunk-NSYSECKW.mjs}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  LinkPopover
-} from "./chunk-WKJGDCGA.mjs";
 import {
   MarkButton
 } from "./chunk-LNVWG34E.mjs";
+import {
+  LinkPopover
+} from "./chunk-7VGROP26.mjs";
 
 // src/ui/bubble-menu/index.tsx
 import { Toolbar, ToolbarGroup, ToolbarSeparator } from "@kopexa/toolbar";

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

@@ -1,4 +1,7 @@
 "use client";
+import {
+  UndoRedoButton
+} from "./chunk-2SI7MRAE.mjs";
 import {
   TableButton
 } from "./chunk-VX3HSJ76.mjs";
@@ -8,31 +11,31 @@ import {
 import {
   canSetTextAlign
 } from "./chunk-IQERE7KP.mjs";
-import {
-  UndoRedoButton
-} from "./chunk-2SI7MRAE.mjs";
 import {
   ListDropdownMenu
 } from "./chunk-Q7DFJ5NI.mjs";
-import {
-  ColorHighlightPopover
-} from "./chunk-XL5FS7LN.mjs";
 import {
   HeadingDropdownMenu
 } from "./chunk-V6TAZMQN.mjs";
 import {
-  LinkPopover
-} from "./chunk-WKJGDCGA.mjs";
+  ColorHighlightPopover
+} from "./chunk-C5RQWJKE.mjs";
+import {
+  BlockquoteButton
+} from "./chunk-W2FLOOJ6.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";
+  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";