@kopexa/tiptap 17.2.0 → 17.2.2

package/dist/index.js

@@ -35,6 +35,7 @@ __export(index_exports, {
   Editor: () => BasicEditor,
   EditorFileProvider: () => EditorFileProvider,
   ImageNode: () => ImageNode,
+  ImageUploadNode: () => ImageUploadNode,
   InlineMath: () => InlineMath,
   MathBlock: () => MathBlock,
   TocNode: () => TocNode,
@@ -461,7 +462,7 @@ var CalloutNode = import_core.Node.create({
 });
 
 // src/extensions/image/index.ts
-var import_core2 = require("@tiptap/core");
+var import_extension_image = require("@tiptap/extension-image");
 var import_react8 = require("@tiptap/react");
 
 // src/extensions/image/image-view.tsx
@@ -479,6 +480,10 @@ var messages2 = (0, import_react_intl3.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"
@@ -487,38 +492,6 @@ var messages2 = (0, import_react_intl3.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"
@@ -535,7 +508,7 @@ function ImageNodeView({ editor, node, getPos }) {
   var _a;
   const intl = (0, import_react_intl4.useIntl)();
   const fileHandler = useEditorFile();
-  const attrs = node.attrs;
+  const { src, alt, title, uploadState, uploadProgress } = node.attrs;
   const isEditable = (0, import_react6.useEditorState)({
     editor,
     selector: ({ editor: e }) => {
@@ -543,7 +516,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_react7.useState)(null);
   const [resolveState, setResolveState] = (0, import_react7.useState)("idle");
   const needsResolve = (_a = fileHandler == null ? void 0 : fileHandler.isReference(src)) != null ? _a : false;
@@ -555,7 +527,8 @@ function ImageNodeView({ editor, node, getPos }) {
       return;
     }
     if (!fileHandler) {
-      setResolveState("error");
+      setResolvedUrl(src);
+      setResolveState("resolved");
       return;
     }
     setResolveState("loading");
@@ -581,156 +554,16 @@ function ImageNodeView({ editor, node, getPos }) {
       to: pos + node.nodeSize
     });
   }, [editor, getPos, node.nodeSize]);
-  const fileInputRef = (0, import_react7.useRef)(null);
-  const handleFileSelect = (0, import_react7.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_react7.useCallback)(
-    (e) => {
-      var _a2;
-      const file = (_a2 = e.target.files) == null ? void 0 : _a2[0];
-      if (file) {
-        handleFileSelect(file);
-      }
-    },
-    [handleFileSelect]
-  );
-  const handleDrop = (0, import_react7.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_react7.useCallback)((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
-  const styles = (0, import_react7.useMemo)(() => (0, import_theme2.imagePlaceholder)({ size: "md" }), []);
   const errorStyles = (0, import_react7.useMemo)(
     () => (0, import_theme2.imagePlaceholder)({ size: "md", variant: "error" }),
     []
   );
-  const uploadingStyles = (0, import_react7.useMemo)(
+  const loadingStyles = (0, import_react7.useMemo)(
     () => (0, import_theme2.imagePlaceholder)({ size: "md", variant: "uploading" }),
     []
   );
-  const disabledStyles = (0, import_react7.useMemo)(
-    () => (0, import_theme2.imagePlaceholder)({ size: "md", variant: "disabled" }),
-    []
-  );
-  const isEmpty = !src;
-  if (isEmpty && !uploadState) {
-    if (!fileHandler) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: disabledStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: disabledStyles.content(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.ImageIcon, { className: disabledStyles.icon() }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: disabledStyles.text(), children: intl.formatMessage(messages2.files_not_supported) }),
-        isEditable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_button2.IconButton,
-          {
-            size: "sm",
-            variant: "ghost",
-            onClick: handleRemove,
-            "aria-label": intl.formatMessage(messages2.remove),
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.TrashIcon, { className: "size-4" })
-          }
-        )
-      ] }) }) });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("div", { className: styles.content(), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.UploadIcon, { className: styles.icon() }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles.text(), children: intl.formatMessage(messages2.upload_placeholder) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles.hint(), children: intl.formatMessage(messages2.upload_hint) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "input",
-            {
-              ref: fileInputRef,
-              type: "file",
-              accept: "image/*",
-              className: "hidden",
-              onChange: handleInputChange
-            }
-          ),
-          isEditable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_button2.IconButton,
-            {
-              size: "sm",
-              variant: "ghost",
-              className: styles.removeButton(),
-              onClick: (e) => {
-                e.stopPropagation();
-                handleRemove();
-              },
-              "aria-label": intl.formatMessage(messages2.remove),
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.TrashIcon, { className: "size-3.5" })
-            }
-          )
-        ]
-      }
-    ) });
-  }
   if (uploadState === "uploading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: uploadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: uploadingStyles.content(), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: loadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: loadingStyles.content(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative size-12", children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "svg",
@@ -772,14 +605,14 @@ function ImageNodeView({ editor, node, getPos }) {
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: uploadingStyles.text(), children: intl.formatMessage(messages2.uploading) })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: loadingStyles.text(), children: intl.formatMessage(messages2.uploading) })
     ] }) }) });
   }
   if (uploadState === "error") {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: errorStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: errorStyles.content(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.AlertCircleIcon, { className: errorStyles.icon() }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: errorStyles.text(), children: intl.formatMessage(messages2.upload_error) }),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_button2.IconButton,
         {
           size: "sm",
@@ -788,11 +621,11 @@ function ImageNodeView({ editor, node, getPos }) {
           "aria-label": intl.formatMessage(messages2.remove),
           children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.TrashIcon, { className: "size-4" })
         }
