@kopexa/tiptap 17.2.0 → 17.2.2

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

@@ -1,13 +1,13 @@
 "use client";
+import {
+  useSlashDropdownMenu
+} from "./chunk-6552DQWB.mjs";
 import {
   SuggestionMenu
 } 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-7SRL3P4B.mjs → chunk-5QFCLKHL.mjs}

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

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

@@ -349,9 +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().setImage({ src: "" }).run();
+        editor.chain().focus().setImageUpload().run();
       }
     }
   };

package/dist/{chunk-5GFFTVMZ.mjs → chunk-DSBJFMHK.mjs}

@@ -1,16 +1,8 @@
 "use client";
 
-// src/extensions/image/messages.ts
+// src/extensions/image-upload/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"
@@ -27,30 +19,14 @@ var messages = defineMessages({
     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..."
+  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"
   },
-  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"

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-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
+};

package/dist/{chunk-LMCQMSW2.mjs → chunk-KYLBKQ2E.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   messages
-} from "./chunk-5GFFTVMZ.mjs";
+} from "./chunk-Z365KVQY.mjs";
 import {
   useEditorFile
 } from "./chunk-VRQ6OSAZ.mjs";
@@ -11,23 +11,21 @@ import { IconButton } from "@kopexa/button";
 import {
   AlertCircleIcon,
   ArrowCounterClockwiseIcon,
-  ImageIcon,
-  TrashIcon,
-  UploadIcon
+  TrashIcon
 } from "@kopexa/icons";
 import { imagePlaceholder } from "@kopexa/theme";
 import {
   NodeViewWrapper,
   useEditorState
 } from "@tiptap/react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, 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 { src, alt, title, uploadState, uploadProgress } = node.attrs;
   const isEditable = useEditorState({
     editor,
     selector: ({ editor: e }) => {
@@ -35,7 +33,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] = useState(null);
   const [resolveState, setResolveState] = useState("idle");
   const needsResolve = (_a = fileHandler == null ? void 0 : fileHandler.isReference(src)) != null ? _a : false;
@@ -47,7 +44,8 @@ function ImageNodeView({ editor, node, getPos }) {
       return;
     }
     if (!fileHandler) {
-      setResolveState("error");
+      setResolvedUrl(src);
+      setResolveState("resolved");
       return;
     }
     setResolveState("loading");
@@ -73,156 +71,16 @@ function ImageNodeView({ editor, node, getPos }) {
       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(
+  const loadingStyles = 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: [
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ jsx("div", { className: loadingStyles.root(), children: /* @__PURE__ */ jsxs("div", { className: loadingStyles.content(), children: [
       /* @__PURE__ */ jsxs("div", { className: "relative size-12", children: [
         /* @__PURE__ */ jsxs(
           "svg",
@@ -264,14 +122,14 @@ function ImageNodeView({ editor, node, getPos }) {
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: uploadingStyles.text(), children: intl.formatMessage(messages.uploading) })
+      /* @__PURE__ */ jsx("span", { className: loadingStyles.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(
+      isEditable && /* @__PURE__ */ jsx(
         IconButton,
         {
           size: "sm",
@@ -280,11 +138,11 @@ function ImageNodeView({ editor, node, getPos }) {
           "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) }) }) });
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ jsx("div", { className: `${loadingStyles.root()} animate-pulse`, children: /* @__PURE__ */ jsx("span", { className: loadingStyles.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: [