@kopexa/tiptap 17.2.0 → 17.2.2

package/dist/hooks/use-create-editor.js

@@ -50,9 +50,9 @@ 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/context/editor-file-context.tsx
 var import_react = require("react");
@@ -414,7 +414,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
@@ -432,6 +432,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"
@@ -440,38 +444,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"
@@ -488,7 +460,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 }) => {
@@ -496,7 +468,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;
@@ -508,7 +479,8 @@ function ImageNodeView({ editor, node, getPos }) {
       return;
     }
     if (!fileHandler) {
-      setResolveState("error");
+      setResolvedUrl(src);
+      setResolveState("resolved");
       return;
     }
     setResolveState("loading");
@@ -534,156 +506,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",
@@ -725,14 +557,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",
@@ -741,11 +573,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: [
@@ -800,34 +632,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
-      },
+      // Upload state tracking
       uploadState: {
         default: null,
         rendered: false
@@ -841,35 +984,51 @@ 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/link/index.ts
 var import_extension_link = __toESM(require("@tiptap/extension-link"));
 var import_state = require("@tiptap/pm/state");
-var import_react9 = require("@tiptap/react");
+var import_react12 = require("@tiptap/react");
 var Link = import_extension_link.default.extend({
   inclusive: false,
   parseHTML() {
@@ -897,7 +1056,7 @@ var Link = import_extension_link.default.extend({
             const { schema, doc, tr } = view.state;
             let range;
             if (schema.marks.link) {
-              range = (0, import_react9.getMarkRange)(doc.resolve(pos), schema.marks.link);
+              range = (0, import_react12.getMarkRange)(doc.resolve(pos), schema.marks.link);
             }
             if (!range) {
               return;
@@ -923,22 +1082,22 @@ var Link = import_extension_link.default.extend({
 
 // src/extensions/math/index.ts
 var import_core4 = require("@tiptap/core");
-var import_react15 = require("@tiptap/react");
+var import_react18 = 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_react10 = require("@tiptap/react");
+var import_react13 = require("@tiptap/react");
 var import_katex = __toESM(require("katex"));
 var import_katex_min = require("katex/dist/katex.min.css");
-var import_react11 = require("react");
-var import_react_intl6 = require("react-intl");
+var import_react14 = 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",
@@ -987,28 +1146,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_react10.useEditorState)({
+  const isEditable = (0, import_react13.useEditorState)({
     editor,
     selector: ({ editor: e }) => {
       var _a;
       return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
     }
   });
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
-  const [localLatex, setLocalLatex] = (0, import_react11.useState)(latex);
-  const [error, setError] = (0, import_react11.useState)(null);
-  (0, import_react11.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
+  const [localLatex, setLocalLatex] = (0, import_react14.useState)(latex);
+  const [error, setError] = (0, import_react14.useState)(null);
+  (0, import_react14.useEffect)(() => {
     if (isOpen) {
       setLocalLatex(latex);
       setError(null);
     }
   }, [isOpen, latex]);
-  const renderedHtml = (0, import_react11.useMemo)(() => {
+  const renderedHtml = (0, import_react14.useMemo)(() => {
     if (!latex) return null;
     try {
       return import_katex.default.renderToString(latex, {
@@ -1020,7 +1179,7 @@ function MathBlockView({ editor, node, getPos }) {
       return null;
     }
   }, [latex]);
-  const previewHtml = (0, import_react11.useMemo)(() => {
+  const previewHtml = (0, import_react14.useMemo)(() => {
     if (!localLatex) return null;
     try {
       setError(null);
@@ -1030,11 +1189,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_react11.useCallback)(() => {
+  const handleSave = (0, import_react14.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1042,12 +1201,12 @@ function MathBlockView({ editor, node, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localLatex, getPos]);
-  const handleCancel = (0, import_react11.useCallback)(() => {
+  const handleCancel = (0, import_react14.useCallback)(() => {
     setLocalLatex(latex);
     setError(null);
     setIsOpen(false);
   }, [latex]);
-  const handleOpenEditor = (0, import_react11.useCallback)(
+  const handleOpenEditor = (0, import_react14.useCallback)(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -1058,73 +1217,73 @@ function MathBlockView({ editor, node, getPos }) {
     [isEditable]
   );
   const isEmpty = !latex;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    import_react10.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react13.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) })
           ] })
         ] }) })
       ]
@@ -1134,39 +1293,39 @@ function MathBlockView({ editor, node, getPos }) {
 
 // src/extensions/math/inline-math.ts
 var import_core3 = require("@tiptap/core");
-var import_react14 = require("@tiptap/react");
+var import_react17 = 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_react12 = require("@tiptap/react");
+var import_react15 = require("@tiptap/react");
 var import_katex2 = __toESM(require("katex"));
 var import_katex_min2 = require("katex/dist/katex.min.css");
-var import_react13 = require("react");
-var import_react_intl7 = require("react-intl");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react16 = 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_react12.useEditorState)({
+  const isEditable = (0, import_react15.useEditorState)({
     editor,
     selector: ({ editor: e }) => {
       var _a;
       return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
     }
   });
-  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)(() => {
+  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
+  const [localLatex, setLocalLatex] = (0, import_react16.useState)(latex);
+  const [error, setError] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
     if (isOpen) {
       setLocalLatex(latex);
       setError(null);
     }
   }, [isOpen, latex]);
-  const renderedHtml = (0, import_react13.useMemo)(() => {
+  const renderedHtml = (0, import_react16.useMemo)(() => {
     if (!latex) return null;
     try {
       return import_katex2.default.renderToString(latex, {
@@ -1178,7 +1337,7 @@ function InlineMathView({ editor, node, getPos }) {
       return null;
     }
   }, [latex]);
-  const previewHtml = (0, import_react13.useMemo)(() => {
+  const previewHtml = (0, import_react16.useMemo)(() => {
     if (!localLatex) return null;
     try {
       setError(null);
@@ -1188,11 +1347,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_react13.useCallback)(() => {
+  const handleSave = (0, import_react16.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1200,12 +1359,12 @@ function InlineMathView({ editor, node, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localLatex, getPos]);
-  const handleCancel = (0, import_react13.useCallback)(() => {
+  const handleCancel = (0, import_react16.useCallback)(() => {
     setLocalLatex(latex);
     setError(null);
     setIsOpen(false);
   }, [latex]);
-  const handleClick = (0, import_react13.useCallback)(
+  const handleClick = (0, import_react16.useCallback)(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -1216,58 +1375,58 @@ function InlineMathView({ editor, node, getPos }) {
     [isEditable]
   );
   const isEmpty = !latex;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_react12.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    import_react15.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) })
           ] })
         ] }) })
       ]
@@ -1313,7 +1472,7 @@ var InlineMath = import_core3.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react14.ReactNodeViewRenderer)(InlineMathView, {
+    return (0, import_react17.ReactNodeViewRenderer)(InlineMathView, {
       as: "span"
     });
   },
@@ -1381,7 +1540,7 @@ var MathBlock = import_core4.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react15.ReactNodeViewRenderer)(MathBlockView);
+    return (0, import_react18.ReactNodeViewRenderer)(MathBlockView);
   },
   addCommands() {
     return {
@@ -1425,8 +1584,8 @@ var MathBlock = import_core4.Node.create({
 // src/extensions/selection/index.ts
 var import_state2 = require("@tiptap/pm/state");
 var import_view = require("@tiptap/pm/view");
-var import_react16 = require("@tiptap/react");
-var Selection = import_react16.Extension.create({
+var import_react19 = require("@tiptap/react");
+var Selection = import_react19.Extension.create({
   name: "selection",
   addProseMirrorPlugins() {
     const { editor } = this;
@@ -1441,7 +1600,7 @@ var Selection = import_react16.Extension.create({
             if (editor.isFocused === true || !editor.isEditable) {
               return null;
             }
-            if ((0, import_react16.isNodeSelection)(state.selection)) {
+            if ((0, import_react19.isNodeSelection)(state.selection)) {
               return null;
             }
             return import_view.DecorationSet.create(state.doc, [
@@ -1458,18 +1617,18 @@ var Selection = import_react16.Extension.create({
 
 // src/extensions/toc/index.ts
 var import_core5 = require("@tiptap/core");
-var import_react20 = require("@tiptap/react");
+var import_react23 = require("@tiptap/react");
 
 // src/extensions/toc/toc-view.tsx
-var import_icons6 = require("@kopexa/icons");
-var import_theme3 = require("@kopexa/theme");
-var import_react18 = require("@tiptap/react");
-var import_react19 = require("react");
-var import_react_intl10 = require("react-intl");
+var import_icons7 = require("@kopexa/icons");
+var import_theme4 = require("@kopexa/theme");
+var import_react21 = require("@tiptap/react");
+var import_react22 = 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",
@@ -1543,15 +1702,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_react17 = require("react");
-var import_react_intl9 = require("react-intl");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react20 = 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" },
@@ -1561,15 +1720,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_react17.useState)(false);
-  const [localAttrs, setLocalAttrs] = (0, import_react17.useState)(attrs);
-  (0, import_react17.useEffect)(() => {
+  const intl = (0, import_react_intl11.useIntl)();
+  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
+  const [localAttrs, setLocalAttrs] = (0, import_react20.useState)(attrs);
+  (0, import_react20.useEffect)(() => {
     if (isOpen) {
       setLocalAttrs(attrs);
     }
   }, [isOpen, attrs]);
-  const handleSave = (0, import_react17.useCallback)(() => {
+  const handleSave = (0, import_react20.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1577,11 +1736,11 @@ function TocSettings({ editor, attrs, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localAttrs, getPos]);
-  const handleCancel = (0, import_react17.useCallback)(() => {
+  const handleCancel = (0, import_react20.useCallback)(() => {
     setLocalAttrs(attrs);
     setIsOpen(false);
   }, [attrs]);
-  const handleMinLevelChange = (0, import_react17.useCallback)((value) => {
+  const handleMinLevelChange = (0, import_react20.useCallback)((value) => {
     const minLevel = Number.parseInt(String(value), 10);
     setLocalAttrs((prev) => ({
       ...prev,
@@ -1590,7 +1749,7 @@ function TocSettings({ editor, attrs, getPos }) {
       maxLevel: Math.max(prev.maxLevel, minLevel)
     }));
   }, []);
-  const handleMaxLevelChange = (0, import_react17.useCallback)((value) => {
+  const handleMaxLevelChange = (0, import_react20.useCallback)((value) => {
     const maxLevel = Number.parseInt(String(value), 10);
     setLocalAttrs((prev) => ({
       ...prev,
@@ -1599,10 +1758,10 @@ function TocSettings({ editor, attrs, getPos }) {
       minLevel: Math.min(prev.minLevel, maxLevel)
     }));
   }, []);
-  const handleNumberedChange = (0, import_react17.useCallback)((checked) => {
+  const handleNumberedChange = (0, import_react20.useCallback)((checked) => {
     setLocalAttrs((prev) => ({ ...prev, numbered: checked }));
   }, []);
-  const handleStyleChange = (0, import_react17.useCallback)((value) => {
+  const handleStyleChange = (0, import_react20.useCallback)((value) => {
     setLocalAttrs((prev) => ({
       ...prev,
       style: String(value)
@@ -1611,36 +1770,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,
@@ -1653,17 +1812,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,
@@ -1677,12 +1836,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",
@@ -1691,36 +1850,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) => {
@@ -1742,8 +1901,8 @@ function generateHeadingNumbers(headings, minLevel) {
   });
 }
 function TocNodeView({ editor, node, getPos }) {
-  const [headings, setHeadings] = (0, import_react19.useState)([]);
-  const intl = (0, import_react_intl10.useIntl)();
+  const [headings, setHeadings] = (0, import_react22.useState)([]);
+  const intl = (0, import_react_intl12.useIntl)();
   const attrs = node.attrs;
   const {
     minLevel = 1,
@@ -1751,8 +1910,8 @@ function TocNodeView({ editor, node, getPos }) {
     numbered = false,
     style = "default"
   } = attrs;
-  const styles = (0, import_react19.useMemo)(() => (0, import_theme3.toc)({ style }), [style]);
-  const updateHeadings = (0, import_react19.useCallback)(() => {
+  const styles = (0, import_react22.useMemo)(() => (0, import_theme4.toc)({ style }), [style]);
+  const updateHeadings = (0, import_react22.useCallback)(() => {
     const items = [];
     const { doc } = editor.state;
     doc.descendants((docNode, pos) => {
@@ -1772,14 +1931,14 @@ function TocNodeView({ editor, node, getPos }) {
     const numberedHeadings = generateHeadingNumbers(items, minLevel);
     setHeadings(numberedHeadings);
   }, [editor, minLevel, maxLevel]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     updateHeadings();
     editor.on("update", updateHeadings);
     return () => {
       editor.off("update", updateHeadings);
     };
   }, [editor, updateHeadings]);
-  const handleClick = (0, import_react19.useCallback)(
+  const handleClick = (0, import_react22.useCallback)(
     (pos, id) => {
       var _a;
       editor.chain().focus().setTextSelection(pos).run();
@@ -1800,13 +1959,13 @@ function TocNodeView({ editor, node, getPos }) {
   const getIndent = (level) => {
     return (level - minLevel) * 16;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react18.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_react21.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,
@@ -1815,7 +1974,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(),
@@ -1823,14 +1982,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)
             }
           )
         ]
@@ -1899,7 +2058,7 @@ var TocNode = import_core5.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react20.ReactNodeViewRenderer)(TocNodeView);
+    return (0, import_react23.ReactNodeViewRenderer)(TocNodeView);
   },
   addCommands() {
     return {
@@ -1928,7 +2087,7 @@ var TocNode = import_core5.Node.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
@@ -1939,7 +2098,7 @@ function nodeEqualsType({
   }
   return node.type === types;
 }
-var TrailingNode = import_react21.Extension.create({
+var TrailingNode = import_react24.Extension.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -2215,7 +2374,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",
@@ -2226,13 +2397,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());
@@ -2240,7 +2405,7 @@ var useCreateEditor = ({
     content: safeParseContent(content),
     ...options
   });
-  (0, import_react23.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (editor && editor.isEditable !== editable) {
       editor.setEditable(editable);
     }
@@ -2304,8 +2469,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"