-      ) })
+      )
     ] }) }) });
   }
   if (resolveState === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${uploadingStyles.root()} animate-pulse`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: uploadingStyles.text(), children: intl.formatMessage(messages2.loading) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${loadingStyles.root()} animate-pulse`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: loadingStyles.text(), children: intl.formatMessage(messages2.loading) }) }) });
   }
   if (resolveState === "error") {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: errorStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: errorStyles.content(), children: [
@@ -847,34 +680,345 @@ function ImageNodeView({ editor, node, getPos }) {
 }
 
 // src/extensions/image/index.ts
-var ImageNode = import_core2.Node.create({
-  name: "image",
+var ImageNode = import_extension_image.Image.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 (0, import_react8.ReactNodeViewRenderer)(ImageNodeView);
+  }
+});
+
+// src/extensions/image-upload/index.ts
+var import_core2 = require("@tiptap/core");
+var import_react11 = require("@tiptap/react");
+
+// src/extensions/image-upload/image-upload-view.tsx
+var import_button3 = require("@kopexa/button");
+var import_icons4 = require("@kopexa/icons");
+var import_theme3 = require("@kopexa/theme");
+var import_react9 = require("@tiptap/react");
+var import_react10 = require("react");
+var import_react_intl6 = require("react-intl");
+
+// src/extensions/image-upload/messages.ts
+var import_react_intl5 = require("react-intl");
+var messages3 = (0, import_react_intl5.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_runtime5 = require("react/jsx-runtime");
+function ImageUploadNodeView({ editor, node, getPos }) {
+  const intl = (0, import_react_intl6.useIntl)();
+  const fileHandler = useEditorFile();
+  const isEditable = (0, import_react9.useEditorState)({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a;
+      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
+    }
+  });
+  const [uploadState, setUploadState] = (0, import_react10.useState)("idle");
+  const [uploadProgress, setUploadProgress] = (0, import_react10.useState)(0);
+  const [isDragOver, setIsDragOver] = (0, import_react10.useState)(false);
+  const fileInputRef = (0, import_react10.useRef)(null);
+  const handleRemove = (0, import_react10.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_react10.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_react10.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_react10.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_react10.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDragEnter = (0, import_react10.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = (0, import_react10.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsDragOver(false);
+    }
+  }, []);
+  const handleClick = (0, import_react10.useCallback)(() => {
+    var _a;
+    if (uploadState === "idle" || uploadState === "error") {
+      (_a = fileInputRef.current) == null ? void 0 : _a.click();
+    }
+  }, [uploadState]);
+  const styles = (0, import_react10.useMemo)(
+    () => (0, import_theme3.imagePlaceholder)({
+      size: "md",
+      variant: isDragOver ? "default" : void 0
+    }),
+    [isDragOver]
+  );
+  const errorStyles = (0, import_react10.useMemo)(
+    () => (0, import_theme3.imagePlaceholder)({ size: "md", variant: "error" }),
+    []
+  );
+  const uploadingStyles = (0, import_react10.useMemo)(
+    () => (0, import_theme3.imagePlaceholder)({ size: "md", variant: "uploading" }),
+    []
+  );
+  const disabledStyles = (0, import_react10.useMemo)(
+    () => (0, import_theme3.imagePlaceholder)({ size: "md", variant: "disabled" }),
+    []
+  );
+  if (!fileHandler) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: disabledStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: disabledStyles.content(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.ImageIcon, { className: disabledStyles.icon() }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: disabledStyles.text(), children: intl.formatMessage(messages3.files_not_supported) }),
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_button3.IconButton,
+        {
+          size: "sm",
+          variant: "ghost",
+          onClick: handleRemove,
+          "aria-label": intl.formatMessage(messages3.remove),
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.TrashIcon, { className: "size-4" })
+        }
+      )
+    ] }) }) });
+  }
+  if (uploadState === "uploading") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: uploadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: uploadingStyles.content(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative size-12", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "svg",
+          {
+            className: "size-12 -rotate-90",
+            viewBox: "0 0 36 36",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "circle",
+                {
+                  cx: "18",
+                  cy: "18",
+                  r: "16",
+                  fill: "none",
+                  className: "stroke-muted",
+                  strokeWidth: "2"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsxs)("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium", children: [
+          uploadProgress,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: uploadingStyles.text(), children: intl.formatMessage(messages3.uploading) })
+    ] }) }) });
+  }
+  if (uploadState === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: errorStyles.root(), onClick: handleClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: errorStyles.content(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.AlertCircleIcon, { className: errorStyles.icon() }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: errorStyles.text(), children: intl.formatMessage(messages3.upload_error) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: errorStyles.hint(), children: intl.formatMessage(messages3.click_to_retry) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: "image/*",
+          className: "hidden",
+          onChange: handleInputChange
+        }
+      ),
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_button3.IconButton,
+        {
+          size: "sm",
+          variant: "ghost",
+          className: errorStyles.removeButton(),
+          onClick: (e) => {
+            e.stopPropagation();
+            handleRemove();
+          },
+          "aria-label": intl.formatMessage(messages3.remove),
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.TrashIcon, { className: "size-3.5" })
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsxs)("div", { className: styles.content(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.UploadIcon, { className: styles.icon() }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles.text(), children: intl.formatMessage(messages3.upload_placeholder) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles.hint(), children: intl.formatMessage(messages3.upload_hint) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*",
+            className: "hidden",
+            onChange: handleInputChange
+          }
+        ),
+        isEditable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_button3.IconButton,
+          {
+            size: "sm",
+            variant: "ghost",
+            className: styles.removeButton(),
+            onClick: (e) => {
+              e.stopPropagation();
+              handleRemove();
+            },
+            "aria-label": intl.formatMessage(messages3.remove),
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.TrashIcon, { className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/extensions/image-upload/index.ts
+var ImageUploadNode = import_core2.Node.create({
+  name: "imageUpload",
   group: "block",
   atom: true,
   draggable: true,
+  selectable: true,
   addOptions() {
     return {
-      allowBase64: true,
+      accept: "image/*",
+      maxSize: 0,
       HTMLAttributes: {}
     };
   },
-  addAttributes() {
-    return {
-      src: {
-        default: null
-      },
-      alt: {
-        default: null
-      },
-      title: {
-        default: null
-      },
-      width: {
-        default: null
-      },
-      height: {
-        default: null
-      },
+  addAttributes() {
+    return {
+      // Upload state tracking
       uploadState: {
         default: null,
         rendered: false
@@ -888,49 +1032,65 @@ var ImageNode = import_core2.Node.create({
   parseHTML() {
     return [
       {
-        tag: "img[src]"
+        tag: 'div[data-type="image-upload"]'
       }
     ];
   },
   renderHTML({ HTMLAttributes }) {
-    return [
-      "img",
-      (0, import_core2.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes)
-    ];
+    return ["div", { ...HTMLAttributes, "data-type": "image-upload" }];
   },
   addNodeView() {
-    return (0, import_react8.ReactNodeViewRenderer)(ImageNodeView);
+    return (0, import_react11.ReactNodeViewRenderer)(ImageUploadNodeView);
   },
   addCommands() {
     return {
-      setImage: (options) => ({ commands }) => {
+      setImageUpload: () => ({ commands }) => {
         return commands.insertContent({
-          type: this.name,
-          attrs: options
+          type: this.name
         });
       }
     };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Enter: ({ editor }) => {
+        const { selection } = editor.state;
+        const { $from } = selection;
+        const node = $from.nodeAfter;
+        if ((node == null ? void 0 : node.type.name) === "imageUpload" && editor.isActive("imageUpload")) {
+          const nodeEl = editor.view.nodeDOM($from.pos);
+          if (nodeEl instanceof HTMLElement) {
+            const input = nodeEl.querySelector('input[type="file"]');
+            if (input instanceof HTMLElement) {
+              input.click();
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+    };
   }
 });
 
 // src/extensions/math/index.ts
 var import_core4 = require("@tiptap/core");
-var import_react14 = require("@tiptap/react");
+var import_react17 = require("@tiptap/react");
 
 // src/extensions/math/math-block-view.tsx
-var import_button3 = require("@kopexa/button");
+var import_button4 = require("@kopexa/button");
 var import_dialog2 = require("@kopexa/dialog");
-var import_icons4 = require("@kopexa/icons");
+var import_icons5 = require("@kopexa/icons");
 var import_label2 = require("@kopexa/label");
-var import_react9 = require("@tiptap/react");
+var import_react12 = require("@tiptap/react");
 var import_katex = __toESM(require("katex"));
 var import_katex_min = require("katex/dist/katex.min.css");
-var import_react10 = require("react");
-var import_react_intl6 = require("react-intl");
+var import_react13 = require("react");
+var import_react_intl8 = require("react-intl");
 
 // src/extensions/math/messages.ts
-var import_react_intl5 = require("react-intl");
-var messages3 = (0, import_react_intl5.defineMessages)({
+var import_react_intl7 = require("react-intl");
+var messages4 = (0, import_react_intl7.defineMessages)({
   title: {
     id: "editor.math.title",
     defaultMessage: "Formula",
@@ -979,28 +1139,28 @@ var messages3 = (0, import_react_intl5.defineMessages)({
 });
 
 // src/extensions/math/math-block-view.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function MathBlockView({ editor, node, getPos }) {
-  const intl = (0, import_react_intl6.useIntl)();
+  const intl = (0, import_react_intl8.useIntl)();
   const attrs = node.attrs;
   const { latex = "" } = attrs;
-  const isEditable = (0, import_react9.useEditorState)({
+  const isEditable = (0, import_react12.useEditorState)({
     editor,
     selector: ({ editor: e }) => {
       var _a;
       return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
     }
   });
-  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
-  const [localLatex, setLocalLatex] = (0, import_react10.useState)(latex);
-  const [error, setError] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
+  const [localLatex, setLocalLatex] = (0, import_react13.useState)(latex);
+  const [error, setError] = (0, import_react13.useState)(null);
+  (0, import_react13.useEffect)(() => {
     if (isOpen) {
       setLocalLatex(latex);
       setError(null);
     }
   }, [isOpen, latex]);
-  const renderedHtml = (0, import_react10.useMemo)(() => {
+  const renderedHtml = (0, import_react13.useMemo)(() => {
     if (!latex) return null;
     try {
       return import_katex.default.renderToString(latex, {
@@ -1012,7 +1172,7 @@ function MathBlockView({ editor, node, getPos }) {
       return null;
     }
   }, [latex]);
-  const previewHtml = (0, import_react10.useMemo)(() => {
+  const previewHtml = (0, import_react13.useMemo)(() => {
     if (!localLatex) return null;
     try {
       setError(null);
@@ -1022,11 +1182,11 @@ function MathBlockView({ editor, node, getPos }) {
         output: "html"
       });
     } catch (_e) {
-      setError(intl.formatMessage(messages3.invalid_latex));
+      setError(intl.formatMessage(messages4.invalid_latex));
       return null;
     }
   }, [localLatex, intl]);
-  const handleSave = (0, import_react10.useCallback)(() => {
+  const handleSave = (0, import_react13.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1034,12 +1194,12 @@ function MathBlockView({ editor, node, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localLatex, getPos]);
-  const handleCancel = (0, import_react10.useCallback)(() => {
+  const handleCancel = (0, import_react13.useCallback)(() => {
     setLocalLatex(latex);
     setError(null);
     setIsOpen(false);
   }, [latex]);
-  const handleOpenEditor = (0, import_react10.useCallback)(
+  const handleOpenEditor = (0, import_react13.useCallback)(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -1050,73 +1210,73 @@ function MathBlockView({ editor, node, getPos }) {
     [isEditable]
   );
   const isEmpty = !latex;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    import_react9.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react12.NodeViewWrapper,
     {
       className: "my-4 relative group",
       "data-type": "math-block",
       "data-latex": latex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
             className: "w-full flex items-center justify-center min-h-16 p-4 rounded-md border border-border bg-muted/30 cursor-pointer hover:bg-muted/50 transition-colors",
             onClick: handleOpenEditor,
-            children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-lg font-serif", children: "\u2211" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm", children: intl.formatMessage(messages3.empty_formula) })
-            ] }) : renderedHtml ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-lg font-serif", children: "\u2211" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm", children: intl.formatMessage(messages4.empty_formula) })
+            ] }) : renderedHtml ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "div",
               {
                 className: "katex-display",
                 dangerouslySetInnerHTML: { __html: renderedHtml }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-destructive text-sm", children: intl.formatMessage(messages3.invalid_latex) })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-destructive text-sm", children: intl.formatMessage(messages4.invalid_latex) })
           }
         ),
-        isEditable && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_button3.IconButton,
+        isEditable && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_button4.IconButton,
           {
             size: "sm",
             variant: "ghost",
             className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",
-            "aria-label": intl.formatMessage(messages3.edit),
+            "aria-label": intl.formatMessage(messages4.edit),
             onClick: handleOpenEditor,
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.EditIcon, { className: "size-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.EditIcon, { className: "size-3.5" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog2.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_dialog2.Dialog.Content, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog2.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog2.Dialog.Title, { children: intl.formatMessage(messages3.title) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog2.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_label2.Label, { className: "text-sm", children: intl.formatMessage(messages3.latex_input) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog2.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_dialog2.Dialog.Content, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog2.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog2.Dialog.Title, { children: intl.formatMessage(messages4.title) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog2.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_label2.Label, { className: "text-sm", children: intl.formatMessage(messages4.latex_input) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "textarea",
                 {
                   className: "w-full min-h-24 p-3 rounded-md border border-input bg-background font-mono text-sm resize-y focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                   value: localLatex,
                   onChange: (e) => setLocalLatex(e.target.value),
-                  placeholder: intl.formatMessage(messages3.latex_placeholder),
+                  placeholder: intl.formatMessage(messages4.latex_placeholder),
                   spellCheck: false
                 }
               ),
-              error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-destructive", children: error })
+              error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-destructive", children: error })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_label2.Label, { className: "text-sm", children: intl.formatMessage(messages3.preview) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "min-h-16 p-4 rounded-md border border-border bg-muted/30 flex items-center justify-center", children: previewHtml ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_label2.Label, { className: "text-sm", children: intl.formatMessage(messages4.preview) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "min-h-16 p-4 rounded-md border border-border bg-muted/30 flex items-center justify-center", children: previewHtml ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "div",
                 {
                   className: "katex-display",
                   dangerouslySetInnerHTML: { __html: previewHtml }
                 }
-              ) : localLatex ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages3.invalid_latex) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages3.latex_placeholder) }) })
+              ) : localLatex ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages4.invalid_latex) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages4.latex_placeholder) }) })
             ] })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_dialog2.Dialog.Footer, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_button3.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages3.cancel) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_button3.Button, { onClick: handleSave, disabled: !!error && !!localLatex, children: intl.formatMessage(messages3.save) })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_dialog2.Dialog.Footer, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button4.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages4.cancel) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button4.Button, { onClick: handleSave, disabled: !!error && !!localLatex, children: intl.formatMessage(messages4.save) })
           ] })
         ] }) })
       ]
@@ -1126,39 +1286,39 @@ function MathBlockView({ editor, node, getPos }) {
 
 // src/extensions/math/inline-math.ts
 var import_core3 = require("@tiptap/core");
-var import_react13 = require("@tiptap/react");
+var import_react16 = require("@tiptap/react");
 
 // src/extensions/math/inline-math-view.tsx
-var import_button4 = require("@kopexa/button");
+var import_button5 = require("@kopexa/button");
 var import_dialog3 = require("@kopexa/dialog");
 var import_label3 = require("@kopexa/label");
-var import_react11 = require("@tiptap/react");
+var import_react14 = require("@tiptap/react");
 var import_katex2 = __toESM(require("katex"));
 var import_katex_min2 = require("katex/dist/katex.min.css");
-var import_react12 = require("react");
-var import_react_intl7 = require("react-intl");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_react_intl9 = require("react-intl");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function InlineMathView({ editor, node, getPos }) {
-  const intl = (0, import_react_intl7.useIntl)();
+  const intl = (0, import_react_intl9.useIntl)();
   const attrs = node.attrs;
   const { latex = "" } = attrs;
-  const isEditable = (0, import_react11.useEditorState)({
+  const isEditable = (0, import_react14.useEditorState)({
     editor,
     selector: ({ editor: e }) => {
       var _a;
       return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
     }
   });
-  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
-  const [localLatex, setLocalLatex] = (0, import_react12.useState)(latex);
-  const [error, setError] = (0, import_react12.useState)(null);
-  (0, import_react12.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
+  const [localLatex, setLocalLatex] = (0, import_react15.useState)(latex);
+  const [error, setError] = (0, import_react15.useState)(null);
+  (0, import_react15.useEffect)(() => {
     if (isOpen) {
       setLocalLatex(latex);
       setError(null);
     }
   }, [isOpen, latex]);
-  const renderedHtml = (0, import_react12.useMemo)(() => {
+  const renderedHtml = (0, import_react15.useMemo)(() => {
     if (!latex) return null;
     try {
       return import_katex2.default.renderToString(latex, {
@@ -1170,7 +1330,7 @@ function InlineMathView({ editor, node, getPos }) {
       return null;
     }
   }, [latex]);
-  const previewHtml = (0, import_react12.useMemo)(() => {
+  const previewHtml = (0, import_react15.useMemo)(() => {
     if (!localLatex) return null;
     try {
       setError(null);
@@ -1180,11 +1340,11 @@ function InlineMathView({ editor, node, getPos }) {
         output: "html"
       });
     } catch (_e) {
-      setError(intl.formatMessage(messages3.invalid_latex));
+      setError(intl.formatMessage(messages4.invalid_latex));
       return null;
     }
   }, [localLatex, intl]);
-  const handleSave = (0, import_react12.useCallback)(() => {
+  const handleSave = (0, import_react15.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1192,12 +1352,12 @@ function InlineMathView({ editor, node, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localLatex, getPos]);
-  const handleCancel = (0, import_react12.useCallback)(() => {
+  const handleCancel = (0, import_react15.useCallback)(() => {
     setLocalLatex(latex);
     setError(null);
     setIsOpen(false);
   }, [latex]);
-  const handleClick = (0, import_react12.useCallback)(
+  const handleClick = (0, import_react15.useCallback)(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -1208,58 +1368,58 @@ function InlineMathView({ editor, node, getPos }) {
     [isEditable]
   );
   const isEmpty = !latex;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_react11.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    import_react14.NodeViewWrapper,
     {
       as: "span",
       className: "inline-math-wrapper",
       "data-type": "inline-math",
       "data-latex": latex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "span",
           {
             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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-xs", children: "$?$" }) : renderedHtml ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs", children: "$?$" }) : renderedHtml ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "span",
               {
                 dangerouslySetInnerHTML: { __html: renderedHtml }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-destructive text-xs", children: latex })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-destructive text-xs", children: latex })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog3.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_dialog3.Dialog.Content, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog3.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog3.Dialog.Title, { children: intl.formatMessage(messages3.title) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog3.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_label3.Label, { className: "text-sm", children: intl.formatMessage(messages3.latex_input) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog3.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_dialog3.Dialog.Content, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog3.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog3.Dialog.Title, { children: intl.formatMessage(messages4.title) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog3.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_label3.Label, { className: "text-sm", children: intl.formatMessage(messages4.latex_input) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "input",
                 {
                   type: "text",
                   className: "w-full p-2 rounded-md border border-input bg-background font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                   value: localLatex,
                   onChange: (e) => setLocalLatex(e.target.value),
-                  placeholder: intl.formatMessage(messages3.latex_placeholder),
+                  placeholder: intl.formatMessage(messages4.latex_placeholder),
                   spellCheck: false
                 }
               ),
-              error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-destructive", children: error })
+              error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-destructive", children: error })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_label3.Label, { className: "text-sm", children: intl.formatMessage(messages3.preview) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "min-h-10 p-3 rounded-md border border-border bg-muted/30 flex items-center justify-center", children: previewHtml ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_label3.Label, { className: "text-sm", children: intl.formatMessage(messages4.preview) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "min-h-10 p-3 rounded-md border border-border bg-muted/30 flex items-center justify-center", children: previewHtml ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "span",
                 {
                   dangerouslySetInnerHTML: { __html: previewHtml }
                 }
-              ) : localLatex ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages3.invalid_latex) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-muted-foreground text-sm", children: "$...$" }) })
+              ) : localLatex ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages4.invalid_latex) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-muted-foreground text-sm", children: "$...$" }) })
             ] })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_dialog3.Dialog.Footer, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button4.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages3.cancel) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button4.Button, { onClick: handleSave, disabled: !!error && !!localLatex, children: intl.formatMessage(messages3.save) })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_dialog3.Dialog.Footer, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_button5.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages4.cancel) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_button5.Button, { onClick: handleSave, disabled: !!error && !!localLatex, children: intl.formatMessage(messages4.save) })
           ] })
         ] }) })
       ]
@@ -1305,7 +1465,7 @@ var InlineMath = import_core3.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react13.ReactNodeViewRenderer)(InlineMathView, {
+    return (0, import_react16.ReactNodeViewRenderer)(InlineMathView, {
       as: "span"
     });
   },
@@ -1373,7 +1533,7 @@ var MathBlock = import_core4.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react14.ReactNodeViewRenderer)(MathBlockView);
+    return (0, import_react17.ReactNodeViewRenderer)(MathBlockView);
   },
   addCommands() {
     return {
@@ -1416,18 +1576,18 @@ var MathBlock = import_core4.Node.create({
 
 // src/extensions/toc/index.ts
 var import_core5 = require("@tiptap/core");
-var import_react18 = require("@tiptap/react");
+var import_react21 = require("@tiptap/react");
 
 // src/extensions/toc/toc-view.tsx
-var import_icons6 = require("@kopexa/icons");
-var import_theme3 = require("@kopexa/theme");
-var import_react16 = require("@tiptap/react");
-var import_react17 = require("react");
-var import_react_intl10 = require("react-intl");
+var import_icons7 = require("@kopexa/icons");
+var import_theme4 = require("@kopexa/theme");
+var import_react19 = require("@tiptap/react");
+var import_react20 = require("react");
+var import_react_intl12 = require("react-intl");
 
 // src/extensions/toc/messages.ts
-var import_react_intl8 = require("react-intl");
-var messages4 = (0, import_react_intl8.defineMessages)({
+var import_react_intl10 = require("react-intl");
+var messages5 = (0, import_react_intl10.defineMessages)({
   title: {
     id: "editor.toc.title",
     defaultMessage: "Table of Contents",
@@ -1501,15 +1661,15 @@ var messages4 = (0, import_react_intl8.defineMessages)({
 });
 
 // src/extensions/toc/toc-settings.tsx
-var import_button5 = require("@kopexa/button");
+var import_button6 = require("@kopexa/button");
 var import_dialog4 = require("@kopexa/dialog");
-var import_icons5 = require("@kopexa/icons");
+var import_icons6 = require("@kopexa/icons");
 var import_label4 = require("@kopexa/label");
 var import_select2 = require("@kopexa/select");
 var import_switch = require("@kopexa/switch");
-var import_react15 = require("react");
-var import_react_intl9 = require("react-intl");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_react_intl11 = require("react-intl");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var HEADING_LEVELS = [
   { value: "1", label: "H1" },
   { value: "2", label: "H2" },
@@ -1519,15 +1679,15 @@ var HEADING_LEVELS = [
   { value: "6", label: "H6" }
 ];
 function TocSettings({ editor, attrs, getPos }) {
-  const intl = (0, import_react_intl9.useIntl)();
-  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
-  const [localAttrs, setLocalAttrs] = (0, import_react15.useState)(attrs);
-  (0, import_react15.useEffect)(() => {
+  const intl = (0, import_react_intl11.useIntl)();
+  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
+  const [localAttrs, setLocalAttrs] = (0, import_react18.useState)(attrs);
+  (0, import_react18.useEffect)(() => {
     if (isOpen) {
       setLocalAttrs(attrs);
     }
   }, [isOpen, attrs]);
-  const handleSave = (0, import_react15.useCallback)(() => {
+  const handleSave = (0, import_react18.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1535,11 +1695,11 @@ function TocSettings({ editor, attrs, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localAttrs, getPos]);
-  const handleCancel = (0, import_react15.useCallback)(() => {
+  const handleCancel = (0, import_react18.useCallback)(() => {
     setLocalAttrs(attrs);
     setIsOpen(false);
   }, [attrs]);
-  const handleMinLevelChange = (0, import_react15.useCallback)((value) => {
+  const handleMinLevelChange = (0, import_react18.useCallback)((value) => {
     const minLevel = Number.parseInt(String(value), 10);
     setLocalAttrs((prev) => ({
       ...prev,
@@ -1548,7 +1708,7 @@ function TocSettings({ editor, attrs, getPos }) {
       maxLevel: Math.max(prev.maxLevel, minLevel)
     }));
   }, []);
-  const handleMaxLevelChange = (0, import_react15.useCallback)((value) => {
+  const handleMaxLevelChange = (0, import_react18.useCallback)((value) => {
     const maxLevel = Number.parseInt(String(value), 10);
     setLocalAttrs((prev) => ({
       ...prev,
@@ -1557,10 +1717,10 @@ function TocSettings({ editor, attrs, getPos }) {
       minLevel: Math.min(prev.minLevel, maxLevel)
     }));
   }, []);
-  const handleNumberedChange = (0, import_react15.useCallback)((checked) => {
+  const handleNumberedChange = (0, import_react18.useCallback)((checked) => {
     setLocalAttrs((prev) => ({ ...prev, numbered: checked }));
   }, []);
-  const handleStyleChange = (0, import_react15.useCallback)((value) => {
+  const handleStyleChange = (0, import_react18.useCallback)((value) => {
     setLocalAttrs((prev) => ({
       ...prev,
       style: String(value)
@@ -1569,36 +1729,36 @@ function TocSettings({ editor, attrs, getPos }) {
   if (!editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_button5.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_button6.IconButton,
       {
         size: "sm",
         variant: "ghost",
-        "aria-label": intl.formatMessage(messages4.settings),
+        "aria-label": intl.formatMessage(messages5.settings),
         onClick: (e) => {
           e.stopPropagation();
           e.preventDefault();
           setIsOpen(true);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons5.SettingsIcon, { className: "size-3.5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons6.SettingsIcon, { className: "size-3.5" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog4.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_dialog4.Dialog.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog4.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog4.Dialog.Title, { children: intl.formatMessage(messages4.settings) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog4.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages4.min_level) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog4.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_dialog4.Dialog.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog4.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog4.Dialog.Title, { children: intl.formatMessage(messages5.settings) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog4.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages5.min_level) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               import_select2.Select,
               {
                 size: "sm",
                 value: String(localAttrs.minLevel),
                 onValueChange: handleMinLevelChange,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_select2.Select.Value, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_select2.Select.Content, { children: HEADING_LEVELS.map((level) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Value, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Content, { children: HEADING_LEVELS.map((level) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     import_select2.Select.Item,
                     {
                       value: level.value,
@@ -1611,17 +1771,17 @@ function TocSettings({ editor, attrs, getPos }) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages4.max_level) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages5.max_level) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               import_select2.Select,
               {
                 size: "sm",
                 value: String(localAttrs.maxLevel),
                 onValueChange: handleMaxLevelChange,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_select2.Select.Value, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_select2.Select.Content, { children: HEADING_LEVELS.map((level) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Value, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Content, { children: HEADING_LEVELS.map((level) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     import_select2.Select.Item,
                     {
                       value: level.value,
@@ -1635,12 +1795,12 @@ function TocSettings({ editor, attrs, getPos }) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages4.numbered) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages4.numbered_hint) })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages5.numbered) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages5.numbered_hint) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             import_switch.Switch,
             {
               size: "sm",
@@ -1649,36 +1809,36 @@ function TocSettings({ editor, attrs, getPos }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages4.style) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages5.style) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             import_select2.Select,
             {
               size: "sm",
               value: localAttrs.style,
               onValueChange: handleStyleChange,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_select2.Select.Value, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_select2.Select.Content, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_select2.Select.Item, { value: "default", children: intl.formatMessage(messages4.style_default) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_select2.Select.Item, { value: "flat", children: intl.formatMessage(messages4.style_flat) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_select2.Select.Item, { value: "compact", children: intl.formatMessage(messages4.style_compact) })
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Value, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_select2.Select.Content, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Item, { value: "default", children: intl.formatMessage(messages5.style_default) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Item, { value: "flat", children: intl.formatMessage(messages5.style_flat) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Item, { value: "compact", children: intl.formatMessage(messages5.style_compact) })
                 ] })
               ]
             }
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_dialog4.Dialog.Footer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_button5.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages4.cancel) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_button5.Button, { onClick: handleSave, children: intl.formatMessage(messages4.save) })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_dialog4.Dialog.Footer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_button6.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages5.cancel) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_button6.Button, { onClick: handleSave, children: intl.formatMessage(messages5.save) })
       ] })
     ] }) })
   ] });
 }
 
 // src/extensions/toc/toc-view.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function generateHeadingNumbers(headings, minLevel) {
   const counters = [0, 0, 0, 0, 0, 0];
   return headings.map((heading) => {
@@ -1700,8 +1860,8 @@ function generateHeadingNumbers(headings, minLevel) {
   });
 }
 function TocNodeView({ editor, node, getPos }) {
-  const [headings, setHeadings] = (0, import_react17.useState)([]);
-  const intl = (0, import_react_intl10.useIntl)();
+  const [headings, setHeadings] = (0, import_react20.useState)([]);
+  const intl = (0, import_react_intl12.useIntl)();
   const attrs = node.attrs;
   const {
     minLevel = 1,
@@ -1709,8 +1869,8 @@ function TocNodeView({ editor, node, getPos }) {
     numbered = false,
     style = "default"
   } = attrs;
-  const styles = (0, import_react17.useMemo)(() => (0, import_theme3.toc)({ style }), [style]);
-  const updateHeadings = (0, import_react17.useCallback)(() => {
+  const styles = (0, import_react20.useMemo)(() => (0, import_theme4.toc)({ style }), [style]);
+  const updateHeadings = (0, import_react20.useCallback)(() => {
     const items = [];
     const { doc } = editor.state;
     doc.descendants((docNode, pos) => {
@@ -1730,14 +1890,14 @@ function TocNodeView({ editor, node, getPos }) {
     const numberedHeadings = generateHeadingNumbers(items, minLevel);
     setHeadings(numberedHeadings);
   }, [editor, minLevel, maxLevel]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     updateHeadings();
     editor.on("update", updateHeadings);
     return () => {
       editor.off("update", updateHeadings);
     };
   }, [editor, updateHeadings]);
-  const handleClick = (0, import_react17.useCallback)(
+  const handleClick = (0, import_react20.useCallback)(
     (pos, id) => {
       var _a;
       editor.chain().focus().setTextSelection(pos).run();
@@ -1758,13 +1918,13 @@ function TocNodeView({ editor, node, getPos }) {
   const getIndent = (level) => {
     return (level - minLevel) * 16;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react16.NodeViewWrapper, { className: styles.root(), "data-type": "toc", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: styles.header(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: styles.headerContent(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons6.ListIcon, { className: styles.headerIcon() }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: styles.headerTitle(), children: intl.formatMessage(messages4.title) })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react19.NodeViewWrapper, { className: styles.root(), "data-type": "toc", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: styles.header(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: styles.headerContent(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons7.ListIcon, { className: styles.headerIcon() }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: styles.headerTitle(), children: intl.formatMessage(messages5.title) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: styles.headerActions(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: styles.headerActions(), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         TocSettings,
         {
           editor,
@@ -1773,7 +1933,7 @@ function TocNodeView({ editor, node, getPos }) {
         }
       ) })
     ] }),
-    isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: styles.emptyState(), children: intl.formatMessage(messages4.empty_state) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { className: styles.nav(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: styles.list(), children: headings.map((heading) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: styles.emptyState(), children: intl.formatMessage(messages5.empty_state) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("nav", { className: styles.nav(), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: styles.list(), children: headings.map((heading) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "li",
       {
         className: styles.item(),
@@ -1781,14 +1941,14 @@ function TocNodeView({ editor, node, getPos }) {
           paddingLeft: `${getIndent(heading.level)}px`
         },
         children: [
-          numbered && heading.number && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: styles.itemNumber(), children: heading.number }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          numbered && heading.number && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: styles.itemNumber(), children: heading.number }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "button",
             {
               type: "button",
               onClick: () => handleClick(heading.pos, heading.id),
               className: styles.itemButton(),
-              children: heading.text || intl.formatMessage(messages4.empty_heading)
+              children: heading.text || intl.formatMessage(messages5.empty_heading)
             }
           )
         ]
@@ -1857,7 +2017,7 @@ var TocNode = import_core5.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react18.ReactNodeViewRenderer)(TocNodeView);
+    return (0, import_react21.ReactNodeViewRenderer)(TocNodeView);
   },
   addCommands() {
     return {
@@ -1900,14 +2060,14 @@ var import_extension_text_style = require("@tiptap/extension-text-style");
 var import_extension_typography = require("@tiptap/extension-typography");
 var import_extension_unique_id = require("@tiptap/extension-unique-id");
 var import_extensions = require("@tiptap/extensions");
-var import_react22 = require("@tiptap/react");
+var import_react25 = require("@tiptap/react");
 var import_starter_kit = require("@tiptap/starter-kit");
-var import_react23 = require("react");
+var import_react26 = require("react");
 
 // src/extensions/link/index.ts
 var import_extension_link = __toESM(require("@tiptap/extension-link"));
 var import_state = require("@tiptap/pm/state");
-var import_react19 = require("@tiptap/react");
+var import_react22 = require("@tiptap/react");
 var Link = import_extension_link.default.extend({
   inclusive: false,
   parseHTML() {
@@ -1935,7 +2095,7 @@ var Link = import_extension_link.default.extend({
             const { schema, doc, tr } = view.state;
             let range;
             if (schema.marks.link) {
-              range = (0, import_react19.getMarkRange)(doc.resolve(pos), schema.marks.link);
+              range = (0, import_react22.getMarkRange)(doc.resolve(pos), schema.marks.link);
             }
             if (!range) {
               return;
@@ -1962,8 +2122,8 @@ var Link = import_extension_link.default.extend({
 // src/extensions/selection/index.ts
 var import_state2 = require("@tiptap/pm/state");
 var import_view = require("@tiptap/pm/view");
-var import_react20 = require("@tiptap/react");
-var Selection = import_react20.Extension.create({
+var import_react23 = require("@tiptap/react");
+var Selection = import_react23.Extension.create({
   name: "selection",
   addProseMirrorPlugins() {
     const { editor } = this;
@@ -1978,7 +2138,7 @@ var Selection = import_react20.Extension.create({
             if (editor.isFocused === true || !editor.isEditable) {
               return null;
             }
-            if ((0, import_react20.isNodeSelection)(state.selection)) {
+            if ((0, import_react23.isNodeSelection)(state.selection)) {
               return null;
             }
             return import_view.DecorationSet.create(state.doc, [
@@ -1995,7 +2155,7 @@ var Selection = import_react20.Extension.create({
 
 // src/extensions/trailing-node/index.ts
 var import_state3 = require("@tiptap/pm/state");
-var import_react21 = require("@tiptap/react");
+var import_react24 = require("@tiptap/react");
 function nodeEqualsType({
   types,
   node
@@ -2006,7 +2166,7 @@ function nodeEqualsType({
   }
   return node.type === types;
 }
-var TrailingNode = import_react21.Extension.create({
+var TrailingNode = import_react24.Extension.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -2282,7 +2442,19 @@ var useCreateEditor = ({
 }) => {
   const fileHandlerFromContext = useEditorFile();
   const fileHandler = fileHandlerProp != null ? fileHandlerProp : fileHandlerFromContext;
-  const editor = (0, import_react22.useEditor)({
+  const extensions = (0, import_react26.useMemo)(
+    () => getExtensions({
+      editable,
+      placeholder,
+      enableControls,
+      controlResolver,
+      fileHandler
+    }),
+    // Only recreate extensions when these values change
+    // Note: fileHandler and controlResolver are object references, so they should be stable
+    [editable, placeholder, enableControls, controlResolver, fileHandler]
+  );
+  const editor = (0, import_react25.useEditor)({
     editorProps: {
       attributes: {
         autocomplete: "off",
@@ -2293,13 +2465,7 @@ var useCreateEditor = ({
     },
     immediatelyRender: false,
     shouldRerenderOnTransaction: false,
-    extensions: getExtensions({
-      editable,
-      placeholder,
-      enableControls,
-      controlResolver,
-      fileHandler
-    }),
+    extensions,
     editable,
     onUpdate: ({ editor: editor2 }) => {
       onChange == null ? void 0 : onChange(editor2.getJSON());
@@ -2307,7 +2473,7 @@ var useCreateEditor = ({
     content: safeParseContent(content),
     ...options
   });
-  (0, import_react23.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (editor && editor.isEditable !== editable) {
       editor.setEditable(editable);
     }
@@ -2371,8 +2537,12 @@ function getExtensions({
     CalloutNode,
     MathBlock,
     InlineMath,
-    // Image support - always include for display
-    ImageNode,
+    // Image support - extended with file reference resolution
+    ImageNode.configure({
+      allowBase64: true
+    }),
+    // Image upload placeholder
+    ImageUploadNode,
     import_extensions.Placeholder.configure({
       placeholder,
       emptyNodeClass: "is-empty with-slash"
@@ -2465,19 +2635,19 @@ async function handleFileUpload(editor, file, fileHandler, pos) {
 }
 
 // src/presets/basic/index.tsx
-var import_theme6 = require("@kopexa/theme");
-var import_react51 = require("@tiptap/react");
-var import_react52 = require("react");
+var import_theme7 = require("@kopexa/theme");
+var import_react54 = require("@tiptap/react");
+var import_react55 = require("react");
 
 // src/context/editor-context.ts
 var import_react_utils = require("@kopexa/react-utils");
 var [EditorUIProvider, useEditorUIContext] = (0, import_react_utils.createContext)();
 
 // src/hooks/use-ui-editor-state.ts
-var import_react24 = require("@tiptap/react");
+var import_react27 = require("@tiptap/react");
 function useUiEditorState(editor) {
   var _a;
-  return (_a = (0, import_react24.useEditorState)({
+  return (_a = (0, import_react27.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => {
       if (!editor2) return defaultUiState;
@@ -2498,23 +2668,23 @@ var import_toolbar3 = require("@kopexa/toolbar");
 var import_menus = require("@tiptap/react/menus");
 
 // src/ui/link-popover/link-popover.tsx
-var import_button6 = require("@kopexa/button");
-var import_icons8 = require("@kopexa/icons");
+var import_button7 = require("@kopexa/button");
+var import_icons9 = require("@kopexa/icons");
 var import_input2 = require("@kopexa/input");
 var import_popover = require("@kopexa/popover");
 var import_toolbar = require("@kopexa/toolbar");
-var import_react27 = require("react");
+var import_react30 = require("react");
 
 // src/hooks/use-tiptap-editor.ts
-var import_react25 = require("@tiptap/react");
-var import_react26 = require("react");
+var import_react28 = require("@tiptap/react");
+var import_react29 = require("react");
 function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = (0, import_react25.useCurrentEditor)();
-  const mainEditor = (0, import_react26.useMemo)(
+  const { editor: coreEditor } = (0, import_react28.useCurrentEditor)();
+  const mainEditor = (0, import_react29.useMemo)(
     () => providedEditor || coreEditor,
     [providedEditor, coreEditor]
   );
-  const editorState = (0, import_react25.useEditorState)({
+  const editorState = (0, import_react28.useEditorState)({
     editor: mainEditor,
     selector(context) {
       if (!context.editor) {
@@ -2536,7 +2706,7 @@ function useTiptapEditor(providedEditor) {
 
 // src/ui/link-popover/use-link-popover.ts
 var import_editor_utils = require("@kopexa/editor-utils");
-var import_icons7 = require("@kopexa/icons");
+var import_icons8 = require("@kopexa/icons");
 var React = __toESM(require("react"));
 
 // src/utils/index.ts
@@ -2755,15 +2925,15 @@ function useLinkPopover(config) {
     canSet,
     isActive,
     label: "Link",
-    Icon: import_icons7.LinkIcon,
+    Icon: import_icons8.LinkIcon,
     ...linkHandler
   };
 }
 
 // src/ui/link-popover/link-popover.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var LinkButton = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_toolbar.ToolbarButton,
     {
       type: "button",
@@ -2775,7 +2945,7 @@ var LinkButton = ({ className, children, ...props }) => {
       title: "Link",
       isIconOnly: !children,
       ...props,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons8.LinkIcon, {})
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.LinkIcon, {})
     }
   );
 };
@@ -2788,8 +2958,8 @@ var LinkMain = ({
   isActive,
   onSave
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react27.useState)(!isActive || !url);
-  (0, import_react27.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react30.useState)(!isActive || !url);
+  (0, import_react30.useEffect)(() => {
     setIsEditing(!isActive || !url);
   }, [isActive, url]);
   const handleKeyDown = (event) => {
@@ -2812,8 +2982,8 @@ var LinkMain = ({
     setIsEditing(true);
   };
   if (isEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         import_input2.Input,
         {
           type: "url",
@@ -2828,8 +2998,8 @@ var LinkMain = ({
           autoFocus: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_button6.IconButton,
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_button7.IconButton,
         {
           type: "button",
           size: "sm",
@@ -2837,13 +3007,13 @@ var LinkMain = ({
           onClick: handleSave,
           "aria-label": "Save link",
           disabled: !url,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons8.CheckIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.CheckIcon, { className: "size-4" })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "a",
       {
         href: url,
@@ -2857,38 +3027,38 @@ var LinkMain = ({
         children: url
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_button6.IconButton,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_button7.IconButton,
         {
           type: "button",
           size: "sm",
           variant: "ghost",
           onClick: openLink,
           "aria-label": "Open link in new tab",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons8.ExternalLinkIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.ExternalLinkIcon, { className: "size-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_button6.IconButton,
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_button7.IconButton,
         {
           type: "button",
           size: "sm",
           variant: "ghost",
           onClick: handleEdit,
           "aria-label": "Edit link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons8.EditIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.EditIcon, { className: "size-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_button6.IconButton,
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_button7.IconButton,
         {
           type: "button",
           size: "sm",
           variant: "ghost",
           onClick: removeLink,
           "aria-label": "Remove link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons8.TrashIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.TrashIcon, { className: "size-4" })
         }
       )
     ] })
@@ -2905,7 +3075,7 @@ function LinkPopover({
   ...buttonProps
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react30.useState)(false);
   const {
     isVisible,
     canSet,
@@ -2921,18 +3091,18 @@ function LinkPopover({
     hideWhenUnavailable,
     onSetLink
   });
-  const handleOnOpenChange = (0, import_react27.useCallback)(
+  const handleOnOpenChange = (0, import_react30.useCallback)(
     (nextIsOpen) => {
       setIsOpen(nextIsOpen);
       onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
     },
     [onOpenChange]
   );
-  const handleSetLink = (0, import_react27.useCallback)(() => {
+  const handleSetLink = (0, import_react30.useCallback)(() => {
     setLink();
     setIsOpen(false);
   }, [setLink]);
-  const handleClick = (0, import_react27.useCallback)(
+  const handleClick = (0, import_react30.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -2940,7 +3110,7 @@ function LinkPopover({
     },
     [onClick, isOpen]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (autoOpenOnLinkActive && isActive) {
       setIsOpen(true);
     }
@@ -2948,17 +3118,17 @@ function LinkPopover({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     import_popover.Popover.Root,
     {
       open: isOpen,
       onOpenChange: handleOnOpenChange,
       spacing: "dense",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           import_popover.Popover.Trigger,
           {
-            render: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            render: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               LinkButton,
               {
                 "data-disabled": !canSet,
@@ -2972,7 +3142,7 @@ function LinkPopover({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_popover.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           LinkMain,
           {
             url,
@@ -2992,19 +3162,19 @@ LinkButton.displayName = "LinkButton";
 
 // src/ui/mark-button/index.tsx
 var import_editor_utils2 = require("@kopexa/editor-utils");
-var import_icons9 = require("@kopexa/icons");
+var import_icons10 = require("@kopexa/icons");
 var import_toolbar2 = require("@kopexa/toolbar");
-var import_react28 = require("@tiptap/react");
-var import_react29 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react31 = require("@tiptap/react");
+var import_react32 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var markIcons = {
-  bold: import_icons9.BoldIcon,
-  italic: import_icons9.ItalicIcon,
-  underline: import_icons9.UnderlineIcon,
-  strike: import_icons9.StrikeIcon,
-  code: import_icons9.CodeIcon,
-  superscript: import_icons9.SuperscriptIcon,
-  subscript: import_icons9.SubscriptIcon
+  bold: import_icons10.BoldIcon,
+  italic: import_icons10.ItalicIcon,
+  underline: import_icons10.UnderlineIcon,
+  strike: import_icons10.StrikeIcon,
+  code: import_icons10.CodeIcon,
+  superscript: import_icons10.SuperscriptIcon,
+  subscript: import_icons10.SubscriptIcon
 };
 var markShortcutKeys = {
   bold: "mod+b",
@@ -3042,7 +3212,7 @@ function shouldShowMarkButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react28.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
+    if ((0, import_react31.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
       return false;
     }
   }
@@ -3087,7 +3257,7 @@ var MarkButton = ({
     shortcutKey,
     formattedName
   } = useMarkState(editor, type, disabled);
-  const handleClick = (0, import_react29.useCallback)(
+  const handleClick = (0, import_react32.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && !isDisabled && editor) {
@@ -3096,7 +3266,7 @@ var MarkButton = ({
     },
     [onClick, isDisabled, editor, type]
   );
-  const show = (0, import_react29.useMemo)(() => {
+  const show = (0, import_react32.useMemo)(() => {
     return shouldShowMarkButton({
       editor,
       type,
@@ -3107,7 +3277,7 @@ var MarkButton = ({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_toolbar2.ToolbarButton,
     {
       type: "button",
@@ -3125,18 +3295,18 @@ var MarkButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, {})
     }
   );
 };
 
 // src/ui/bubble-menu/index.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function BubbleMenu({ editor }) {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_menus.BubbleMenu,
     {
       editor,
@@ -3154,15 +3324,15 @@ function BubbleMenu({ editor }) {
         offset: 8
       },
       className: "rounded-lg border bg-background shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_toolbar3.Toolbar, { radius: "md", border: "none", className: "p-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_toolbar3.ToolbarGroup, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarkButton, { type: "bold" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarkButton, { type: "italic" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarkButton, { type: "strike" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarkButton, { type: "code" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_toolbar3.Toolbar, { radius: "md", border: "none", className: "p-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_toolbar3.ToolbarGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkButton, { type: "bold" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkButton, { type: "italic" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkButton, { type: "strike" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkButton, { type: "code" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_toolbar3.ToolbarSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_toolbar3.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LinkPopover, { autoOpenOnLinkActive: false }) })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_toolbar3.ToolbarSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_toolbar3.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LinkPopover, { autoOpenOnLinkActive: false }) })
       ] })
     }
   );
@@ -3174,7 +3344,7 @@ var React3 = __toESM(require("react"));
 
 // src/hooks/use-floating-toolbar-visibility.ts
 var import_state4 = require("@tiptap/pm/state");
-var import_react30 = require("@tiptap/react");
+var import_react33 = require("@tiptap/react");
 var React2 = __toESM(require("react"));
 var HIDE_FLOATING_META = "hideFloatingToolbar";
 var selectNodeAndHideFloating = (editor, pos) => {
@@ -3272,41 +3442,41 @@ function useScrollToHash(config = {}) {
 }
 
 // src/ui/link-bubble/index.tsx
-var import_button7 = require("@kopexa/button");
-var import_icons10 = require("@kopexa/icons");
+var import_button8 = require("@kopexa/button");
+var import_icons11 = require("@kopexa/icons");
 var import_input3 = require("@kopexa/input");
 var import_menus2 = require("@tiptap/react/menus");
-var import_react31 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react34 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function LinkBubble({ editor }) {
-  const [isEditing, setIsEditing] = (0, import_react31.useState)(false);
-  const [url, setUrl] = (0, import_react31.useState)("");
-  const getCurrentUrl = (0, import_react31.useCallback)(() => {
+  const [isEditing, setIsEditing] = (0, import_react34.useState)(false);
+  const [url, setUrl] = (0, import_react34.useState)("");
+  const getCurrentUrl = (0, import_react34.useCallback)(() => {
     if (!editor) return "";
     const attrs = editor.getAttributes("link");
     return attrs.href || "";
   }, [editor]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
     if (isLinkActive2) {
       setUrl(getCurrentUrl());
       setIsEditing(false);
     }
   }, [editor, getCurrentUrl]);
-  const handleOpenLink = (0, import_react31.useCallback)(() => {
+  const handleOpenLink = (0, import_react34.useCallback)(() => {
     const href = getCurrentUrl();
     if (href) {
       window.open(href, "_blank", "noopener,noreferrer");
     }
   }, [getCurrentUrl]);
-  const handleRemoveLink = (0, import_react31.useCallback)(() => {
+  const handleRemoveLink = (0, import_react34.useCallback)(() => {
     editor == null ? void 0 : editor.chain().focus().unsetLink().run();
   }, [editor]);
-  const handleEdit = (0, import_react31.useCallback)(() => {
+  const handleEdit = (0, import_react34.useCallback)(() => {
     setUrl(getCurrentUrl());
     setIsEditing(true);
   }, [getCurrentUrl]);
-  const handleSave = (0, import_react31.useCallback)(() => {
+  const handleSave = (0, import_react34.useCallback)(() => {
     if (url) {
       editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     } else {
@@ -3314,7 +3484,7 @@ function LinkBubble({ editor }) {
     }
     setIsEditing(false);
   }, [editor, url]);
-  const handleKeyDown = (0, import_react31.useCallback)(
+  const handleKeyDown = (0, import_react34.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -3330,7 +3500,7 @@ function LinkBubble({ editor }) {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_menus2.BubbleMenu,
     {
       editor,
@@ -3343,8 +3513,8 @@ function LinkBubble({ editor }) {
         offset: 8
       },
       className: "rounded-lg border bg-background shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           import_input3.Input,
           {
             type: "url",
@@ -3356,19 +3526,19 @@ function LinkBubble({ editor }) {
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_button7.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_button8.IconButton,
           {
             type: "button",
             size: "sm",
             variant: "ghost",
             onClick: handleSave,
             "aria-label": "Save link",
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons10.EditIcon, { className: "size-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons11.EditIcon, { className: "size-4" })
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "a",
           {
             href: getCurrentUrl(),
@@ -3382,38 +3552,38 @@ function LinkBubble({ editor }) {
             children: getCurrentUrl()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_button7.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_button8.IconButton,
             {
               type: "button",
               size: "sm",
               variant: "ghost",
               onClick: handleOpenLink,
               "aria-label": "Open link in new tab",
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons10.ExternalLinkIcon, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons11.ExternalLinkIcon, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_button7.IconButton,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_button8.IconButton,
             {
               type: "button",
               size: "sm",
               variant: "ghost",
               onClick: handleEdit,
               "aria-label": "Edit link",
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons10.EditIcon, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons11.EditIcon, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_button7.IconButton,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_button8.IconButton,
             {
               type: "button",
               size: "sm",
               variant: "ghost",
               onClick: handleRemoveLink,
               "aria-label": "Remove link",
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons10.TrashIcon, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons11.TrashIcon, { className: "size-4" })
             }
           )
         ] })
@@ -3423,30 +3593,30 @@ function LinkBubble({ editor }) {
 }
 
 // src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
-var import_button8 = require("@kopexa/button");
+var import_button9 = require("@kopexa/button");
 var import_editor_utils6 = require("@kopexa/editor-utils");
 var import_separator = require("@kopexa/separator");
-var import_theme4 = require("@kopexa/theme");
+var import_theme5 = require("@kopexa/theme");
 var React8 = __toESM(require("react"));
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
-var import_react33 = require("@floating-ui/react");
+var import_react36 = require("@floating-ui/react");
 var import_state5 = require("@tiptap/pm/state");
 var import_suggestion = require("@tiptap/suggestion");
 var React6 = __toESM(require("react"));
 
 // src/hooks/use-floating-element.ts
-var import_react32 = require("@floating-ui/react");
+var import_react35 = require("@floating-ui/react");
 var React4 = __toESM(require("react"));
 function useFloatingElement(show, referencePos, zIndex, options) {
   const { dismissOptions, ...floatingOptions } = options || {};
-  const { refs, update, context, floatingStyles } = (0, import_react32.useFloating)({
+  const { refs, update, context, floatingStyles } = (0, import_react35.useFloating)({
     open: show,
     ...floatingOptions
   });
-  const { isMounted, styles } = (0, import_react32.useTransitionStyles)(context);
-  const dismiss = (0, import_react32.useDismiss)(context, dismissOptions);
-  const { getReferenceProps, getFloatingProps } = (0, import_react32.useInteractions)([dismiss]);
+  const { isMounted, styles } = (0, import_react35.useTransitionStyles)(context);
+  const dismiss = (0, import_react35.useDismiss)(context, dismissOptions);
+  const { getReferenceProps, getFloatingProps } = (0, import_react35.useInteractions)([dismiss]);
   React4.useEffect(() => {
     update();
   }, [referencePos, update]);
@@ -3654,7 +3824,7 @@ function filterSuggestionItems(items, query) {
 }
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var SuggestionMenu = ({
   editor: providedEditor,
   floatingOptions,
@@ -3680,13 +3850,13 @@ var SuggestionMenu = ({
     {
       placement: "bottom-start",
       middleware: [
-        (0, import_react33.offset)(10),
-        (0, import_react33.flip)({
+        (0, import_react36.offset)(10),
+        (0, import_react36.flip)({
           mainAxis: true,
           crossAxis: false
         }),
-        (0, import_react33.shift)(),
-        (0, import_react33.size)({
+        (0, import_react36.shift)(),
+        (0, import_react36.size)({
           apply({ availableHeight, elements }) {
             if (elements.floating) {
               const maxHeightValue = maxHeight ? Math.min(maxHeight, availableHeight) : availableHeight;
@@ -3825,7 +3995,7 @@ var SuggestionMenu = ({
   if (!isMounted || !show || !editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       ref,
@@ -3847,14 +4017,14 @@ var SuggestionMenu = ({
 
 // src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
 var import_editor_utils5 = require("@kopexa/editor-utils");
-var import_icons12 = require("@kopexa/icons");
+var import_icons13 = require("@kopexa/icons");
 var React7 = __toESM(require("react"));
 
 // src/ui/table-button/use-table.ts
 var import_editor_utils4 = require("@kopexa/editor-utils");
-var import_icons11 = require("@kopexa/icons");
-var import_react34 = require("@tiptap/react");
-var import_react35 = require("react");
+var import_icons12 = require("@kopexa/icons");
+var import_react37 = require("@tiptap/react");
+var import_react38 = require("react");
 function canToggle(editor) {
   if (!editor || !editor.isEditable) return false;
   if (!(0, import_editor_utils4.isNodeInSchema)("table", editor) || (0, import_editor_utils4.isNodeTypeSelected)(editor, ["image"])) {
@@ -3885,7 +4055,7 @@ function shouldShowButton(props) {
   if (!editor || !editor.isEditable) return false;
   if (!(0, import_editor_utils4.isNodeInSchema)("table", editor)) return false;
   if (hideWhenUnavailable) {
-    if ((0, import_react34.isNodeSelection)(editor.state.selection) || !canToggle) {
+    if ((0, import_react37.isNodeSelection)(editor.state.selection) || !canToggle) {
       return false;
     }
   }
@@ -3898,10 +4068,10 @@ function useTableBlock(config) {
     onToggled
   } = config || {};
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react35.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react38.useState)(true);
   const canToggleState = canToggle(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
@@ -3912,7 +4082,7 @@ function useTableBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react35.useCallback)(() => {
+  const handleToggle = (0, import_react38.useCallback)(() => {
     if (!editor) return false;
     const success = toggleTable(editor);
     if (success) {
@@ -3927,7 +4097,7 @@ function useTableBlock(config) {
     canToggle: canToggleState,
     label: "Table",
     // shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: import_icons11.TableIcon
+    Icon: import_icons12.TableIcon
   };
 }
 
@@ -3938,14 +4108,14 @@ var texts = {
     title: "Continue Writing",
     subtext: "Continue writing from the current position",
     keywords: ["continue", "write", "continue writing", "ai"],
-    badge: import_icons12.AiSparklesIcon,
+    badge: import_icons13.AiSparklesIcon,
     group: "AI"
   },
   ai_ask_button: {
     title: "Ask AI",
     subtext: "Ask AI to generate content",
     keywords: ["ai", "ask", "generate"],
-    badge: import_icons12.AiSparklesIcon,
+    badge: import_icons13.AiSparklesIcon,
     group: "AI"
   },
   // Style
@@ -3953,63 +4123,63 @@ var texts = {
     title: "Text",
     subtext: "Regular text paragraph",
     keywords: ["p", "paragraph", "text"],
-    badge: import_icons12.TypeIcon,
+    badge: import_icons13.TypeIcon,
     group: "Style"
   },
   heading_1: {
     title: "Heading 1",
     subtext: "Top-level heading",
     keywords: ["h", "heading1", "h1"],
-    badge: import_icons12.HeadingOneIcon,
+    badge: import_icons13.HeadingOneIcon,
     group: "Style"
   },
   heading_2: {
     title: "Heading 2",
     subtext: "Key section heading",
     keywords: ["h2", "heading2", "subheading"],
-    badge: import_icons12.HeadingTwoIcon,
+    badge: import_icons13.HeadingTwoIcon,
     group: "Style"
   },
   heading_3: {
     title: "Heading 3",
     subtext: "Subsection and group heading",
     keywords: ["h3", "heading3", "subheading"],
-    badge: import_icons12.HeadingThreeIcon,
+    badge: import_icons13.HeadingThreeIcon,
     group: "Style"
   },
   bullet_list: {
     title: "Bullet List",
     subtext: "List with unordered items",
     keywords: ["ul", "li", "list", "bulletlist", "bullet list"],
-    badge: import_icons12.ListIcon,
+    badge: import_icons13.ListIcon,
     group: "Style"
   },
   ordered_list: {
     title: "Numbered List",
     subtext: "List with ordered items",
     keywords: ["ol", "li", "list", "numberedlist", "numbered list"],
-    badge: import_icons12.ListOrderedIcon,
+    badge: import_icons13.ListOrderedIcon,
     group: "Style"
   },
   task_list: {
     title: "To-do list",
     subtext: "List with tasks",
     keywords: ["tasklist", "task list", "todo", "checklist"],
-    badge: import_icons12.ListTodoIcon,
+    badge: import_icons13.ListTodoIcon,
     group: "Style"
   },
   quote: {
     title: "Blockquote",
     subtext: "Blockquote block",
     keywords: ["quote", "blockquote"],
-    badge: import_icons12.BlockquoteIcon,
+    badge: import_icons13.BlockquoteIcon,
     group: "Style"
   },
   code_block: {
     title: "Code Block",
     subtext: "Code block with syntax highlighting",
     keywords: ["code", "pre"],
-    badge: import_icons12.CodeBlockIcon,
+    badge: import_icons13.CodeBlockIcon,
     group: "Style"
   },
   // Insert
@@ -4031,49 +4201,49 @@ var texts = {
     title: "Control",
     subtext: "Insert a control block",
     keywords: ["control"],
-    badge: import_icons12.ControlsIcon,
+    badge: import_icons13.ControlsIcon,
     group: "Insert"
   },
   divider: {
     title: "Separator",
     subtext: "Horizontal line to separate content",
     keywords: ["hr", "horizontalRule", "line", "separator"],
-    badge: import_icons12.MinusIcon,
+    badge: import_icons13.MinusIcon,
     group: "Insert"
   },
   table: {
     title: "Table",
     subtext: "Insert a table",
     keywords: ["table", "grid", "spreadsheet"],
-    badge: import_icons12.TableIcon,
+    badge: import_icons13.TableIcon,
     group: "Insert"
   },
   table_of_contents: {
     title: "Table of Contents",
     subtext: "Auto-generated list of headings",
     keywords: ["toc", "table of contents", "index", "navigation", "headings"],
-    badge: import_icons12.TableOfContentsIcon,
+    badge: import_icons13.TableOfContentsIcon,
     group: "Insert"
   },
   callout: {
     title: "Callout",
     subtext: "Highlighted block for important information",
     keywords: ["callout", "info", "warning", "alert", "note", "tip"],
-    badge: import_icons12.InfoIcon,
+    badge: import_icons13.InfoIcon,
     group: "Insert"
   },
   callout_warning: {
     title: "Warning",
     subtext: "Warning callout block",
     keywords: ["warning", "caution", "attention"],
-    badge: import_icons12.AlertIcon,
+    badge: import_icons13.AlertIcon,
     group: "Insert"
   },
   math: {
     title: "Formula",
     subtext: "LaTeX math formula block",
     keywords: ["math", "latex", "formula", "equation", "katex"],
-    badge: import_icons12.TypeIcon,
+    badge: import_icons13.TypeIcon,
     group: "Insert"
   },
   // Upload
@@ -4089,7 +4259,7 @@ var texts = {
       "media",
       "url"
     ],
-    badge: import_icons12.ImageIcon,
+    badge: import_icons13.ImageIcon,
     group: "Upload"
   }
 };
@@ -4251,9 +4421,9 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
     },
     // Upload
     image: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("image", editor),
+      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("imageUpload", editor),
       action: ({ editor }) => {
-        editor.chain().focus().setImage({ src: "" }).run();
+        editor.chain().focus().setImageUpload().run();
       }
     }
   };
@@ -4314,11 +4484,11 @@ function useSlashDropdownMenu(config) {
 }
 
 // src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var SlashDropdownMenu = (props) => {
   const { config, ...restProps } = props;
   const { getSlashMenuItems } = useSlashDropdownMenu(config);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     SuggestionMenu,
     {
       char: "/",
@@ -4328,7 +4498,7 @@ var SlashDropdownMenu = (props) => {
       selector: "tiptap-slash-dropdown-menu",
       items: ({ query, editor }) => filterSuggestionItems(getSlashMenuItems(editor), query),
       ...restProps,
-      children: (props2) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(List, { ...props2, config })
+      children: (props2) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(List, { ...props2, config })
     }
   );
 };
@@ -4348,13 +4518,13 @@ var Item = (props) => {
     }
   }, [isSelected]);
   const BadgeIcon = item.badge;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_button8.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_button9.Button,
     {
       ref: itemRef,
       variant: "ghost",
       color: "default",
-      startContent: BadgeIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BadgeIcon, {}),
+      startContent: BadgeIcon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BadgeIcon, {}),
       "data-active-state": isSelected ? "on" : "off",
       onClick: onSelect,
       fullWidth: true,
@@ -4369,14 +4539,14 @@ var List = ({
   onSelect,
   config
 }) => {
-  const styles = (0, import_theme4.slashDropdownMenu)();
+  const styles = (0, import_theme5.slashDropdownMenu)();
   const renderedItems = React8.useMemo(() => {
     const rendered = [];
     const showGroups = (config == null ? void 0 : config.showGroups) !== false;
     if (!showGroups) {
       items.forEach((item, index) => {
         rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Item,
             {
               item,
@@ -4401,7 +4571,7 @@ var List = ({
     Object.entries(groups).forEach(([groupLabel, groupData], groupIndex) => {
       if (groupIndex > 0) {
         rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             import_separator.Separator,
             {
               orientation: "horizontal"
@@ -4412,7 +4582,7 @@ var List = ({
       }
       const groupItems = groupData.items.map((item, itemIndex) => {
         const originalIndex = groupData.indices[itemIndex];
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           Item,
           {
             item,
@@ -4424,13 +4594,13 @@ var List = ({
       });
       if (groupLabel) {
         rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "div",
             {
               className: styles.cardItemGroup(),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.cardGroupLabel(), children: groupLabel }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.cardGroup(), children: groupItems })
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.cardGroupLabel(), children: groupLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.cardGroup(), children: groupItems })
               ]
             },
             `group-${groupIndex}-${groupLabel}`
@@ -4445,24 +4615,24 @@ var List = ({
   if (!renderedItems.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       className: styles.card(),
       style: {
         maxHeight: "var(--suggestion-menu-max-height)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.body(), children: renderedItems })
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.body(), children: renderedItems })
     }
   );
 };
 
 // src/presets/basic/editor-header.tsx
-var import_icons24 = require("@kopexa/icons");
+var import_icons25 = require("@kopexa/icons");
 var import_popover3 = require("@kopexa/popover");
 var import_toolbar10 = require("@kopexa/toolbar");
 var import_use_is_mobile2 = require("@kopexa/use-is-mobile");
-var import_react50 = require("react");
+var import_react53 = require("react");
 
 // src/hooks/use-cursor-visibility.ts
 var React10 = __toESM(require("react"));
@@ -4572,7 +4742,7 @@ var React12 = __toESM(require("react"));
 
 // src/ui/blockquote-button/use-blockquote.ts
 var import_editor_utils7 = require("@kopexa/editor-utils");
-var import_icons13 = require("@kopexa/icons");
+var import_icons14 = require("@kopexa/icons");
 var import_state6 = require("@tiptap/pm/state");
 var React11 = __toESM(require("react"));
 var BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
@@ -4680,12 +4850,12 @@ function useBlockquote(config) {
     canToggle: canToggle3,
     label: "Blockquote",
     shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
-    Icon: import_icons13.BlockquoteIcon
+    Icon: import_icons14.BlockquoteIcon
   };
 }
 
 // src/ui/blockquote-button/blockquote-button.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var BlockquoteButton = ({
   editor: providedEditor,
   text,
@@ -4721,7 +4891,7 @@ var BlockquoteButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_toolbar4.ToolbarButton,
     {
       type: "button",
@@ -4738,22 +4908,22 @@ var BlockquoteButton = ({
       onClick: handleClick,
       isIconOnly: !text && !children,
       ...buttonProps,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: text })
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, {}),
+        text && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: text })
       ] })
     }
   );
 };
 
 // src/ui/codeblock-button/code-block-button.tsx
-var import_icons15 = require("@kopexa/icons");
+var import_icons16 = require("@kopexa/icons");
 var import_toolbar5 = require("@kopexa/toolbar");
-var import_react36 = require("react");
+var import_react39 = require("react");
 
 // src/ui/codeblock-button/use-code-block.ts
 var import_editor_utils8 = require("@kopexa/editor-utils");
-var import_icons14 = require("@kopexa/icons");
+var import_icons15 = require("@kopexa/icons");
 var import_state7 = require("@tiptap/pm/state");
 var React13 = __toESM(require("react"));
 var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
@@ -4861,12 +5031,12 @@ function useCodeBlock(config) {
     canToggle: canToggleState,
     label: "Code Block",
     shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: import_icons14.CodeblockIcon
+    Icon: import_icons15.CodeblockIcon
   };
 }
 
 // src/ui/codeblock-button/code-block-button.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var CodeBlockButton = ({
   editor: providedEditor,
   text,
@@ -4883,7 +5053,7 @@ var CodeBlockButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react36.useCallback)(
+  const handleClick = (0, import_react39.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4894,7 +5064,7 @@ var CodeBlockButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_toolbar5.ToolbarButton,
     {
       type: "button",
@@ -4911,26 +5081,26 @@ var CodeBlockButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons15.CodeblockIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons16.CodeblockIcon, {})
     }
   );
 };
 
 // src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_button9 = require("@kopexa/button");
-var import_icons17 = require("@kopexa/icons");
+var import_button10 = require("@kopexa/button");
+var import_icons18 = require("@kopexa/icons");
 var import_popover2 = require("@kopexa/popover");
 var import_toolbar7 = require("@kopexa/toolbar");
-var import_react38 = require("react");
+var import_react41 = require("react");
 
 // src/ui/color-highlight-button/color-highlight-button.tsx
-var import_theme5 = require("@kopexa/theme");
+var import_theme6 = require("@kopexa/theme");
 var import_toolbar6 = require("@kopexa/toolbar");
-var import_react37 = require("react");
+var import_react40 = require("react");
 
 // src/ui/color-highlight-button/use-color-highlight.ts
 var import_editor_utils9 = require("@kopexa/editor-utils");
-var import_icons16 = require("@kopexa/icons");
+var import_icons17 = require("@kopexa/icons");
 var import_use_is_mobile = require("@kopexa/use-is-mobile");
 var React14 = __toESM(require("react"));
 var import_react_hotkeys_hook = require("react-hotkeys-hook");
@@ -5087,12 +5257,12 @@ function useColorHighlight(config) {
     canColorHighlight: canColorHighlightState,
     label: label || `Highlight`,
     shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    Icon: import_icons16.HighlighterIcon
+    Icon: import_icons17.HighlighterIcon
   };
 }
 
 // src/ui/color-highlight-button/color-highlight-button.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ColorHighlightButton = ({
   editor: providedEditor,
   highlightColor,
@@ -5121,7 +5291,7 @@ var ColorHighlightButton = ({
     hideWhenUnavailable,
     onApplied
   });
-  const handleClick = (0, import_react37.useCallback)(
+  const handleClick = (0, import_react40.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -5129,7 +5299,7 @@ var ColorHighlightButton = ({
     },
     [handleColorHighlight, onClick]
   );
-  const buttonStyle = (0, import_react37.useMemo)(
+  const buttonStyle = (0, import_react40.useMemo)(
     () => ({
       ...style,
       "--highlight-color": highlightColor
@@ -5139,8 +5309,8 @@ var ColorHighlightButton = ({
   if (!isVisible) {
     return null;
   }
-  const styles = (0, import_theme5.colorHighlightButton)();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  const styles = (0, import_theme6.colorHighlightButton)();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     import_toolbar6.ToolbarButton,
     {
       type: "button",
@@ -5159,15 +5329,15 @@ var ColorHighlightButton = ({
       isIconOnly: true,
       ...buttonProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "span",
           {
             "data-active-state": isActive ? "on" : "off",
             className: styles.mark()
           }
         ),
-        children || /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        children || /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "span",
             {
               style: { "--highlight-color": highlightColor }
@@ -5181,13 +5351,13 @@ var ColorHighlightButton = ({
 };
 
 // src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var ColorHighlightPopoverButton = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-  import_button9.IconButton,
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  import_button10.IconButton,
   {
     type: "button",
     className,
@@ -5198,7 +5368,7 @@ var ColorHighlightPopoverButton = ({
     tooltip: "Highlight",
     isIconOnly: !children,
     ...props,
-    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons17.HighlighterIcon, {})
+    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons18.HighlighterIcon, {})
   }
 );
 function ColorHighlightPopoverContent({
@@ -5212,8 +5382,8 @@ function ColorHighlightPopoverContent({
   ])
 }) {
   const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = (0, import_react38.useRef)(null);
-  const menuItems = (0, import_react38.useMemo)(
+  const containerRef = (0, import_react41.useRef)(null);
+  const menuItems = (0, import_react41.useMemo)(
     () => [...colors, { label: "Remove highlight", value: "none" }],
     [colors]
   );
@@ -5231,13 +5401,13 @@ function ColorHighlightPopoverContent({
     },
     autoSelectFirstItem: false
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         className: "flex items-center gap-1 outline-none",
         "data-orientation": "horizontal",
-        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           ColorHighlightButton,
           {
             editor,
@@ -5250,9 +5420,9 @@ function ColorHighlightPopoverContent({
         ))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_toolbar7.ToolbarSeparator, { orientation: "vertical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_button9.IconButton,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_toolbar7.ToolbarSeparator, { orientation: "vertical" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_button10.IconButton,
       {
         onClick: handleRemoveHighlight,
         "aria-label": "Remove highlight",
@@ -5262,7 +5432,7 @@ function ColorHighlightPopoverContent({
         variant: "ghost",
         color: "default",
         "data-highlighted": selectedIndex === colors.length,
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons17.BanIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons18.BanIcon, {})
       }
     ) })
   ] });
@@ -5281,18 +5451,18 @@ function ColorHighlightPopover({
   ...props
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react38.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react41.useState)(false);
   const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
     editor,
     hideWhenUnavailable,
     onApplied
   });
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_popover2.Popover.Trigger,
       {
-        render: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        render: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           ColorHighlightPopoverButton,
           {
             disabled: !canColorHighlight2,
@@ -5306,26 +5476,26 @@ function ColorHighlightPopover({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
   ] });
 }
 
 // src/ui/heading-dropdown-menu/index.tsx
-var import_button11 = require("@kopexa/button");
+var import_button12 = require("@kopexa/button");
 var import_dropdown_menu = require("@kopexa/dropdown-menu");
 var import_editor_utils11 = require("@kopexa/editor-utils");
-var import_icons19 = require("@kopexa/icons");
-var import_react40 = require("@tiptap/react");
+var import_icons20 = require("@kopexa/icons");
+var import_react43 = require("@tiptap/react");
 var React16 = __toESM(require("react"));
 
 // src/ui/heading-button/index.tsx
-var import_button10 = require("@kopexa/button");
+var import_button11 = require("@kopexa/button");
 var import_editor_utils10 = require("@kopexa/editor-utils");
-var import_icons18 = require("@kopexa/icons");
+var import_icons19 = require("@kopexa/icons");
 var React15 = __toESM(require("react"));
 
 // src/ui/heading-button/utils.ts
-var import_react39 = require("@tiptap/react");
+var import_react42 = require("@tiptap/react");
 var headingShortcutKeys = {
   1: "Ctrl-Alt-1",
   2: "Ctrl-Alt-2",
@@ -5366,7 +5536,7 @@ function shouldShowHeadingButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react39.isNodeSelection)(editor.state.selection)) {
+    if ((0, import_react42.isNodeSelection)(editor.state.selection)) {
       return false;
     }
   }
@@ -5377,14 +5547,14 @@ function getFormattedHeadingName(level) {
 }
 
 // src/ui/heading-button/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var headingIcons = {
-  1: import_icons18.HeadingOneIcon,
-  2: import_icons18.HeadingTwoIcon,
-  3: import_icons18.HeadingThreeIcon,
-  4: import_icons18.HeadingFourIcon,
-  5: import_icons18.HeadingFiveIcon,
-  6: import_icons18.HeadingSixIcon
+  1: import_icons19.HeadingOneIcon,
+  2: import_icons19.HeadingTwoIcon,
+  3: import_icons19.HeadingThreeIcon,
+  4: import_icons19.HeadingFourIcon,
+  5: import_icons19.HeadingFiveIcon,
+  6: import_icons19.HeadingSixIcon
 };
 function useHeadingState(editor, level, disabled = false) {
   const headingInSchema = (0, import_editor_utils10.isNodeInSchema)("heading", editor);
@@ -5443,8 +5613,8 @@ var HeadingButton = ({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_button10.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_button11.Button,
     {
       type: "button",
       className: className.trim(),
@@ -5459,7 +5629,7 @@ var HeadingButton = ({
       tooltip: formattedName,
       shortcutKeys: shortcutKey,
       onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, {}),
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, {}),
       ...buttonProps,
       ref,
       children: children || text
@@ -5468,7 +5638,7 @@ var HeadingButton = ({
 };
 
 // src/ui/heading-dropdown-menu/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function HeadingDropdownMenu({
   editor: providedEditor,
   levels = [1, 2, 3, 4, 5, 6],
@@ -5488,13 +5658,13 @@ function HeadingDropdownMenu({
     [onOpenChange]
   );
   const getActiveIcon = React16.useCallback(() => {
-    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons19.HeadingIcon, {});
+    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons20.HeadingIcon, {});
     const activeLevel = levels.find(
       (level) => editor.isActive("heading", { level })
     );
-    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons19.HeadingIcon, {});
+    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons20.HeadingIcon, {});
     const ActiveIcon = headingIcons[activeLevel];
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ActiveIcon, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ActiveIcon, {});
   }, [editor, levels]);
   const canToggleAnyHeading = React16.useCallback(() => {
     if (!editor) return false;
@@ -5509,7 +5679,7 @@ function HeadingDropdownMenu({
       return false;
     }
     if (hideWhenUnavailable) {
-      if ((0, import_react40.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
+      if ((0, import_react43.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
         return false;
       }
     }
@@ -5518,9 +5688,9 @@ function HeadingDropdownMenu({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_button11.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      import_button12.Button,
       {
         type: "button",
         disabled: isDisabled,
@@ -5532,12 +5702,12 @@ function HeadingDropdownMenu({
         "aria-label": "Format text as heading",
         "aria-pressed": isAnyHeadingActive,
         tooltip: "Heading",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons19.ChevronDownIcon, {}),
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons20.ChevronDownIcon, {}),
         ...props,
         children: getActiveIcon()
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       HeadingButton,
       {
         editor,
@@ -5552,35 +5722,35 @@ function HeadingDropdownMenu({
 }
 
 // src/ui/list-dropdown-menu/index.tsx
-var import_button13 = require("@kopexa/button");
+var import_button14 = require("@kopexa/button");
 var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
 var import_editor_utils13 = require("@kopexa/editor-utils");
-var import_icons21 = require("@kopexa/icons");
-var import_react43 = require("@tiptap/react");
-var import_react44 = require("react");
+var import_icons22 = require("@kopexa/icons");
+var import_react46 = require("@tiptap/react");
+var import_react47 = require("react");
 
 // src/ui/list-button/index.tsx
-var import_button12 = require("@kopexa/button");
+var import_button13 = require("@kopexa/button");
 var import_editor_utils12 = require("@kopexa/editor-utils");
-var import_icons20 = require("@kopexa/icons");
-var import_react41 = require("@tiptap/react");
-var import_react42 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_icons21 = require("@kopexa/icons");
+var import_react44 = require("@tiptap/react");
+var import_react45 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var listOptions = [
   {
     label: "Bullet List",
     type: "bulletList",
-    icon: import_icons20.ListIcon
+    icon: import_icons21.ListIcon
   },
   {
     label: "Ordered List",
     type: "orderedList",
-    icon: import_icons20.ListOrderedIcon
+    icon: import_icons21.ListOrderedIcon
   },
   {
     label: "Task List",
     type: "taskList",
-    icon: import_icons20.ListTodoIcon
+    icon: import_icons21.ListTodoIcon
   }
 ];
 var listShortcutKeys = {
@@ -5639,7 +5809,7 @@ function shouldShowListButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react41.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
+    if ((0, import_react44.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
       return false;
     }
   }
@@ -5673,8 +5843,8 @@ var ListButton = ({
     editor,
     type
   );
-  const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons20.ListIcon;
-  const handleClick = (0, import_react42.useCallback)(
+  const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons21.ListIcon;
+  const handleClick = (0, import_react45.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && editor) {
@@ -5683,7 +5853,7 @@ var ListButton = ({
     },
     [onClick, editor, type]
   );
-  const show = (0, import_react42.useMemo)(() => {
+  const show = (0, import_react45.useMemo)(() => {
     return shouldShowListButton({
       editor,
       type,
@@ -5694,8 +5864,8 @@ var ListButton = ({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_button12.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_button13.Button,
     {
       type: "button",
       className: className.trim(),
@@ -5708,7 +5878,7 @@ var ListButton = ({
       tooltip: (listOption == null ? void 0 : listOption.label) || type,
       shortcutKeys: shortcutKey,
       onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, {}),
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, {}),
       ...buttonProps,
       ref,
       children: children || text
@@ -5717,7 +5887,7 @@ var ListButton = ({
 };
 
 // src/ui/list-dropdown-menu/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function canToggleAnyList(editor, listTypes) {
   if (!editor) return false;
   return listTypes.some((type) => canToggleList(editor, type));
@@ -5737,24 +5907,24 @@ function shouldShowListDropdown(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react43.isNodeSelection)(editor.state.selection) || !canToggleAny) {
+    if ((0, import_react46.isNodeSelection)(editor.state.selection) || !canToggleAny) {
       return false;
     }
   }
   return true;
 }
 function useListDropdownState(editor, availableTypes) {
-  const [isOpen, setIsOpen] = (0, import_react44.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react47.useState)(false);
   const listInSchema = availableTypes.some(
     (type) => (0, import_editor_utils13.isNodeInSchema)(type, editor)
   );
-  const filteredLists = (0, import_react44.useMemo)(
+  const filteredLists = (0, import_react47.useMemo)(
     () => getFilteredListOptions(availableTypes),
     [availableTypes]
   );
   const canToggleAny = canToggleAnyList(editor, availableTypes);
   const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = (0, import_react44.useCallback)(
+  const handleOpenChange = (0, import_react47.useCallback)(
     (open, callback) => {
       setIsOpen(open);
       callback == null ? void 0 : callback(open);
@@ -5772,11 +5942,11 @@ function useListDropdownState(editor, availableTypes) {
   };
 }
 function useActiveListIcon(editor, filteredLists) {
-  return (0, import_react44.useCallback)(() => {
+  return (0, import_react47.useCallback)(() => {
     const activeOption = filteredLists.find(
       (option) => isListActive(editor, option.type)
     );
-    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons21.ListIcon, {});
+    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons22.ListIcon, {});
   }, [editor, filteredLists]);
 }
 function ListDropdownMenu({
@@ -5796,7 +5966,7 @@ function ListDropdownMenu({
     handleOpenChange
   } = useListDropdownState(editor, types);
   const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = (0, import_react44.useMemo)(() => {
+  const show = (0, import_react47.useMemo)(() => {
     return shouldShowListDropdown({
       editor,
       listTypes: types,
@@ -5805,16 +5975,16 @@ function ListDropdownMenu({
       canToggleAny
     });
   }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = (0, import_react44.useCallback)(
+  const handleOnOpenChange = (0, import_react47.useCallback)(
     (open) => handleOpenChange(open, onOpenChange),
     [handleOpenChange, onOpenChange]
   );
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_button13.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_button14.Button,
       {
         type: "button",
         variant: "ghost",
@@ -5823,12 +5993,12 @@ function ListDropdownMenu({
         tabIndex: -1,
         "aria-label": "List options",
         tooltip: "List",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons21.ChevronDownIcon, {}),
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons22.ChevronDownIcon, {}),
         ...props,
         children: getActiveIcon()
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_dropdown_menu2.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_dropdown_menu2.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       ListButton,
       {
         editor,
@@ -5845,8 +6015,8 @@ function ListDropdownMenu({
 
 // src/ui/table-button/index.tsx
 var import_toolbar8 = require("@kopexa/toolbar");
-var import_react45 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react48 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var TableButton = ({
   editor: providedEditor,
   text,
@@ -5870,7 +6040,7 @@ var TableButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react45.useCallback)(
+  const handleClick = (0, import_react48.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -5881,7 +6051,7 @@ var TableButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_toolbar8.ToolbarButton,
     {
       type: "button",
@@ -5897,22 +6067,22 @@ var TableButton = ({
       onClick: handleClick,
       isIconOnly: !text && !children,
       ...buttonProps,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: text })
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, {}),
+        text && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: text })
       ] })
     }
   );
 };
 
 // src/ui/text-align-button/text-align-button.tsx
-var import_button14 = require("@kopexa/button");
-var import_react47 = require("react");
+var import_button15 = require("@kopexa/button");
+var import_react50 = require("react");
 
 // src/ui/text-align-button/use-text-align.ts
 var import_editor_utils14 = require("@kopexa/editor-utils");
-var import_icons22 = require("@kopexa/icons");
-var import_react46 = require("react");
+var import_icons23 = require("@kopexa/icons");
+var import_react49 = require("react");
 var TEXT_ALIGN_SHORTCUT_KEYS = {
   left: "mod+shift+l",
   center: "mod+shift+e",
@@ -5920,10 +6090,10 @@ var TEXT_ALIGN_SHORTCUT_KEYS = {
   justify: "mod+shift+j"
 };
 var textAlignIcons = {
-  left: import_icons22.AlignLeftIcon,
-  center: import_icons22.AlignCenterIcon,
-  right: import_icons22.AlignRightIcon,
-  justify: import_icons22.AlignJustifyIcon
+  left: import_icons23.AlignLeftIcon,
+  center: import_icons23.AlignCenterIcon,
+  right: import_icons23.AlignRightIcon,
+  justify: import_icons23.AlignJustifyIcon
 };
 var textAlignLabels = {
   left: "Align left",
@@ -5970,10 +6140,10 @@ function useTextAlign(config) {
     onAligned
   } = config;
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react46.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react49.useState)(true);
   const canAlign = canSetTextAlign(editor, align);
   const isActive = isTextAlignActive(editor, align);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton5({ editor, align, hideWhenUnavailable }));
@@ -5984,7 +6154,7 @@ function useTextAlign(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable, align]);
-  const handleTextAlign = (0, import_react46.useCallback)(() => {
+  const handleTextAlign = (0, import_react49.useCallback)(() => {
     if (!editor) return false;
     const success = setTextAlign(editor, align);
     if (success) {
@@ -6004,7 +6174,7 @@ function useTextAlign(config) {
 }
 
 // src/ui/text-align-button/text-align-button.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var TextAlignButton = ({
   editor: providedEditor,
   align,
@@ -6031,7 +6201,7 @@ var TextAlignButton = ({
     hideWhenUnavailable,
     onAligned
   });
-  const handleClick = (0, import_react47.useCallback)(
+  const handleClick = (0, import_react50.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (e.defaultPrevented) return;
@@ -6042,8 +6212,8 @@ var TextAlignButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_button14.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_button15.IconButton,
     {
       type: "button",
       disabled: canAlign,
@@ -6058,19 +6228,19 @@ var TextAlignButton = ({
       shortcutKeys,
       onClick: handleClick,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, {})
     }
   );
 };
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
 var import_toolbar9 = require("@kopexa/toolbar");
-var import_react49 = require("react");
+var import_react52 = require("react");
 
 // src/ui/undo-redo-button/use-undo-redo.ts
 var import_editor_utils15 = require("@kopexa/editor-utils");
-var import_icons23 = require("@kopexa/icons");
-var import_react48 = require("react");
+var import_icons24 = require("@kopexa/icons");
+var import_react51 = require("react");
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
   redo: "mod+shift+z"
@@ -6080,8 +6250,8 @@ var historyActionLabels = {
   redo: "Redo"
 };
 var historyIcons = {
-  undo: import_icons23.UndoIcon,
-  redo: import_icons23.RedoIcon
+  undo: import_icons24.UndoIcon,
+  redo: import_icons24.RedoIcon
 };
 function canExecuteUndoRedoAction(editor, action) {
   if (!editor || !editor.isEditable) return false;
@@ -6110,9 +6280,9 @@ function useUndoRedo(config) {
     onExecuted
   } = config;
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react48.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react51.useState)(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!editor) return;
     const handleUpdate = () => {
       setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable, action }));
@@ -6123,7 +6293,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = (0, import_react48.useCallback)(() => {
+  const handleAction = (0, import_react51.useCallback)(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -6142,7 +6312,7 @@ function useUndoRedo(config) {
 }
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var UndoRedoButton = ({
   editor: providedEditor,
   action,
@@ -6161,7 +6331,7 @@ var UndoRedoButton = ({
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = (0, import_react49.useCallback)(
+  const handleClick = (0, import_react52.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -6172,7 +6342,7 @@ var UndoRedoButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_toolbar9.ToolbarButton,
     {
       type: "button",
@@ -6187,13 +6357,13 @@ var UndoRedoButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, {})
     }
   );
 };
 
 // src/presets/basic/editor-header.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var EditorHeader = ({
   editor: providedEditor,
   variant
@@ -6203,7 +6373,7 @@ var EditorHeader = ({
   const isMobile = (0, import_use_is_mobile2.useIsMobile)();
   const windowSize = useWindowSize();
   const { styles } = useEditorUIContext();
-  const toolbarRef = (0, import_react50.useRef)(null);
+  const toolbarRef = (0, import_react53.useRef)(null);
   const bodyRect = useCursorVisibility({
     editor,
     overlayHeight: (_b = (_a = toolbarRef.current) == null ? void 0 : _a.getBoundingClientRect().height) != null ? _b : 0
@@ -6212,7 +6382,7 @@ var EditorHeader = ({
     return null;
   }
   const ToolbarContent = variant === "comment" ? CommentToolbarContent : variant === "field" ? FieldToolbarContent : MainToolbarContent;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_toolbar10.Toolbar,
     {
       sticky: true,
@@ -6222,54 +6392,54 @@ var EditorHeader = ({
         bottom: `calc(100% - ${windowSize.height - bodyRect.y}px)`
       } : {},
       className: styles.toolbar(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToolbarContent, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ToolbarContent, {})
     }
   ) });
 };
-var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UndoRedoButton, { action: "undo" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UndoRedoButton, { action: "redo" })
+var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UndoRedoButton, { action: "undo" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UndoRedoButton, { action: "redo" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BlockquoteButton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CodeBlockButton, {})
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BlockquoteButton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CodeBlockButton, {})
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "code" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "underline" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ColorHighlightPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LinkPopover, {})
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "bold" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "italic" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "strike" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "code" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "underline" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColorHighlightPopover, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkPopover, {})
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TableButton, {}) }),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MoreOptions, { hideWhenUnavailable: true })
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TableButton, {}) }),
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MoreOptions, { hideWhenUnavailable: true })
 ] });
-var CommentToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "code" })
+var CommentToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "bold" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "italic" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "strike" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "code" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LinkPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkPopover, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
   ] })
 ] });
-var FieldToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "bold" }),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "italic" }),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "strike" }),
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LinkPopover, {})
+var FieldToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "bold" }),
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "italic" }),
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "strike" }),
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkPopover, {})
 ] });
 function MoreOptions({
   editor: providedEditor,
@@ -6277,8 +6447,8 @@ function MoreOptions({
   ...props
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [show, setShow] = (0, import_react50.useState)(false);
-  (0, import_react50.useEffect)(() => {
+  const [show, setShow] = (0, import_react53.useState)(false);
+  (0, import_react53.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setShow(
@@ -6297,13 +6467,13 @@ function MoreOptions({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_toolbar10.ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_popover3.Popover.Root, { spacing: "dense", width: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_popover3.Popover.Root, { spacing: "dense", width: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         import_popover3.Popover.Trigger,
         {
-          render: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          render: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             import_toolbar10.ToolbarButton,
             {
               type: "button",
@@ -6315,29 +6485,29 @@ function MoreOptions({
               title: "More options",
               isIconOnly: true,
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons24.MoreVerticalIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons25.MoreVerticalIcon, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         import_popover3.Popover.Content,
         {
           side: "top",
           align: "end",
           alignOffset: 4,
           sideOffset: 4,
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_toolbar10.Toolbar, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "superscript" }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarkButton, { type: "subscript" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.Toolbar, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "superscript" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "subscript" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_toolbar10.ToolbarSeparator, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TextAlignButton, { align: "left" }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TextAlignButton, { align: "center" }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TextAlignButton, { align: "right" }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TextAlignButton, { align: "justify" })
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarSeparator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextAlignButton, { align: "left" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextAlignButton, { align: "center" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextAlignButton, { align: "right" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextAlignButton, { align: "justify" })
             ] })
           ] })
         }
@@ -6369,7 +6539,7 @@ function shouldShowMoreOptions(params) {
 }
 
 // src/presets/basic/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var BasicEditor = ({
   variant,
   bordered,
@@ -6377,28 +6547,28 @@ var BasicEditor = ({
   ...options
 }) => {
   const editor = useCreateEditor({ content, ...options });
-  const styles = (0, import_theme6.editorBasic)({ variant, bordered });
+  const styles = (0, import_theme7.editorBasic)({ variant, bordered });
   if (!editor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LoadingSpinner, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LoadingSpinner, {});
   }
   const isBottomToolbar = variant === "field";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react51.EditorContext.Provider, { value: { editor }, children: [
-    !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EditorHeader, { editor, variant }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EditorContentArea, { variant }),
-    isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EditorHeader, { editor, variant })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react54.EditorContext.Provider, { value: { editor }, children: [
+    !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EditorHeader, { editor, variant }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EditorContentArea, { variant }),
+    isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EditorHeader, { editor, variant })
   ] }) }) });
 };
 var EditorContentArea = ({ variant }) => {
-  const styles = (0, import_theme6.editorBasic)({ variant });
-  const { editor } = (0, import_react52.useContext)(import_react51.EditorContext);
+  const styles = (0, import_theme7.editorBasic)({ variant });
+  const { editor } = (0, import_react55.useContext)(import_react54.EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: styles.wrapper(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      import_react51.EditorContent,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.wrapper(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      import_react54.EditorContent,
       {
         editor,
         role: "presentation",
@@ -6406,17 +6576,17 @@ var EditorContentArea = ({ variant }) => {
         style: {
           cursor: isDragging ? "grabbing" : "auto"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SlashDropdownMenu, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SlashDropdownMenu, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BubbleMenu, { editor }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkBubble, { editor })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BubbleMenu, { editor }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkBubble, { editor })
   ] });
 };
 function LoadingSpinner({ text = "Connecting..." }) {
-  const styles = (0, import_theme6.editorSpinner)();
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: styles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: styles.content(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const styles = (0, import_theme7.editorSpinner)();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: styles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.content(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "svg",
       {
         className: styles.svg(),
@@ -6424,9 +6594,9 @@ function LoadingSpinner({ text = "Connecting..." }) {
         fill: "none",
         viewBox: "0 0 24 24",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("title", { children: "Loading Spinner" }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: "Loading Spinner" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               className: styles.path(),
@@ -6436,7 +6606,7 @@ function LoadingSpinner({ text = "Connecting..." }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: styles.text(), children: text })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: styles.text(), children: text })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -6445,6 +6615,7 @@ function LoadingSpinner({ text = "Connecting..." }) {
   Editor,
   EditorFileProvider,
   ImageNode,
+  ImageUploadNode,
   InlineMath,
   MathBlock,
   TocNode,