@kopexa/tiptap 17.1.0 → 17.2.0

package/dist/presets/basic/index.js

@@ -35,9 +35,9 @@ __export(basic_exports, {
   BasicEditor: () => BasicEditor
 });
 module.exports = __toCommonJS(basic_exports);
-var import_theme5 = require("@kopexa/theme");
-var import_react47 = require("@tiptap/react");
-var import_react48 = require("react");
+var import_theme6 = require("@kopexa/theme");
+var import_react51 = require("@tiptap/react");
+var import_react52 = require("react");
 
 // src/context/editor-context.ts
 var import_react_utils = require("@kopexa/react-utils");
@@ -47,6 +47,7 @@ var [EditorUIProvider, useEditorUIContext] = (0, import_react_utils.createContex
 var import_extension_code = require("@kopexa/extension-code");
 var import_extension_controlref = require("@kopexa/extension-controlref");
 var import_extension_table = require("@kopexa/extension-table");
+var import_extension_file_handler = require("@tiptap/extension-file-handler");
 var import_extension_highlight = require("@tiptap/extension-highlight");
 var import_extension_invisible_characters = __toESM(require("@tiptap/extension-invisible-characters"));
 var import_extension_list = require("@tiptap/extension-list");
@@ -58,19 +59,29 @@ 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_react18 = require("@tiptap/react");
+var import_react22 = require("@tiptap/react");
 var import_starter_kit = require("@tiptap/starter-kit");
-var import_react19 = require("react");
+var import_react23 = require("react");
+
+// src/context/editor-file-context.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EditorFileContext = (0, import_react.createContext)(null);
+var DEFAULT_CACHE_BUFFER = 2 * 60 * 1e3;
+var DEFAULT_CACHE_TTL = 10 * 60 * 1e3;
+function useEditorFile() {
+  return (0, import_react.useContext)(EditorFileContext);
+}
 
 // src/extensions/callout/index.ts
 var import_core = require("@tiptap/core");
-var import_react4 = require("@tiptap/react");
+var import_react5 = require("@tiptap/react");
 
 // src/extensions/callout/callout-view.tsx
 var import_icons2 = require("@kopexa/icons");
 var import_theme = require("@kopexa/theme");
-var import_react2 = require("@tiptap/react");
-var import_react3 = require("react");
+var import_react3 = require("@tiptap/react");
+var import_react4 = require("react");
 
 // src/extensions/callout/callout-settings.tsx
 var import_button = require("@kopexa/button");
@@ -79,7 +90,7 @@ var import_icons = require("@kopexa/icons");
 var import_input = require("@kopexa/input");
 var import_label = require("@kopexa/label");
 var import_select = require("@kopexa/select");
-var import_react = require("react");
+var import_react2 = require("react");
 var import_react_intl2 = require("react-intl");
 
 // src/extensions/callout/messages.ts
@@ -143,7 +154,7 @@ var messages = (0, import_react_intl.defineMessages)({
 });
 
 // src/extensions/callout/callout-settings.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var VARIANTS = [
   { value: "default", messageKey: "variant_default" },
   { value: "info", messageKey: "variant_info" },
@@ -157,14 +168,14 @@ function CalloutSettings({
   getPos
 }) {
   const intl = (0, import_react_intl2.useIntl)();
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  const [localAttrs, setLocalAttrs] = (0, import_react.useState)(attrs);
-  (0, import_react.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const [localAttrs, setLocalAttrs] = (0, import_react2.useState)(attrs);
+  (0, import_react2.useEffect)(() => {
     if (isOpen) {
       setLocalAttrs(attrs);
     }
   }, [isOpen, attrs]);
-  const handleSave = (0, import_react.useCallback)(() => {
+  const handleSave = (0, import_react2.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -172,17 +183,17 @@ function CalloutSettings({
     );
     setIsOpen(false);
   }, [editor, localAttrs, getPos]);
-  const handleCancel = (0, import_react.useCallback)(() => {
+  const handleCancel = (0, import_react2.useCallback)(() => {
     setLocalAttrs(attrs);
     setIsOpen(false);
   }, [attrs]);
-  const handleVariantChange = (0, import_react.useCallback)((value) => {
+  const handleVariantChange = (0, import_react2.useCallback)((value) => {
     setLocalAttrs((prev) => ({
       ...prev,
       variant: String(value)
     }));
   }, []);
-  const handleTitleChange = (0, import_react.useCallback)(
+  const handleTitleChange = (0, import_react2.useCallback)(
     (e) => {
       const value = e.target.value;
       setLocalAttrs((prev) => ({
@@ -195,8 +206,8 @@ function CalloutSettings({
   if (!editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_button.IconButton,
       {
         size: "sm",
@@ -207,30 +218,30 @@ function CalloutSettings({
           e.preventDefault();
           setIsOpen(true);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SettingsIcon, { className: "size-3.5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.SettingsIcon, { className: "size-3.5" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.Dialog.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Title, { children: intl.formatMessage(messages.settings) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.Label, { className: "text-sm", children: intl.formatMessage(messages.variant) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dialog.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_dialog.Dialog.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dialog.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dialog.Dialog.Title, { children: intl.formatMessage(messages.settings) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dialog.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_label.Label, { className: "text-sm", children: intl.formatMessage(messages.variant) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             import_select.Select,
             {
               size: "sm",
               value: localAttrs.variant,
               onValueChange: handleVariantChange,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Value, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Content, { children: VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: v.value, children: intl.formatMessage(messages[v.messageKey]) }, v.value)) })
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.Select.Value, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.Select.Content, { children: VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.Select.Item, { value: v.value, children: intl.formatMessage(messages[v.messageKey]) }, v.value)) })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.Label, { className: "text-sm", children: intl.formatMessage(messages.title) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_label.Label, { className: "text-sm", children: intl.formatMessage(messages.title) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_input.Input,
             {
               size: "sm",
@@ -241,34 +252,41 @@ function CalloutSettings({
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.Dialog.Footer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages.cancel) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { onClick: handleSave, children: intl.formatMessage(messages.save) })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_dialog.Dialog.Footer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_button.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages.cancel) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_button.Button, { onClick: handleSave, children: intl.formatMessage(messages.save) })
       ] })
     ] }) })
   ] });
 }
 
 // src/extensions/callout/callout-view.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function getVariantIcon(variant, iconClass) {
   switch (variant) {
     case "info":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.InfoIcon, { className: iconClass });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.InfoIcon, { className: iconClass });
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.CheckCirleIcon, { className: iconClass });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.CheckCirleIcon, { className: iconClass });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.AlertIcon, { className: iconClass });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.AlertIcon, { className: iconClass });
     case "destructive":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.AlertCircleIcon, { className: iconClass });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.AlertCircleIcon, { className: iconClass });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.ShellIcon, { className: iconClass });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.ShellIcon, { className: iconClass });
   }
 }
 function CalloutNodeView({ editor, node, getPos }) {
   const attrs = node.attrs;
   const { variant = "info", title } = attrs;
-  const styles = (0, import_react3.useMemo)(
+  const isEditable = (0, import_react3.useEditorState)({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a;
+      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
+    }
+  });
+  const styles = (0, import_react4.useMemo)(
     () => (0, import_theme.callout)({
       variant,
       radius: "md",
@@ -276,19 +294,19 @@ function CalloutNodeView({ editor, node, getPos }) {
     }),
     [variant]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    import_react2.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_react3.NodeViewWrapper,
     {
       className: styles.root(),
       "data-type": "callout",
       "data-variant": variant,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.iconContainer(), children: getVariantIcon(variant, styles.icon()) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: styles.content(), children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.title(), children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewContent, { className: "callout-content" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles.iconContainer(), children: getVariantIcon(variant, styles.icon()) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles.content(), children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles.title(), children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.NodeViewContent, { className: "callout-content" })
         ] }),
-        editor.isEditable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        isEditable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           CalloutSettings,
           {
             editor,
@@ -351,7 +369,7 @@ var CalloutNode = import_core.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react4.ReactNodeViewRenderer)(CalloutNodeView);
+    return (0, import_react5.ReactNodeViewRenderer)(CalloutNodeView);
   },
   addCommands() {
     return {
@@ -404,10 +422,463 @@ var CalloutNode = import_core.Node.create({
   }
 });
 
+// src/extensions/image/index.ts
+var import_core2 = require("@tiptap/core");
+var import_react8 = require("@tiptap/react");
+
+// src/extensions/image/image-view.tsx
+var import_button2 = require("@kopexa/button");
+var import_icons3 = require("@kopexa/icons");
+var import_theme2 = require("@kopexa/theme");
+var import_react6 = require("@tiptap/react");
+var import_react7 = require("react");
+var import_react_intl4 = require("react-intl");
+
+// src/extensions/image/messages.ts
+var import_react_intl3 = require("react-intl");
+var messages2 = (0, import_react_intl3.defineMessages)({
+  loading: {
+    id: "editor.image.loading",
+    defaultMessage: "Loading image..."
+  },
+  error: {
+    id: "editor.image.error",
+    defaultMessage: "Failed to load image"
+  },
+  upload_error: {
+    id: "editor.image.upload_error",
+    defaultMessage: "Failed to upload image"
+  },
+  uploading: {
+    id: "editor.image.uploading",
+    defaultMessage: "Uploading..."
+  },
+  upload_placeholder: {
+    id: "editor.image.upload_placeholder",
+    defaultMessage: "Click to upload or drag & drop"
+  },
+  upload_hint: {
+    id: "editor.image.upload_hint",
+    defaultMessage: "PNG, JPG, GIF, WebP, SVG"
+  },
+  alt_text: {
+    id: "editor.image.alt_text",
+    defaultMessage: "Alt text"
+  },
+  alt_placeholder: {
+    id: "editor.image.alt_placeholder",
+    defaultMessage: "Describe the image..."
+  },
+  files_not_supported: {
+    id: "editor.image.files_not_supported",
+    defaultMessage: "File upload is not configured"
+  },
+  file_too_large: {
+    id: "editor.image.file_too_large",
+    defaultMessage: "File is too large (max {maxSize})"
+  },
+  invalid_type: {
+    id: "editor.image.invalid_type",
+    defaultMessage: "Invalid file type"
+  },
+  retry: {
+    id: "editor.image.retry",
+    defaultMessage: "Retry"
+  },
+  remove: {
+    id: "editor.image.remove",
+    defaultMessage: "Remove"
+  }
+});
+
+// src/extensions/image/image-view.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ImageNodeView({ editor, node, getPos }) {
+  var _a;
+  const intl = (0, import_react_intl4.useIntl)();
+  const fileHandler = useEditorFile();
+  const attrs = node.attrs;
+  const isEditable = (0, import_react6.useEditorState)({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a2;
+      return (_a2 = e == null ? void 0 : e.isEditable) != null ? _a2 : false;
+    }
+  });
+  const { src, alt, title, uploadState, uploadProgress } = attrs;
+  const [resolvedUrl, setResolvedUrl] = (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;
+  const resolveImage = (0, import_react7.useCallback)(async () => {
+    if (!src) return;
+    if (!needsResolve) {
+      setResolvedUrl(src);
+      setResolveState("resolved");
+      return;
+    }
+    if (!fileHandler) {
+      setResolveState("error");
+      return;
+    }
+    setResolveState("loading");
+    try {
+      const url = await fileHandler.resolve(src);
+      setResolvedUrl(url);
+      setResolveState("resolved");
+    } catch {
+      setResolveState("error");
+    }
+  }, [src, needsResolve, fileHandler]);
+  (0, import_react7.useEffect)(() => {
+    resolveImage();
+  }, [resolveImage]);
+  const handleRetry = (0, import_react7.useCallback)(() => {
+    resolveImage();
+  }, [resolveImage]);
+  const handleRemove = (0, import_react7.useCallback)(() => {
+    const pos = getPos();
+    if (pos === void 0) return;
+    editor.commands.deleteRange({
+      from: pos,
+      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)(
+    () => (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: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative size-12", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "svg",
+          {
+            className: "size-12 -rotate-90",
+            viewBox: "0 0 36 36",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "circle",
+                {
+                  cx: "18",
+                  cy: "18",
+                  r: "16",
+                  fill: "none",
+                  className: "stroke-muted",
+                  strokeWidth: "2"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "circle",
+                {
+                  cx: "18",
+                  cy: "18",
+                  r: "16",
+                  fill: "none",
+                  className: "stroke-primary",
+                  strokeWidth: "2",
+                  strokeDasharray: 100,
+                  strokeDashoffset: 100 - (uploadProgress != null ? uploadProgress : 0),
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium", children: [
+          uploadProgress != null ? uploadProgress : 0,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: uploadingStyles.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)(
+        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" })
+        }
+      ) })
+    ] }) }) });
+  }
+  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) }) }) });
+  }
+  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: [
+      /* @__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.error) }),
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_button2.IconButton,
+          {
+            size: "sm",
+            variant: "outline",
+            onClick: handleRetry,
+            "aria-label": intl.formatMessage(messages2.retry),
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.ArrowCounterClockwiseIcon, { className: "size-4" })
+          }
+        ),
+        /* @__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.jsxs)(import_react6.NodeViewWrapper, { className: "my-4 relative group", "data-type": "image", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "img",
+      {
+        src: resolvedUrl != null ? resolvedUrl : src,
+        alt: alt != null ? alt : "",
+        title: title != null ? title : void 0,
+        className: "max-w-full h-auto rounded-lg",
+        draggable: false
+      }
+    ),
+    isEditable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_button2.IconButton,
+      {
+        size: "sm",
+        variant: "outline",
+        onClick: handleRemove,
+        "aria-label": intl.formatMessage(messages2.remove),
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.TrashIcon, { className: "size-3.5" })
+      }
+    ) })
+  ] });
+}
+
+// src/extensions/image/index.ts
+var ImageNode = import_core2.Node.create({
+  name: "image",
+  group: "block",
+  atom: true,
+  draggable: true,
+  addOptions() {
+    return {
+      allowBase64: true,
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes() {
+    return {
+      src: {
+        default: null
+      },
+      alt: {
+        default: null
+      },
+      title: {
+        default: null
+      },
+      width: {
+        default: null
+      },
+      height: {
+        default: null
+      },
+      uploadState: {
+        default: null,
+        rendered: false
+      },
+      uploadProgress: {
+        default: null,
+        rendered: false
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "img[src]"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "img",
+      (0, import_core2.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes)
+    ];
+  },
+  addNodeView() {
+    return (0, import_react8.ReactNodeViewRenderer)(ImageNodeView);
+  },
+  addCommands() {
+    return {
+      setImage: (options) => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: options
+        });
+      }
+    };
+  }
+});
+
 // src/extensions/link/index.ts
 var import_extension_link = __toESM(require("@tiptap/extension-link"));
 var import_state = require("@tiptap/pm/state");
-var import_react5 = require("@tiptap/react");
+var import_react9 = require("@tiptap/react");
 var Link = import_extension_link.default.extend({
   inclusive: false,
   parseHTML() {
@@ -435,7 +906,7 @@ var Link = import_extension_link.default.extend({
             const { schema, doc, tr } = view.state;
             let range;
             if (schema.marks.link) {
-              range = (0, import_react5.getMarkRange)(doc.resolve(pos), schema.marks.link);
+              range = (0, import_react9.getMarkRange)(doc.resolve(pos), schema.marks.link);
             }
             if (!range) {
               return;
@@ -460,23 +931,23 @@ var Link = import_extension_link.default.extend({
 });
 
 // src/extensions/math/index.ts
-var import_core3 = require("@tiptap/core");
-var import_react11 = require("@tiptap/react");
+var import_core4 = require("@tiptap/core");
+var import_react15 = require("@tiptap/react");
 
 // src/extensions/math/math-block-view.tsx
-var import_button2 = require("@kopexa/button");
+var import_button3 = require("@kopexa/button");
 var import_dialog2 = require("@kopexa/dialog");
-var import_icons3 = require("@kopexa/icons");
+var import_icons4 = require("@kopexa/icons");
 var import_label2 = require("@kopexa/label");
-var import_react6 = require("@tiptap/react");
+var import_react10 = require("@tiptap/react");
 var import_katex = __toESM(require("katex"));
 var import_katex_min = require("katex/dist/katex.min.css");
-var import_react7 = require("react");
-var import_react_intl4 = require("react-intl");
+var import_react11 = require("react");
+var import_react_intl6 = require("react-intl");
 
 // src/extensions/math/messages.ts
-var import_react_intl3 = require("react-intl");
-var messages2 = (0, import_react_intl3.defineMessages)({
+var import_react_intl5 = require("react-intl");
+var messages3 = (0, import_react_intl5.defineMessages)({
   title: {
     id: "editor.math.title",
     defaultMessage: "Formula",
@@ -525,21 +996,28 @@ var messages2 = (0, import_react_intl3.defineMessages)({
 });
 
 // src/extensions/math/math-block-view.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function MathBlockView({ editor, node, getPos }) {
-  const intl = (0, import_react_intl4.useIntl)();
+  const intl = (0, import_react_intl6.useIntl)();
   const attrs = node.attrs;
   const { latex = "" } = attrs;
-  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
-  const [localLatex, setLocalLatex] = (0, import_react7.useState)(latex);
-  const [error, setError] = (0, import_react7.useState)(null);
-  (0, import_react7.useEffect)(() => {
+  const isEditable = (0, import_react10.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)(() => {
     if (isOpen) {
       setLocalLatex(latex);
       setError(null);
     }
   }, [isOpen, latex]);
-  const renderedHtml = (0, import_react7.useMemo)(() => {
+  const renderedHtml = (0, import_react11.useMemo)(() => {
     if (!latex) return null;
     try {
       return import_katex.default.renderToString(latex, {
@@ -551,7 +1029,7 @@ function MathBlockView({ editor, node, getPos }) {
       return null;
     }
   }, [latex]);
-  const previewHtml = (0, import_react7.useMemo)(() => {
+  const previewHtml = (0, import_react11.useMemo)(() => {
     if (!localLatex) return null;
     try {
       setError(null);
@@ -561,11 +1039,11 @@ function MathBlockView({ editor, node, getPos }) {
         output: "html"
       });
     } catch (_e) {
-      setError(intl.formatMessage(messages2.invalid_latex));
+      setError(intl.formatMessage(messages3.invalid_latex));
       return null;
     }
   }, [localLatex, intl]);
-  const handleSave = (0, import_react7.useCallback)(() => {
+  const handleSave = (0, import_react11.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -573,89 +1051,89 @@ function MathBlockView({ editor, node, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localLatex, getPos]);
-  const handleCancel = (0, import_react7.useCallback)(() => {
+  const handleCancel = (0, import_react11.useCallback)(() => {
     setLocalLatex(latex);
     setError(null);
     setIsOpen(false);
   }, [latex]);
-  const handleOpenEditor = (0, import_react7.useCallback)(
+  const handleOpenEditor = (0, import_react11.useCallback)(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
-      if (editor.isEditable) {
+      if (isEditable) {
         setIsOpen(true);
       }
     },
-    [editor.isEditable]
+    [isEditable]
   );
   const isEmpty = !latex;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    import_react6.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_react10.NodeViewWrapper,
     {
       className: "my-4 relative group",
       "data-type": "math-block",
       "data-latex": latex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime3.jsxs)("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-lg font-serif", children: "\u2211" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm", children: intl.formatMessage(messages2.empty_formula) })
-            ] }) : renderedHtml ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            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)(
               "div",
               {
                 className: "katex-display",
                 dangerouslySetInnerHTML: { __html: renderedHtml }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-destructive text-sm", children: intl.formatMessage(messages2.invalid_latex) })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-destructive text-sm", children: intl.formatMessage(messages3.invalid_latex) })
           }
         ),
-        editor.isEditable && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_button2.IconButton,
+        isEditable && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_button3.IconButton,
           {
             size: "sm",
             variant: "ghost",
             className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",
-            "aria-label": intl.formatMessage(messages2.edit),
+            "aria-label": intl.formatMessage(messages3.edit),
             onClick: handleOpenEditor,
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons3.EditIcon, { className: "size-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.EditIcon, { className: "size-3.5" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_dialog2.Dialog.Content, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Title, { children: intl.formatMessage(messages2.title) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_label2.Label, { className: "text-sm", children: intl.formatMessage(messages2.latex_input) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__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)(
                 "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(messages2.latex_placeholder),
+                  placeholder: intl.formatMessage(messages3.latex_placeholder),
                   spellCheck: false
                 }
               ),
-              error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-destructive", children: error })
+              error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-destructive", children: error })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_label2.Label, { className: "text-sm", children: intl.formatMessage(messages2.preview) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(
+            /* @__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)(
                 "div",
                 {
                   className: "katex-display",
                   dangerouslySetInnerHTML: { __html: previewHtml }
                 }
-              ) : localLatex ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages2.invalid_latex) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages2.latex_placeholder) }) })
+              ) : 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) }) })
             ] })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_dialog2.Dialog.Footer, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_button2.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages2.cancel) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_button2.Button, { onClick: handleSave, disabled: !!error && !!localLatex, children: intl.formatMessage(messages2.save) })
+          /* @__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) })
           ] })
         ] }) })
       ]
@@ -664,33 +1142,40 @@ function MathBlockView({ editor, node, getPos }) {
 }
 
 // src/extensions/math/inline-math.ts
-var import_core2 = require("@tiptap/core");
-var import_react10 = require("@tiptap/react");
+var import_core3 = require("@tiptap/core");
+var import_react14 = require("@tiptap/react");
 
 // src/extensions/math/inline-math-view.tsx
-var import_button3 = require("@kopexa/button");
+var import_button4 = require("@kopexa/button");
 var import_dialog3 = require("@kopexa/dialog");
 var import_label3 = require("@kopexa/label");
-var import_react8 = require("@tiptap/react");
+var import_react12 = require("@tiptap/react");
 var import_katex2 = __toESM(require("katex"));
 var import_katex_min2 = require("katex/dist/katex.min.css");
-var import_react9 = require("react");
-var import_react_intl5 = require("react-intl");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_react_intl7 = require("react-intl");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function InlineMathView({ editor, node, getPos }) {
-  const intl = (0, import_react_intl5.useIntl)();
+  const intl = (0, import_react_intl7.useIntl)();
   const attrs = node.attrs;
   const { latex = "" } = attrs;
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const [localLatex, setLocalLatex] = (0, import_react9.useState)(latex);
-  const [error, setError] = (0, import_react9.useState)(null);
-  (0, import_react9.useEffect)(() => {
+  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_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_react9.useMemo)(() => {
+  const renderedHtml = (0, import_react13.useMemo)(() => {
     if (!latex) return null;
     try {
       return import_katex2.default.renderToString(latex, {
@@ -702,7 +1187,7 @@ function InlineMathView({ editor, node, getPos }) {
       return null;
     }
   }, [latex]);
-  const previewHtml = (0, import_react9.useMemo)(() => {
+  const previewHtml = (0, import_react13.useMemo)(() => {
     if (!localLatex) return null;
     try {
       setError(null);
@@ -712,11 +1197,11 @@ function InlineMathView({ editor, node, getPos }) {
         output: "html"
       });
     } catch (_e) {
-      setError(intl.formatMessage(messages2.invalid_latex));
+      setError(intl.formatMessage(messages3.invalid_latex));
       return null;
     }
   }, [localLatex, intl]);
-  const handleSave = (0, import_react9.useCallback)(() => {
+  const handleSave = (0, import_react13.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -724,74 +1209,74 @@ function InlineMathView({ editor, node, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localLatex, getPos]);
-  const handleCancel = (0, import_react9.useCallback)(() => {
+  const handleCancel = (0, import_react13.useCallback)(() => {
     setLocalLatex(latex);
     setError(null);
     setIsOpen(false);
   }, [latex]);
-  const handleClick = (0, import_react9.useCallback)(
+  const handleClick = (0, import_react13.useCallback)(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
-      if (editor.isEditable) {
+      if (isEditable) {
         setIsOpen(true);
       }
     },
-    [editor.isEditable]
+    [isEditable]
   );
   const isEmpty = !latex;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    import_react8.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react12.NodeViewWrapper,
     {
       as: "span",
       className: "inline-math-wrapper",
       "data-type": "inline-math",
       "data-latex": latex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
-            className: `inline-math cursor-pointer rounded px-0.5 transition-colors ${editor.isEditable ? "hover:bg-primary/10 hover:ring-1 hover:ring-primary/20" : ""} ${isEmpty ? "text-muted-foreground italic" : ""}`,
+            className: `inline-math cursor-pointer rounded px-0.5 transition-colors ${isEditable ? "hover:bg-primary/10 hover:ring-1 hover:ring-primary/20" : ""} ${isEmpty ? "text-muted-foreground italic" : ""}`,
             onClick: handleClick,
-            children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs", children: "$?$" }) : renderedHtml ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-xs", children: "$?$" }) : renderedHtml ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 dangerouslySetInnerHTML: { __html: renderedHtml }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-destructive text-xs", children: latex })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-destructive text-xs", children: latex })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dialog3.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_dialog3.Dialog.Content, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dialog3.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dialog3.Dialog.Title, { children: intl.formatMessage(messages2.title) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dialog3.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_label3.Label, { className: "text-sm", children: intl.formatMessage(messages2.latex_input) }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__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)(
                 "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(messages2.latex_placeholder),
+                  placeholder: intl.formatMessage(messages3.latex_placeholder),
                   spellCheck: false
                 }
               ),
-              error && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_label3.Label, { className: "text-sm", children: intl.formatMessage(messages2.preview) }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(
+            /* @__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)(
                 "span",
                 {
                   dangerouslySetInnerHTML: { __html: previewHtml }
                 }
-              ) : localLatex ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages2.invalid_latex) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-muted-foreground text-sm", children: "$...$" }) })
+              ) : 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: "$...$" }) })
             ] })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_dialog3.Dialog.Footer, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_button3.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages2.cancel) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_button3.Button, { onClick: handleSave, disabled: !!error && !!localLatex, children: intl.formatMessage(messages2.save) })
+          /* @__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) })
           ] })
         ] }) })
       ]
@@ -800,7 +1285,7 @@ function InlineMathView({ editor, node, getPos }) {
 }
 
 // src/extensions/math/inline-math.ts
-var InlineMath = import_core2.Node.create({
+var InlineMath = import_core3.Node.create({
   name: "inlineMath",
   group: "inline",
   inline: true,
@@ -831,13 +1316,13 @@ var InlineMath = import_core2.Node.create({
   renderHTML({ HTMLAttributes }) {
     return [
       "span",
-      (0, import_core2.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, {
+      (0, import_core3.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, {
         "data-type": "inline-math"
       })
     ];
   },
   addNodeView() {
-    return (0, import_react10.ReactNodeViewRenderer)(InlineMathView, {
+    return (0, import_react14.ReactNodeViewRenderer)(InlineMathView, {
       as: "span"
     });
   },
@@ -854,7 +1339,7 @@ var InlineMath = import_core2.Node.create({
   addInputRules() {
     return [
       // Inline math with $...$
-      new import_core2.InputRule({
+      new import_core3.InputRule({
         // Match $...$ but not $$...$$
         find: /(?<!\$)\$([^$]+)\$(?!\$)/,
         handler: ({ state, range, match }) => {
@@ -868,7 +1353,7 @@ var InlineMath = import_core2.Node.create({
 });
 
 // src/extensions/math/index.ts
-var MathBlock = import_core3.Node.create({
+var MathBlock = import_core4.Node.create({
   name: "mathBlock",
   group: "block",
   atom: true,
@@ -899,13 +1384,13 @@ var MathBlock = import_core3.Node.create({
   renderHTML({ HTMLAttributes }) {
     return [
       "div",
-      (0, import_core3.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, {
+      (0, import_core4.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, {
         "data-type": "math-block"
       })
     ];
   },
   addNodeView() {
-    return (0, import_react11.ReactNodeViewRenderer)(MathBlockView);
+    return (0, import_react15.ReactNodeViewRenderer)(MathBlockView);
   },
   addCommands() {
     return {
@@ -934,7 +1419,7 @@ var MathBlock = import_core3.Node.create({
   addInputRules() {
     return [
       // Block math with $$...$$
-      new import_core3.InputRule({
+      new import_core4.InputRule({
         find: /^\$\$(.+)\$\$$/,
         handler: ({ state, range, match }) => {
           const latex = match[1];
@@ -949,8 +1434,8 @@ var MathBlock = import_core3.Node.create({
 // src/extensions/selection/index.ts
 var import_state2 = require("@tiptap/pm/state");
 var import_view = require("@tiptap/pm/view");
-var import_react12 = require("@tiptap/react");
-var Selection = import_react12.Extension.create({
+var import_react16 = require("@tiptap/react");
+var Selection = import_react16.Extension.create({
   name: "selection",
   addProseMirrorPlugins() {
     const { editor } = this;
@@ -965,7 +1450,7 @@ var Selection = import_react12.Extension.create({
             if (editor.isFocused === true || !editor.isEditable) {
               return null;
             }
-            if ((0, import_react12.isNodeSelection)(state.selection)) {
+            if ((0, import_react16.isNodeSelection)(state.selection)) {
               return null;
             }
             return import_view.DecorationSet.create(state.doc, [
@@ -981,19 +1466,19 @@ var Selection = import_react12.Extension.create({
 });
 
 // src/extensions/toc/index.ts
-var import_core4 = require("@tiptap/core");
-var import_react16 = require("@tiptap/react");
+var import_core5 = require("@tiptap/core");
+var import_react20 = require("@tiptap/react");
 
 // src/extensions/toc/toc-view.tsx
-var import_icons5 = require("@kopexa/icons");
-var import_theme2 = require("@kopexa/theme");
-var import_react14 = require("@tiptap/react");
-var import_react15 = require("react");
-var import_react_intl8 = require("react-intl");
+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");
 
 // src/extensions/toc/messages.ts
-var import_react_intl6 = require("react-intl");
-var messages3 = (0, import_react_intl6.defineMessages)({
+var import_react_intl8 = require("react-intl");
+var messages4 = (0, import_react_intl8.defineMessages)({
   title: {
     id: "editor.toc.title",
     defaultMessage: "Table of Contents",
@@ -1067,15 +1552,15 @@ var messages3 = (0, import_react_intl6.defineMessages)({
 });
 
 // src/extensions/toc/toc-settings.tsx
-var import_button4 = require("@kopexa/button");
+var import_button5 = require("@kopexa/button");
 var import_dialog4 = require("@kopexa/dialog");
-var import_icons4 = require("@kopexa/icons");
+var import_icons5 = require("@kopexa/icons");
 var import_label4 = require("@kopexa/label");
 var import_select2 = require("@kopexa/select");
 var import_switch = require("@kopexa/switch");
-var import_react13 = require("react");
-var import_react_intl7 = require("react-intl");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_react_intl9 = require("react-intl");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var HEADING_LEVELS = [
   { value: "1", label: "H1" },
   { value: "2", label: "H2" },
@@ -1085,15 +1570,15 @@ var HEADING_LEVELS = [
   { value: "6", label: "H6" }
 ];
 function TocSettings({ editor, attrs, getPos }) {
-  const intl = (0, import_react_intl7.useIntl)();
-  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
-  const [localAttrs, setLocalAttrs] = (0, import_react13.useState)(attrs);
-  (0, import_react13.useEffect)(() => {
+  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)(() => {
     if (isOpen) {
       setLocalAttrs(attrs);
     }
   }, [isOpen, attrs]);
-  const handleSave = (0, import_react13.useCallback)(() => {
+  const handleSave = (0, import_react17.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1101,11 +1586,11 @@ function TocSettings({ editor, attrs, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localAttrs, getPos]);
-  const handleCancel = (0, import_react13.useCallback)(() => {
+  const handleCancel = (0, import_react17.useCallback)(() => {
     setLocalAttrs(attrs);
     setIsOpen(false);
   }, [attrs]);
-  const handleMinLevelChange = (0, import_react13.useCallback)((value) => {
+  const handleMinLevelChange = (0, import_react17.useCallback)((value) => {
     const minLevel = Number.parseInt(String(value), 10);
     setLocalAttrs((prev) => ({
       ...prev,
@@ -1114,7 +1599,7 @@ function TocSettings({ editor, attrs, getPos }) {
       maxLevel: Math.max(prev.maxLevel, minLevel)
     }));
   }, []);
-  const handleMaxLevelChange = (0, import_react13.useCallback)((value) => {
+  const handleMaxLevelChange = (0, import_react17.useCallback)((value) => {
     const maxLevel = Number.parseInt(String(value), 10);
     setLocalAttrs((prev) => ({
       ...prev,
@@ -1123,10 +1608,10 @@ function TocSettings({ editor, attrs, getPos }) {
       minLevel: Math.min(prev.minLevel, maxLevel)
     }));
   }, []);
-  const handleNumberedChange = (0, import_react13.useCallback)((checked) => {
+  const handleNumberedChange = (0, import_react17.useCallback)((checked) => {
     setLocalAttrs((prev) => ({ ...prev, numbered: checked }));
   }, []);
-  const handleStyleChange = (0, import_react13.useCallback)((value) => {
+  const handleStyleChange = (0, import_react17.useCallback)((value) => {
     setLocalAttrs((prev) => ({
       ...prev,
       style: String(value)
@@ -1135,36 +1620,36 @@ function TocSettings({ editor, attrs, getPos }) {
   if (!editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_button4.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_button5.IconButton,
       {
         size: "sm",
         variant: "ghost",
-        "aria-label": intl.formatMessage(messages3.settings),
+        "aria-label": intl.formatMessage(messages4.settings),
         onClick: (e) => {
           e.stopPropagation();
           e.preventDefault();
           setIsOpen(true);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.SettingsIcon, { className: "size-3.5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons5.SettingsIcon, { className: "size-3.5" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog4.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_dialog4.Dialog.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog4.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog4.Dialog.Title, { children: intl.formatMessage(messages3.settings) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog4.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages3.min_level) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    /* @__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)(
               import_select2.Select,
               {
                 size: "sm",
                 value: String(localAttrs.minLevel),
                 onValueChange: handleMinLevelChange,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select2.Select.Value, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select2.Select.Content, { children: HEADING_LEVELS.map((level) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__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)(
                     import_select2.Select.Item,
                     {
                       value: level.value,
@@ -1177,17 +1662,17 @@ function TocSettings({ editor, attrs, getPos }) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages3.max_level) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          /* @__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)(
               import_select2.Select,
               {
                 size: "sm",
                 value: String(localAttrs.maxLevel),
                 onValueChange: handleMaxLevelChange,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select2.Select.Value, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select2.Select.Content, { children: HEADING_LEVELS.map((level) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__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)(
                     import_select2.Select.Item,
                     {
                       value: level.value,
@@ -1201,12 +1686,12 @@ function TocSettings({ editor, attrs, getPos }) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages3.numbered) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages3.numbered_hint) })
+        /* @__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_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             import_switch.Switch,
             {
               size: "sm",
@@ -1215,36 +1700,36 @@ function TocSettings({ editor, attrs, getPos }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages3.style) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__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)(
             import_select2.Select,
             {
               size: "sm",
               value: localAttrs.style,
               onValueChange: handleStyleChange,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select2.Select.Value, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_select2.Select.Content, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select2.Select.Item, { value: "default", children: intl.formatMessage(messages3.style_default) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select2.Select.Item, { value: "flat", children: intl.formatMessage(messages3.style_flat) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select2.Select.Item, { value: "compact", children: intl.formatMessage(messages3.style_compact) })
+                /* @__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_runtime5.jsxs)(import_dialog4.Dialog.Footer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_button4.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages3.cancel) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_button4.Button, { onClick: handleSave, children: intl.formatMessage(messages3.save) })
+      /* @__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) })
       ] })
     ] }) })
   ] });
 }
 
 // src/extensions/toc/toc-view.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function generateHeadingNumbers(headings, minLevel) {
   const counters = [0, 0, 0, 0, 0, 0];
   return headings.map((heading) => {
@@ -1266,8 +1751,8 @@ function generateHeadingNumbers(headings, minLevel) {
   });
 }
 function TocNodeView({ editor, node, getPos }) {
-  const [headings, setHeadings] = (0, import_react15.useState)([]);
-  const intl = (0, import_react_intl8.useIntl)();
+  const [headings, setHeadings] = (0, import_react19.useState)([]);
+  const intl = (0, import_react_intl10.useIntl)();
   const attrs = node.attrs;
   const {
     minLevel = 1,
@@ -1275,8 +1760,8 @@ function TocNodeView({ editor, node, getPos }) {
     numbered = false,
     style = "default"
   } = attrs;
-  const styles = (0, import_react15.useMemo)(() => (0, import_theme2.toc)({ style }), [style]);
-  const updateHeadings = (0, import_react15.useCallback)(() => {
+  const styles = (0, import_react19.useMemo)(() => (0, import_theme3.toc)({ style }), [style]);
+  const updateHeadings = (0, import_react19.useCallback)(() => {
     const items = [];
     const { doc } = editor.state;
     doc.descendants((docNode, pos) => {
@@ -1296,14 +1781,14 @@ function TocNodeView({ editor, node, getPos }) {
     const numberedHeadings = generateHeadingNumbers(items, minLevel);
     setHeadings(numberedHeadings);
   }, [editor, minLevel, maxLevel]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     updateHeadings();
     editor.on("update", updateHeadings);
     return () => {
       editor.off("update", updateHeadings);
     };
   }, [editor, updateHeadings]);
-  const handleClick = (0, import_react15.useCallback)(
+  const handleClick = (0, import_react19.useCallback)(
     (pos, id) => {
       var _a;
       editor.chain().focus().setTextSelection(pos).run();
@@ -1324,13 +1809,13 @@ function TocNodeView({ editor, node, getPos }) {
   const getIndent = (level) => {
     return (level - minLevel) * 16;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react14.NodeViewWrapper, { className: styles.root(), "data-type": "toc", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: styles.header(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: styles.headerContent(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.ListIcon, { className: styles.headerIcon() }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles.headerTitle(), children: intl.formatMessage(messages3.title) })
+  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) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: styles.headerActions(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: styles.headerActions(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         TocSettings,
         {
           editor,
@@ -1339,7 +1824,7 @@ function TocNodeView({ editor, node, getPos }) {
         }
       ) })
     ] }),
-    isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: styles.emptyState(), children: intl.formatMessage(messages3.empty_state) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("nav", { className: styles.nav(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: styles.list(), children: headings.map((heading) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    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)(
       "li",
       {
         className: styles.item(),
@@ -1347,14 +1832,14 @@ function TocNodeView({ editor, node, getPos }) {
           paddingLeft: `${getIndent(heading.level)}px`
         },
         children: [
-          numbered && heading.number && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles.itemNumber(), children: heading.number }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          numbered && heading.number && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: styles.itemNumber(), children: heading.number }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
               onClick: () => handleClick(heading.pos, heading.id),
               className: styles.itemButton(),
-              children: heading.text || intl.formatMessage(messages3.empty_heading)
+              children: heading.text || intl.formatMessage(messages4.empty_heading)
             }
           )
         ]
@@ -1365,7 +1850,7 @@ function TocNodeView({ editor, node, getPos }) {
 }
 
 // src/extensions/toc/index.ts
-var TocNode = import_core4.Node.create({
+var TocNode = import_core5.Node.create({
   name: "tableOfContentsNode",
   group: "block",
   atom: true,
@@ -1417,13 +1902,13 @@ var TocNode = import_core4.Node.create({
   renderHTML({ HTMLAttributes }) {
     return [
       "div",
-      (0, import_core4.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, {
+      (0, import_core5.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, {
         "data-type": "toc"
       })
     ];
   },
   addNodeView() {
-    return (0, import_react16.ReactNodeViewRenderer)(TocNodeView);
+    return (0, import_react20.ReactNodeViewRenderer)(TocNodeView);
   },
   addCommands() {
     return {
@@ -1452,7 +1937,7 @@ var TocNode = import_core4.Node.create({
 
 // src/extensions/trailing-node/index.ts
 var import_state3 = require("@tiptap/pm/state");
-var import_react17 = require("@tiptap/react");
+var import_react21 = require("@tiptap/react");
 function nodeEqualsType({
   types,
   node
@@ -1463,7 +1948,7 @@ function nodeEqualsType({
   }
   return node.type === types;
 }
-var TrailingNode = import_react17.Extension.create({
+var TrailingNode = import_react21.Extension.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -1509,7 +1994,7 @@ var TrailingNode = import_react17.Extension.create({
 });
 
 // src/extensions/ui-state/index.ts
-var import_core5 = require("@tiptap/core");
+var import_core6 = require("@tiptap/core");
 var defaultUiState = {
   aiGenerationIsSelection: false,
   aiGenerationIsLoading: false,
@@ -1519,7 +2004,7 @@ var defaultUiState = {
   lockDragHandle: false,
   isDragging: false
 };
-var UiState = import_core5.Extension.create({
+var UiState = import_core6.Extension.create({
   name: "uiState",
   addStorage() {
     return {
@@ -1734,9 +2219,12 @@ var useCreateEditor = ({
   onChange,
   enableControls = false,
   controlResolver,
+  fileHandler: fileHandlerProp,
   ...options
 }) => {
-  const editor = (0, import_react18.useEditor)({
+  const fileHandlerFromContext = useEditorFile();
+  const fileHandler = fileHandlerProp != null ? fileHandlerProp : fileHandlerFromContext;
+  const editor = (0, import_react22.useEditor)({
     editorProps: {
       attributes: {
         autocomplete: "off",
@@ -1751,7 +2239,8 @@ var useCreateEditor = ({
       editable,
       placeholder,
       enableControls,
-      controlResolver
+      controlResolver,
+      fileHandler
     }),
     editable,
     onUpdate: ({ editor: editor2 }) => {
@@ -1760,7 +2249,7 @@ var useCreateEditor = ({
     content: safeParseContent(content),
     ...options
   });
-  (0, import_react19.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (editor && editor.isEditable !== editable) {
       editor.setEditable(editable);
     }
@@ -1771,7 +2260,8 @@ function getExtensions({
   editable,
   placeholder,
   enableControls = false,
-  controlResolver
+  controlResolver,
+  fileHandler
 }) {
   const extensions = [
     import_starter_kit.StarterKit.configure({
@@ -1823,6 +2313,8 @@ function getExtensions({
     CalloutNode,
     MathBlock,
     InlineMath,
+    // Image support - always include for display
+    ImageNode,
     import_extensions.Placeholder.configure({
       placeholder,
       emptyNodeClass: "is-empty with-slash"
@@ -1831,14 +2323,94 @@ function getExtensions({
   if (enableControls) {
     extensions.push(import_extension_controlref.ControlKit.configure({ resolver: controlResolver }));
   }
+  if (fileHandler) {
+    extensions.push(
+      import_extension_file_handler.FileHandler.configure({
+        allowedMimeTypes: [
+          "image/jpeg",
+          "image/png",
+          "image/gif",
+          "image/webp",
+          "image/svg+xml"
+        ],
+        onDrop: (editor, files, pos) => {
+          for (const file of files) {
+            handleFileUpload(editor, file, fileHandler, pos);
+          }
+        },
+        onPaste: (editor, files) => {
+          for (const file of files) {
+            handleFileUpload(editor, file, fileHandler);
+          }
+        }
+      })
+    );
+  }
   return extensions;
 }
+async function handleFileUpload(editor, file, fileHandler, pos) {
+  if (!editor) return;
+  const tempId = `uploading-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+  const insertPos = pos != null ? pos : editor.state.selection.anchor;
+  editor.chain().focus().insertContentAt(insertPos, {
+    type: "image",
+    attrs: {
+      src: tempId,
+      uploadState: "uploading",
+      uploadProgress: 0
+    }
+  }).run();
+  try {
+    const ref = await fileHandler.upload(file, (percent) => {
+      editor.state.doc.descendants((node, nodePos) => {
+        if (node.type.name === "image" && node.attrs.src === tempId) {
+          editor.view.dispatch(
+            editor.state.tr.setNodeMarkup(nodePos, void 0, {
+              ...node.attrs,
+              uploadProgress: percent
+            })
+          );
+          return false;
+        }
+        return true;
+      });
+    });
+    editor.state.doc.descendants((node, nodePos) => {
+      if (node.type.name === "image" && node.attrs.src === tempId) {
+        editor.view.dispatch(
+          editor.state.tr.setNodeMarkup(nodePos, void 0, {
+            src: ref,
+            uploadState: null,
+            uploadProgress: null
+          })
+        );
+        return false;
+      }
+      return true;
+    });
+  } catch (error) {
+    editor.state.doc.descendants((node, nodePos) => {
+      if (node.type.name === "image" && node.attrs.src === tempId) {
+        editor.view.dispatch(
+          editor.state.tr.setNodeMarkup(nodePos, void 0, {
+            ...node.attrs,
+            uploadState: "error",
+            uploadProgress: null
+          })
+        );
+        return false;
+      }
+      return true;
+    });
+    console.error("[FileHandler] Upload failed:", error);
+  }
+}
 
 // src/hooks/use-ui-editor-state.ts
-var import_react20 = require("@tiptap/react");
+var import_react24 = require("@tiptap/react");
 function useUiEditorState(editor) {
   var _a;
-  return (_a = (0, import_react20.useEditorState)({
+  return (_a = (0, import_react24.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => {
       if (!editor2) return defaultUiState;
@@ -1859,23 +2431,23 @@ var import_toolbar3 = require("@kopexa/toolbar");
 var import_menus = require("@tiptap/react/menus");
 
 // src/ui/link-popover/link-popover.tsx
-var import_button5 = require("@kopexa/button");
-var import_icons7 = require("@kopexa/icons");
+var import_button6 = require("@kopexa/button");
+var import_icons8 = require("@kopexa/icons");
 var import_input2 = require("@kopexa/input");
 var import_popover = require("@kopexa/popover");
 var import_toolbar = require("@kopexa/toolbar");
-var import_react23 = require("react");
+var import_react27 = require("react");
 
 // src/hooks/use-tiptap-editor.ts
-var import_react21 = require("@tiptap/react");
-var import_react22 = require("react");
+var import_react25 = require("@tiptap/react");
+var import_react26 = require("react");
 function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = (0, import_react21.useCurrentEditor)();
-  const mainEditor = (0, import_react22.useMemo)(
+  const { editor: coreEditor } = (0, import_react25.useCurrentEditor)();
+  const mainEditor = (0, import_react26.useMemo)(
     () => providedEditor || coreEditor,
     [providedEditor, coreEditor]
   );
-  const editorState = (0, import_react21.useEditorState)({
+  const editorState = (0, import_react25.useEditorState)({
     editor: mainEditor,
     selector(context) {
       if (!context.editor) {
@@ -1897,7 +2469,7 @@ function useTiptapEditor(providedEditor) {
 
 // src/ui/link-popover/use-link-popover.ts
 var import_editor_utils = require("@kopexa/editor-utils");
-var import_icons6 = require("@kopexa/icons");
+var import_icons7 = require("@kopexa/icons");
 var React = __toESM(require("react"));
 
 // src/utils/index.ts
@@ -2071,15 +2643,15 @@ function useLinkPopover(config) {
     canSet,
     isActive,
     label: "Link",
-    Icon: import_icons6.LinkIcon,
+    Icon: import_icons7.LinkIcon,
     ...linkHandler
   };
 }
 
 // src/ui/link-popover/link-popover.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var LinkButton = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_toolbar.ToolbarButton,
     {
       type: "button",
@@ -2091,7 +2663,7 @@ var LinkButton = ({ className, children, ...props }) => {
       title: "Link",
       isIconOnly: !children,
       ...props,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons7.LinkIcon, {})
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons8.LinkIcon, {})
     }
   );
 };
@@ -2104,8 +2676,8 @@ var LinkMain = ({
   isActive,
   onSave
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react23.useState)(!isActive || !url);
-  (0, import_react23.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react27.useState)(!isActive || !url);
+  (0, import_react27.useEffect)(() => {
     setIsEditing(!isActive || !url);
   }, [isActive, url]);
   const handleKeyDown = (event) => {
@@ -2128,8 +2700,8 @@ var LinkMain = ({
     setIsEditing(true);
   };
   if (isEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         import_input2.Input,
         {
           type: "url",
@@ -2144,8 +2716,8 @@ var LinkMain = ({
           autoFocus: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_button5.IconButton,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_button6.IconButton,
         {
           type: "button",
           size: "sm",
@@ -2153,13 +2725,13 @@ var LinkMain = ({
           onClick: handleSave,
           "aria-label": "Save link",
           disabled: !url,
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons7.CheckIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons8.CheckIcon, { className: "size-4" })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "a",
       {
         href: url,
@@ -2173,38 +2745,38 @@ var LinkMain = ({
         children: url
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_button5.IconButton,
+    /* @__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,
         {
           type: "button",
           size: "sm",
           variant: "ghost",
           onClick: openLink,
           "aria-label": "Open link in new tab",
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons7.ExternalLinkIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons8.ExternalLinkIcon, { className: "size-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_button5.IconButton,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_button6.IconButton,
         {
           type: "button",
           size: "sm",
           variant: "ghost",
           onClick: handleEdit,
           "aria-label": "Edit link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons7.EditIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons8.EditIcon, { className: "size-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_button5.IconButton,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_button6.IconButton,
         {
           type: "button",
           size: "sm",
           variant: "ghost",
           onClick: removeLink,
           "aria-label": "Remove link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons7.TrashIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons8.TrashIcon, { className: "size-4" })
         }
       )
     ] })
@@ -2221,7 +2793,7 @@ function LinkPopover({
   ...buttonProps
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react23.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
   const {
     isVisible,
     canSet,
@@ -2237,18 +2809,18 @@ function LinkPopover({
     hideWhenUnavailable,
     onSetLink
   });
-  const handleOnOpenChange = (0, import_react23.useCallback)(
+  const handleOnOpenChange = (0, import_react27.useCallback)(
     (nextIsOpen) => {
       setIsOpen(nextIsOpen);
       onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
     },
     [onOpenChange]
   );
-  const handleSetLink = (0, import_react23.useCallback)(() => {
+  const handleSetLink = (0, import_react27.useCallback)(() => {
     setLink();
     setIsOpen(false);
   }, [setLink]);
-  const handleClick = (0, import_react23.useCallback)(
+  const handleClick = (0, import_react27.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -2256,7 +2828,7 @@ function LinkPopover({
     },
     [onClick, isOpen]
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (autoOpenOnLinkActive && isActive) {
       setIsOpen(true);
     }
@@ -2264,17 +2836,17 @@ function LinkPopover({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     import_popover.Popover.Root,
     {
       open: isOpen,
       onOpenChange: handleOnOpenChange,
       spacing: "dense",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           import_popover.Popover.Trigger,
           {
-            render: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            render: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               LinkButton,
               {
                 "data-disabled": !canSet,
@@ -2288,7 +2860,7 @@ function LinkPopover({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_popover.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           LinkMain,
           {
             url,
@@ -2308,19 +2880,19 @@ LinkButton.displayName = "LinkButton";
 
 // src/ui/mark-button/index.tsx
 var import_editor_utils2 = require("@kopexa/editor-utils");
-var import_icons8 = require("@kopexa/icons");
+var import_icons9 = require("@kopexa/icons");
 var import_toolbar2 = require("@kopexa/toolbar");
-var import_react24 = require("@tiptap/react");
-var import_react25 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react28 = require("@tiptap/react");
+var import_react29 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var markIcons = {
-  bold: import_icons8.BoldIcon,
-  italic: import_icons8.ItalicIcon,
-  underline: import_icons8.UnderlineIcon,
-  strike: import_icons8.StrikeIcon,
-  code: import_icons8.CodeIcon,
-  superscript: import_icons8.SuperscriptIcon,
-  subscript: import_icons8.SubscriptIcon
+  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
 };
 var markShortcutKeys = {
   bold: "mod+b",
@@ -2358,7 +2930,7 @@ function shouldShowMarkButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react24.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
+    if ((0, import_react28.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
       return false;
     }
   }
@@ -2403,7 +2975,7 @@ var MarkButton = ({
     shortcutKey,
     formattedName
   } = useMarkState(editor, type, disabled);
-  const handleClick = (0, import_react25.useCallback)(
+  const handleClick = (0, import_react29.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && !isDisabled && editor) {
@@ -2412,7 +2984,7 @@ var MarkButton = ({
     },
     [onClick, isDisabled, editor, type]
   );
-  const show = (0, import_react25.useMemo)(() => {
+  const show = (0, import_react29.useMemo)(() => {
     return shouldShowMarkButton({
       editor,
       type,
@@ -2423,7 +2995,7 @@ var MarkButton = ({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_toolbar2.ToolbarButton,
     {
       type: "button",
@@ -2441,18 +3013,18 @@ var MarkButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, {})
     }
   );
 };
 
 // src/ui/bubble-menu/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function BubbleMenu({ editor }) {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_menus.BubbleMenu,
     {
       editor,
@@ -2470,15 +3042,15 @@ function BubbleMenu({ editor }) {
         offset: 8
       },
       className: "rounded-lg border bg-background shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_toolbar3.Toolbar, { radius: "md", border: "none", className: "p-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_toolbar3.ToolbarGroup, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MarkButton, { type: "bold" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MarkButton, { type: "italic" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MarkButton, { type: "strike" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MarkButton, { type: "code" })
+      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" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_toolbar3.ToolbarSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_toolbar3.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LinkPopover, { autoOpenOnLinkActive: false }) })
+        /* @__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 }) })
       ] })
     }
   );
@@ -2490,7 +3062,7 @@ var React3 = __toESM(require("react"));
 
 // src/hooks/use-floating-toolbar-visibility.ts
 var import_state4 = require("@tiptap/pm/state");
-var import_react26 = require("@tiptap/react");
+var import_react30 = require("@tiptap/react");
 var React2 = __toESM(require("react"));
 var HIDE_FLOATING_META = "hideFloatingToolbar";
 var selectNodeAndHideFloating = (editor, pos) => {
@@ -2588,41 +3160,41 @@ function useScrollToHash(config = {}) {
 }
 
 // src/ui/link-bubble/index.tsx
-var import_button6 = require("@kopexa/button");
-var import_icons9 = require("@kopexa/icons");
+var import_button7 = require("@kopexa/button");
+var import_icons10 = require("@kopexa/icons");
 var import_input3 = require("@kopexa/input");
 var import_menus2 = require("@tiptap/react/menus");
-var import_react27 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react31 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function LinkBubble({ editor }) {
-  const [isEditing, setIsEditing] = (0, import_react27.useState)(false);
-  const [url, setUrl] = (0, import_react27.useState)("");
-  const getCurrentUrl = (0, import_react27.useCallback)(() => {
+  const [isEditing, setIsEditing] = (0, import_react31.useState)(false);
+  const [url, setUrl] = (0, import_react31.useState)("");
+  const getCurrentUrl = (0, import_react31.useCallback)(() => {
     if (!editor) return "";
     const attrs = editor.getAttributes("link");
     return attrs.href || "";
   }, [editor]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
     if (isLinkActive2) {
       setUrl(getCurrentUrl());
       setIsEditing(false);
     }
   }, [editor, getCurrentUrl]);
-  const handleOpenLink = (0, import_react27.useCallback)(() => {
+  const handleOpenLink = (0, import_react31.useCallback)(() => {
     const href = getCurrentUrl();
     if (href) {
       window.open(href, "_blank", "noopener,noreferrer");
     }
   }, [getCurrentUrl]);
-  const handleRemoveLink = (0, import_react27.useCallback)(() => {
+  const handleRemoveLink = (0, import_react31.useCallback)(() => {
     editor == null ? void 0 : editor.chain().focus().unsetLink().run();
   }, [editor]);
-  const handleEdit = (0, import_react27.useCallback)(() => {
+  const handleEdit = (0, import_react31.useCallback)(() => {
     setUrl(getCurrentUrl());
     setIsEditing(true);
   }, [getCurrentUrl]);
-  const handleSave = (0, import_react27.useCallback)(() => {
+  const handleSave = (0, import_react31.useCallback)(() => {
     if (url) {
       editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     } else {
@@ -2630,7 +3202,7 @@ function LinkBubble({ editor }) {
     }
     setIsEditing(false);
   }, [editor, url]);
-  const handleKeyDown = (0, import_react27.useCallback)(
+  const handleKeyDown = (0, import_react31.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -2646,7 +3218,7 @@ function LinkBubble({ editor }) {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_menus2.BubbleMenu,
     {
       editor,
@@ -2659,8 +3231,8 @@ function LinkBubble({ editor }) {
         offset: 8
       },
       className: "rounded-lg border bg-background shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      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)(
           import_input3.Input,
           {
             type: "url",
@@ -2672,19 +3244,19 @@ function LinkBubble({ editor }) {
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_button6.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_button7.IconButton,
           {
             type: "button",
             size: "sm",
             variant: "ghost",
             onClick: handleSave,
             "aria-label": "Save link",
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.EditIcon, { className: "size-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons10.EditIcon, { className: "size-4" })
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "a",
           {
             href: getCurrentUrl(),
@@ -2698,38 +3270,38 @@ function LinkBubble({ editor }) {
             children: getCurrentUrl()
           }
         ),
-        /* @__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_button6.IconButton,
+        /* @__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,
             {
               type: "button",
               size: "sm",
               variant: "ghost",
               onClick: handleOpenLink,
               "aria-label": "Open link in new tab",
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.ExternalLinkIcon, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons10.ExternalLinkIcon, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_button6.IconButton,
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_button7.IconButton,
             {
               type: "button",
               size: "sm",
               variant: "ghost",
               onClick: handleEdit,
               "aria-label": "Edit link",
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.EditIcon, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons10.EditIcon, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_button6.IconButton,
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_button7.IconButton,
             {
               type: "button",
               size: "sm",
               variant: "ghost",
               onClick: handleRemoveLink,
               "aria-label": "Remove link",
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.TrashIcon, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons10.TrashIcon, { className: "size-4" })
             }
           )
         ] })
@@ -2739,30 +3311,30 @@ function LinkBubble({ editor }) {
 }
 
 // src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
-var import_button7 = require("@kopexa/button");
+var import_button8 = require("@kopexa/button");
 var import_editor_utils6 = require("@kopexa/editor-utils");
 var import_separator = require("@kopexa/separator");
-var import_theme3 = require("@kopexa/theme");
+var import_theme4 = require("@kopexa/theme");
 var React8 = __toESM(require("react"));
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
-var import_react29 = require("@floating-ui/react");
+var import_react33 = 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_react28 = require("@floating-ui/react");
+var import_react32 = 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_react28.useFloating)({
+  const { refs, update, context, floatingStyles } = (0, import_react32.useFloating)({
     open: show,
     ...floatingOptions
   });
-  const { isMounted, styles } = (0, import_react28.useTransitionStyles)(context);
-  const dismiss = (0, import_react28.useDismiss)(context, dismissOptions);
-  const { getReferenceProps, getFloatingProps } = (0, import_react28.useInteractions)([dismiss]);
+  const { isMounted, styles } = (0, import_react32.useTransitionStyles)(context);
+  const dismiss = (0, import_react32.useDismiss)(context, dismissOptions);
+  const { getReferenceProps, getFloatingProps } = (0, import_react32.useInteractions)([dismiss]);
   React4.useEffect(() => {
     update();
   }, [referencePos, update]);
@@ -2970,7 +3542,7 @@ function filterSuggestionItems(items, query) {
 }
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var SuggestionMenu = ({
   editor: providedEditor,
   floatingOptions,
@@ -2996,13 +3568,13 @@ var SuggestionMenu = ({
     {
       placement: "bottom-start",
       middleware: [
-        (0, import_react29.offset)(10),
-        (0, import_react29.flip)({
+        (0, import_react33.offset)(10),
+        (0, import_react33.flip)({
           mainAxis: true,
           crossAxis: false
         }),
-        (0, import_react29.shift)(),
-        (0, import_react29.size)({
+        (0, import_react33.shift)(),
+        (0, import_react33.size)({
           apply({ availableHeight, elements }) {
             if (elements.floating) {
               const maxHeightValue = maxHeight ? Math.min(maxHeight, availableHeight) : availableHeight;
@@ -3141,7 +3713,7 @@ var SuggestionMenu = ({
   if (!isMounted || !show || !editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       ref,
@@ -3163,14 +3735,14 @@ var SuggestionMenu = ({
 
 // src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
 var import_editor_utils5 = require("@kopexa/editor-utils");
-var import_icons11 = require("@kopexa/icons");
+var import_icons12 = 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_icons10 = require("@kopexa/icons");
-var import_react30 = require("@tiptap/react");
-var import_react31 = require("react");
+var import_icons11 = require("@kopexa/icons");
+var import_react34 = require("@tiptap/react");
+var import_react35 = 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"])) {
@@ -3201,7 +3773,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_react30.isNodeSelection)(editor.state.selection) || !canToggle) {
+    if ((0, import_react34.isNodeSelection)(editor.state.selection) || !canToggle) {
       return false;
     }
   }
@@ -3214,10 +3786,10 @@ function useTableBlock(config) {
     onToggled
   } = config || {};
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react31.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react35.useState)(true);
   const canToggleState = canToggle(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
@@ -3228,7 +3800,7 @@ function useTableBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react31.useCallback)(() => {
+  const handleToggle = (0, import_react35.useCallback)(() => {
     if (!editor) return false;
     const success = toggleTable(editor);
     if (success) {
@@ -3243,7 +3815,7 @@ function useTableBlock(config) {
     canToggle: canToggleState,
     label: "Table",
     // shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: import_icons10.TableIcon
+    Icon: import_icons11.TableIcon
   };
 }
 
@@ -3254,14 +3826,14 @@ var texts = {
     title: "Continue Writing",
     subtext: "Continue writing from the current position",
     keywords: ["continue", "write", "continue writing", "ai"],
-    badge: import_icons11.AiSparklesIcon,
+    badge: import_icons12.AiSparklesIcon,
     group: "AI"
   },
   ai_ask_button: {
     title: "Ask AI",
     subtext: "Ask AI to generate content",
     keywords: ["ai", "ask", "generate"],
-    badge: import_icons11.AiSparklesIcon,
+    badge: import_icons12.AiSparklesIcon,
     group: "AI"
   },
   // Style
@@ -3269,63 +3841,63 @@ var texts = {
     title: "Text",
     subtext: "Regular text paragraph",
     keywords: ["p", "paragraph", "text"],
-    badge: import_icons11.TypeIcon,
+    badge: import_icons12.TypeIcon,
     group: "Style"
   },
   heading_1: {
     title: "Heading 1",
     subtext: "Top-level heading",
     keywords: ["h", "heading1", "h1"],
-    badge: import_icons11.HeadingOneIcon,
+    badge: import_icons12.HeadingOneIcon,
     group: "Style"
   },
   heading_2: {
     title: "Heading 2",
     subtext: "Key section heading",
     keywords: ["h2", "heading2", "subheading"],
-    badge: import_icons11.HeadingTwoIcon,
+    badge: import_icons12.HeadingTwoIcon,
     group: "Style"
   },
   heading_3: {
     title: "Heading 3",
     subtext: "Subsection and group heading",
     keywords: ["h3", "heading3", "subheading"],
-    badge: import_icons11.HeadingThreeIcon,
+    badge: import_icons12.HeadingThreeIcon,
     group: "Style"
   },
   bullet_list: {
     title: "Bullet List",
     subtext: "List with unordered items",
     keywords: ["ul", "li", "list", "bulletlist", "bullet list"],
-    badge: import_icons11.ListIcon,
+    badge: import_icons12.ListIcon,
     group: "Style"
   },
   ordered_list: {
     title: "Numbered List",
     subtext: "List with ordered items",
     keywords: ["ol", "li", "list", "numberedlist", "numbered list"],
-    badge: import_icons11.ListOrderedIcon,
+    badge: import_icons12.ListOrderedIcon,
     group: "Style"
   },
   task_list: {
     title: "To-do list",
     subtext: "List with tasks",
     keywords: ["tasklist", "task list", "todo", "checklist"],
-    badge: import_icons11.ListTodoIcon,
+    badge: import_icons12.ListTodoIcon,
     group: "Style"
   },
   quote: {
     title: "Blockquote",
     subtext: "Blockquote block",
     keywords: ["quote", "blockquote"],
-    badge: import_icons11.BlockquoteIcon,
+    badge: import_icons12.BlockquoteIcon,
     group: "Style"
   },
   code_block: {
     title: "Code Block",
     subtext: "Code block with syntax highlighting",
     keywords: ["code", "pre"],
-    badge: import_icons11.CodeBlockIcon,
+    badge: import_icons12.CodeBlockIcon,
     group: "Style"
   },
   // Insert
@@ -3347,49 +3919,49 @@ var texts = {
     title: "Control",
     subtext: "Insert a control block",
     keywords: ["control"],
-    badge: import_icons11.ControlsIcon,
+    badge: import_icons12.ControlsIcon,
     group: "Insert"
   },
   divider: {
     title: "Separator",
     subtext: "Horizontal line to separate content",
     keywords: ["hr", "horizontalRule", "line", "separator"],
-    badge: import_icons11.MinusIcon,
+    badge: import_icons12.MinusIcon,
     group: "Insert"
   },
   table: {
     title: "Table",
     subtext: "Insert a table",
     keywords: ["table", "grid", "spreadsheet"],
-    badge: import_icons11.TableIcon,
+    badge: import_icons12.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_icons11.TableOfContentsIcon,
+    badge: import_icons12.TableOfContentsIcon,
     group: "Insert"
   },
   callout: {
     title: "Callout",
     subtext: "Highlighted block for important information",
     keywords: ["callout", "info", "warning", "alert", "note", "tip"],
-    badge: import_icons11.InfoIcon,
+    badge: import_icons12.InfoIcon,
     group: "Insert"
   },
   callout_warning: {
     title: "Warning",
     subtext: "Warning callout block",
     keywords: ["warning", "caution", "attention"],
-    badge: import_icons11.AlertIcon,
+    badge: import_icons12.AlertIcon,
     group: "Insert"
   },
   math: {
     title: "Formula",
     subtext: "LaTeX math formula block",
     keywords: ["math", "latex", "formula", "equation", "katex"],
-    badge: import_icons11.TypeIcon,
+    badge: import_icons12.TypeIcon,
     group: "Insert"
   },
   // Upload
@@ -3405,7 +3977,7 @@ var texts = {
       "media",
       "url"
     ],
-    badge: import_icons11.ImageIcon,
+    badge: import_icons12.ImageIcon,
     group: "Upload"
   }
 };
@@ -3569,9 +4141,7 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
     image: {
       check: (editor) => (0, import_editor_utils5.isNodeInSchema)("image", editor),
       action: ({ editor }) => {
-        editor.chain().focus().insertContent({
-          type: "imageUpload"
-        }).run();
+        editor.chain().focus().setImage({ src: "" }).run();
       }
     }
   };
@@ -3632,11 +4202,11 @@ function useSlashDropdownMenu(config) {
 }
 
 // src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var SlashDropdownMenu = (props) => {
   const { config, ...restProps } = props;
   const { getSlashMenuItems } = useSlashDropdownMenu(config);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     SuggestionMenu,
     {
       char: "/",
@@ -3646,7 +4216,7 @@ var SlashDropdownMenu = (props) => {
       selector: "tiptap-slash-dropdown-menu",
       items: ({ query, editor }) => filterSuggestionItems(getSlashMenuItems(editor), query),
       ...restProps,
-      children: (props2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(List, { ...props2, config })
+      children: (props2) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(List, { ...props2, config })
     }
   );
 };
@@ -3666,13 +4236,13 @@ var Item = (props) => {
     }
   }, [isSelected]);
   const BadgeIcon = item.badge;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_button7.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_button8.Button,
     {
       ref: itemRef,
       variant: "ghost",
       color: "default",
-      startContent: BadgeIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BadgeIcon, {}),
+      startContent: BadgeIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BadgeIcon, {}),
       "data-active-state": isSelected ? "on" : "off",
       onClick: onSelect,
       fullWidth: true,
@@ -3687,14 +4257,14 @@ var List = ({
   onSelect,
   config
 }) => {
-  const styles = (0, import_theme3.slashDropdownMenu)();
+  const styles = (0, import_theme4.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_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             Item,
             {
               item,
@@ -3719,7 +4289,7 @@ var List = ({
     Object.entries(groups).forEach(([groupLabel, groupData], groupIndex) => {
       if (groupIndex > 0) {
         rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             import_separator.Separator,
             {
               orientation: "horizontal"
@@ -3730,7 +4300,7 @@ var List = ({
       }
       const groupItems = groupData.items.map((item, itemIndex) => {
         const originalIndex = groupData.indices[itemIndex];
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Item,
           {
             item,
@@ -3742,13 +4312,13 @@ var List = ({
       });
       if (groupLabel) {
         rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
             "div",
             {
               className: styles.cardItemGroup(),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: styles.cardGroupLabel(), children: groupLabel }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: styles.cardGroup(), children: groupItems })
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.cardGroupLabel(), children: groupLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.cardGroup(), children: groupItems })
               ]
             },
             `group-${groupIndex}-${groupLabel}`
@@ -3763,24 +4333,24 @@ var List = ({
   if (!renderedItems.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       className: styles.card(),
       style: {
         maxHeight: "var(--suggestion-menu-max-height)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: styles.body(), children: renderedItems })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.body(), children: renderedItems })
     }
   );
 };
 
 // src/presets/basic/editor-header.tsx
-var import_icons23 = require("@kopexa/icons");
+var import_icons24 = 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_react46 = require("react");
+var import_react50 = require("react");
 
 // src/hooks/use-cursor-visibility.ts
 var React10 = __toESM(require("react"));
@@ -3890,7 +4460,7 @@ var React12 = __toESM(require("react"));
 
 // src/ui/blockquote-button/use-blockquote.ts
 var import_editor_utils7 = require("@kopexa/editor-utils");
-var import_icons12 = require("@kopexa/icons");
+var import_icons13 = require("@kopexa/icons");
 var import_state6 = require("@tiptap/pm/state");
 var React11 = __toESM(require("react"));
 var BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
@@ -3998,12 +4568,12 @@ function useBlockquote(config) {
     canToggle: canToggle3,
     label: "Blockquote",
     shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
-    Icon: import_icons12.BlockquoteIcon
+    Icon: import_icons13.BlockquoteIcon
   };
 }
 
 // src/ui/blockquote-button/blockquote-button.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var BlockquoteButton = ({
   editor: providedEditor,
   text,
@@ -4039,7 +4609,7 @@ var BlockquoteButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_toolbar4.ToolbarButton,
     {
       type: "button",
@@ -4056,22 +4626,22 @@ var BlockquoteButton = ({
       onClick: handleClick,
       isIconOnly: !text && !children,
       ...buttonProps,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: text })
+      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 })
       ] })
     }
   );
 };
 
 // src/ui/codeblock-button/code-block-button.tsx
-var import_icons14 = require("@kopexa/icons");
+var import_icons15 = require("@kopexa/icons");
 var import_toolbar5 = require("@kopexa/toolbar");
-var import_react32 = require("react");
+var import_react36 = require("react");
 
 // src/ui/codeblock-button/use-code-block.ts
 var import_editor_utils8 = require("@kopexa/editor-utils");
-var import_icons13 = require("@kopexa/icons");
+var import_icons14 = require("@kopexa/icons");
 var import_state7 = require("@tiptap/pm/state");
 var React13 = __toESM(require("react"));
 var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
@@ -4179,12 +4749,12 @@ function useCodeBlock(config) {
     canToggle: canToggleState,
     label: "Code Block",
     shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: import_icons13.CodeblockIcon
+    Icon: import_icons14.CodeblockIcon
   };
 }
 
 // src/ui/codeblock-button/code-block-button.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var CodeBlockButton = ({
   editor: providedEditor,
   text,
@@ -4201,7 +4771,7 @@ var CodeBlockButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react32.useCallback)(
+  const handleClick = (0, import_react36.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4212,7 +4782,7 @@ var CodeBlockButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_toolbar5.ToolbarButton,
     {
       type: "button",
@@ -4229,26 +4799,26 @@ var CodeBlockButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons14.CodeblockIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons15.CodeblockIcon, {})
     }
   );
 };
 
 // src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_button8 = require("@kopexa/button");
-var import_icons16 = require("@kopexa/icons");
+var import_button9 = require("@kopexa/button");
+var import_icons17 = require("@kopexa/icons");
 var import_popover2 = require("@kopexa/popover");
 var import_toolbar7 = require("@kopexa/toolbar");
-var import_react34 = require("react");
+var import_react38 = require("react");
 
 // src/ui/color-highlight-button/color-highlight-button.tsx
-var import_theme4 = require("@kopexa/theme");
+var import_theme5 = require("@kopexa/theme");
 var import_toolbar6 = require("@kopexa/toolbar");
-var import_react33 = require("react");
+var import_react37 = require("react");
 
 // src/ui/color-highlight-button/use-color-highlight.ts
 var import_editor_utils9 = require("@kopexa/editor-utils");
-var import_icons15 = require("@kopexa/icons");
+var import_icons16 = 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");
@@ -4405,12 +4975,12 @@ function useColorHighlight(config) {
     canColorHighlight: canColorHighlightState,
     label: label || `Highlight`,
     shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    Icon: import_icons15.HighlighterIcon
+    Icon: import_icons16.HighlighterIcon
   };
 }
 
 // src/ui/color-highlight-button/color-highlight-button.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ColorHighlightButton = ({
   editor: providedEditor,
   highlightColor,
@@ -4439,7 +5009,7 @@ var ColorHighlightButton = ({
     hideWhenUnavailable,
     onApplied
   });
-  const handleClick = (0, import_react33.useCallback)(
+  const handleClick = (0, import_react37.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4447,7 +5017,7 @@ var ColorHighlightButton = ({
     },
     [handleColorHighlight, onClick]
   );
-  const buttonStyle = (0, import_react33.useMemo)(
+  const buttonStyle = (0, import_react37.useMemo)(
     () => ({
       ...style,
       "--highlight-color": highlightColor
@@ -4457,8 +5027,8 @@ var ColorHighlightButton = ({
   if (!isVisible) {
     return null;
   }
-  const styles = (0, import_theme4.colorHighlightButton)();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  const styles = (0, import_theme5.colorHighlightButton)();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     import_toolbar6.ToolbarButton,
     {
       type: "button",
@@ -4477,15 +5047,15 @@ var ColorHighlightButton = ({
       isIconOnly: true,
       ...buttonProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "span",
           {
             "data-active-state": isActive ? "on" : "off",
             className: styles.mark()
           }
         ),
-        children || /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        children || /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "span",
             {
               style: { "--highlight-color": highlightColor }
@@ -4499,13 +5069,13 @@ var ColorHighlightButton = ({
 };
 
 // src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ColorHighlightPopoverButton = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-  import_button8.IconButton,
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  import_button9.IconButton,
   {
     type: "button",
     className,
@@ -4516,7 +5086,7 @@ var ColorHighlightPopoverButton = ({
     tooltip: "Highlight",
     isIconOnly: !children,
     ...props,
-    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons16.HighlighterIcon, {})
+    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons17.HighlighterIcon, {})
   }
 );
 function ColorHighlightPopoverContent({
@@ -4530,8 +5100,8 @@ function ColorHighlightPopoverContent({
   ])
 }) {
   const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = (0, import_react34.useRef)(null);
-  const menuItems = (0, import_react34.useMemo)(
+  const containerRef = (0, import_react38.useRef)(null);
+  const menuItems = (0, import_react38.useMemo)(
     () => [...colors, { label: "Remove highlight", value: "none" }],
     [colors]
   );
@@ -4549,13 +5119,13 @@ function ColorHighlightPopoverContent({
     },
     autoSelectFirstItem: false
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         className: "flex items-center gap-1 outline-none",
         "data-orientation": "horizontal",
-        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           ColorHighlightButton,
           {
             editor,
@@ -4568,9 +5138,9 @@ function ColorHighlightPopoverContent({
         ))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_toolbar7.ToolbarSeparator, { orientation: "vertical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_button8.IconButton,
+    /* @__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,
       {
         onClick: handleRemoveHighlight,
         "aria-label": "Remove highlight",
@@ -4580,7 +5150,7 @@ function ColorHighlightPopoverContent({
         variant: "ghost",
         color: "default",
         "data-highlighted": selectedIndex === colors.length,
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons16.BanIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons17.BanIcon, {})
       }
     ) })
   ] });
@@ -4599,18 +5169,18 @@ function ColorHighlightPopover({
   ...props
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react38.useState)(false);
   const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
     editor,
     hideWhenUnavailable,
     onApplied
   });
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_popover2.Popover.Trigger,
       {
-        render: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        render: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           ColorHighlightPopoverButton,
           {
             disabled: !canColorHighlight2,
@@ -4624,26 +5194,26 @@ function ColorHighlightPopover({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
   ] });
 }
 
 // src/ui/heading-dropdown-menu/index.tsx
-var import_button10 = require("@kopexa/button");
+var import_button11 = require("@kopexa/button");
 var import_dropdown_menu = require("@kopexa/dropdown-menu");
 var import_editor_utils11 = require("@kopexa/editor-utils");
-var import_icons18 = require("@kopexa/icons");
-var import_react36 = require("@tiptap/react");
+var import_icons19 = require("@kopexa/icons");
+var import_react40 = require("@tiptap/react");
 var React16 = __toESM(require("react"));
 
 // src/ui/heading-button/index.tsx
-var import_button9 = require("@kopexa/button");
+var import_button10 = require("@kopexa/button");
 var import_editor_utils10 = require("@kopexa/editor-utils");
-var import_icons17 = require("@kopexa/icons");
+var import_icons18 = require("@kopexa/icons");
 var React15 = __toESM(require("react"));
 
 // src/ui/heading-button/utils.ts
-var import_react35 = require("@tiptap/react");
+var import_react39 = require("@tiptap/react");
 var headingShortcutKeys = {
   1: "Ctrl-Alt-1",
   2: "Ctrl-Alt-2",
@@ -4684,7 +5254,7 @@ function shouldShowHeadingButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react35.isNodeSelection)(editor.state.selection)) {
+    if ((0, import_react39.isNodeSelection)(editor.state.selection)) {
       return false;
     }
   }
@@ -4695,14 +5265,14 @@ function getFormattedHeadingName(level) {
 }
 
 // src/ui/heading-button/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var headingIcons = {
-  1: import_icons17.HeadingOneIcon,
-  2: import_icons17.HeadingTwoIcon,
-  3: import_icons17.HeadingThreeIcon,
-  4: import_icons17.HeadingFourIcon,
-  5: import_icons17.HeadingFiveIcon,
-  6: import_icons17.HeadingSixIcon
+  1: import_icons18.HeadingOneIcon,
+  2: import_icons18.HeadingTwoIcon,
+  3: import_icons18.HeadingThreeIcon,
+  4: import_icons18.HeadingFourIcon,
+  5: import_icons18.HeadingFiveIcon,
+  6: import_icons18.HeadingSixIcon
 };
 function useHeadingState(editor, level, disabled = false) {
   const headingInSchema = (0, import_editor_utils10.isNodeInSchema)("heading", editor);
@@ -4761,8 +5331,8 @@ var HeadingButton = ({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_button9.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_button10.Button,
     {
       type: "button",
       className: className.trim(),
@@ -4777,7 +5347,7 @@ var HeadingButton = ({
       tooltip: formattedName,
       shortcutKeys: shortcutKey,
       onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, {}),
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, {}),
       ...buttonProps,
       ref,
       children: children || text
@@ -4786,7 +5356,7 @@ var HeadingButton = ({
 };
 
 // src/ui/heading-dropdown-menu/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function HeadingDropdownMenu({
   editor: providedEditor,
   levels = [1, 2, 3, 4, 5, 6],
@@ -4806,13 +5376,13 @@ function HeadingDropdownMenu({
     [onOpenChange]
   );
   const getActiveIcon = React16.useCallback(() => {
-    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons18.HeadingIcon, {});
+    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons19.HeadingIcon, {});
     const activeLevel = levels.find(
       (level) => editor.isActive("heading", { level })
     );
-    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons18.HeadingIcon, {});
+    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons19.HeadingIcon, {});
     const ActiveIcon = headingIcons[activeLevel];
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ActiveIcon, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ActiveIcon, {});
   }, [editor, levels]);
   const canToggleAnyHeading = React16.useCallback(() => {
     if (!editor) return false;
@@ -4827,7 +5397,7 @@ function HeadingDropdownMenu({
       return false;
     }
     if (hideWhenUnavailable) {
-      if ((0, import_react36.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
+      if ((0, import_react40.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
         return false;
       }
     }
@@ -4836,9 +5406,9 @@ function HeadingDropdownMenu({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_button10.Button,
+  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,
       {
         type: "button",
         disabled: isDisabled,
@@ -4850,12 +5420,12 @@ function HeadingDropdownMenu({
         "aria-label": "Format text as heading",
         "aria-pressed": isAnyHeadingActive,
         tooltip: "Heading",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons18.ChevronDownIcon, {}),
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons19.ChevronDownIcon, {}),
         ...props,
         children: getActiveIcon()
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__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)(
       HeadingButton,
       {
         editor,
@@ -4870,35 +5440,35 @@ function HeadingDropdownMenu({
 }
 
 // src/ui/list-dropdown-menu/index.tsx
-var import_button12 = require("@kopexa/button");
+var import_button13 = require("@kopexa/button");
 var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
 var import_editor_utils13 = require("@kopexa/editor-utils");
-var import_icons20 = require("@kopexa/icons");
-var import_react39 = require("@tiptap/react");
-var import_react40 = require("react");
+var import_icons21 = require("@kopexa/icons");
+var import_react43 = require("@tiptap/react");
+var import_react44 = require("react");
 
 // src/ui/list-button/index.tsx
-var import_button11 = require("@kopexa/button");
+var import_button12 = require("@kopexa/button");
 var import_editor_utils12 = require("@kopexa/editor-utils");
-var import_icons19 = require("@kopexa/icons");
-var import_react37 = require("@tiptap/react");
-var import_react38 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+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 listOptions = [
   {
     label: "Bullet List",
     type: "bulletList",
-    icon: import_icons19.ListIcon
+    icon: import_icons20.ListIcon
   },
   {
     label: "Ordered List",
     type: "orderedList",
-    icon: import_icons19.ListOrderedIcon
+    icon: import_icons20.ListOrderedIcon
   },
   {
     label: "Task List",
     type: "taskList",
-    icon: import_icons19.ListTodoIcon
+    icon: import_icons20.ListTodoIcon
   }
 ];
 var listShortcutKeys = {
@@ -4957,7 +5527,7 @@ function shouldShowListButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react37.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
+    if ((0, import_react41.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
       return false;
     }
   }
@@ -4991,8 +5561,8 @@ var ListButton = ({
     editor,
     type
   );
-  const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons19.ListIcon;
-  const handleClick = (0, import_react38.useCallback)(
+  const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons20.ListIcon;
+  const handleClick = (0, import_react42.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && editor) {
@@ -5001,7 +5571,7 @@ var ListButton = ({
     },
     [onClick, editor, type]
   );
-  const show = (0, import_react38.useMemo)(() => {
+  const show = (0, import_react42.useMemo)(() => {
     return shouldShowListButton({
       editor,
       type,
@@ -5012,8 +5582,8 @@ var ListButton = ({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_button11.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_button12.Button,
     {
       type: "button",
       className: className.trim(),
@@ -5026,7 +5596,7 @@ var ListButton = ({
       tooltip: (listOption == null ? void 0 : listOption.label) || type,
       shortcutKeys: shortcutKey,
       onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, {}),
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, {}),
       ...buttonProps,
       ref,
       children: children || text
@@ -5035,7 +5605,7 @@ var ListButton = ({
 };
 
 // src/ui/list-dropdown-menu/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function canToggleAnyList(editor, listTypes) {
   if (!editor) return false;
   return listTypes.some((type) => canToggleList(editor, type));
@@ -5055,24 +5625,24 @@ function shouldShowListDropdown(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react39.isNodeSelection)(editor.state.selection) || !canToggleAny) {
+    if ((0, import_react43.isNodeSelection)(editor.state.selection) || !canToggleAny) {
       return false;
     }
   }
   return true;
 }
 function useListDropdownState(editor, availableTypes) {
-  const [isOpen, setIsOpen] = (0, import_react40.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react44.useState)(false);
   const listInSchema = availableTypes.some(
     (type) => (0, import_editor_utils13.isNodeInSchema)(type, editor)
   );
-  const filteredLists = (0, import_react40.useMemo)(
+  const filteredLists = (0, import_react44.useMemo)(
     () => getFilteredListOptions(availableTypes),
     [availableTypes]
   );
   const canToggleAny = canToggleAnyList(editor, availableTypes);
   const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = (0, import_react40.useCallback)(
+  const handleOpenChange = (0, import_react44.useCallback)(
     (open, callback) => {
       setIsOpen(open);
       callback == null ? void 0 : callback(open);
@@ -5090,11 +5660,11 @@ function useListDropdownState(editor, availableTypes) {
   };
 }
 function useActiveListIcon(editor, filteredLists) {
-  return (0, import_react40.useCallback)(() => {
+  return (0, import_react44.useCallback)(() => {
     const activeOption = filteredLists.find(
       (option) => isListActive(editor, option.type)
     );
-    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons20.ListIcon, {});
+    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons21.ListIcon, {});
   }, [editor, filteredLists]);
 }
 function ListDropdownMenu({
@@ -5114,7 +5684,7 @@ function ListDropdownMenu({
     handleOpenChange
   } = useListDropdownState(editor, types);
   const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = (0, import_react40.useMemo)(() => {
+  const show = (0, import_react44.useMemo)(() => {
     return shouldShowListDropdown({
       editor,
       listTypes: types,
@@ -5123,16 +5693,16 @@ function ListDropdownMenu({
       canToggleAny
     });
   }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = (0, import_react40.useCallback)(
+  const handleOnOpenChange = (0, import_react44.useCallback)(
     (open) => handleOpenChange(open, onOpenChange),
     [handleOpenChange, onOpenChange]
   );
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_button12.Button,
+  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,
       {
         type: "button",
         variant: "ghost",
@@ -5141,12 +5711,12 @@ function ListDropdownMenu({
         tabIndex: -1,
         "aria-label": "List options",
         tooltip: "List",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons20.ChevronDownIcon, {}),
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons21.ChevronDownIcon, {}),
         ...props,
         children: getActiveIcon()
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_dropdown_menu2.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    /* @__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)(
       ListButton,
       {
         editor,
@@ -5163,8 +5733,8 @@ function ListDropdownMenu({
 
 // src/ui/table-button/index.tsx
 var import_toolbar8 = require("@kopexa/toolbar");
-var import_react41 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react45 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var TableButton = ({
   editor: providedEditor,
   text,
@@ -5188,7 +5758,7 @@ var TableButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react41.useCallback)(
+  const handleClick = (0, import_react45.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -5199,7 +5769,7 @@ var TableButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_toolbar8.ToolbarButton,
     {
       type: "button",
@@ -5215,22 +5785,22 @@ var TableButton = ({
       onClick: handleClick,
       isIconOnly: !text && !children,
       ...buttonProps,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: text })
+      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 })
       ] })
     }
   );
 };
 
 // src/ui/text-align-button/text-align-button.tsx
-var import_button13 = require("@kopexa/button");
-var import_react43 = require("react");
+var import_button14 = require("@kopexa/button");
+var import_react47 = require("react");
 
 // src/ui/text-align-button/use-text-align.ts
 var import_editor_utils14 = require("@kopexa/editor-utils");
-var import_icons21 = require("@kopexa/icons");
-var import_react42 = require("react");
+var import_icons22 = require("@kopexa/icons");
+var import_react46 = require("react");
 var TEXT_ALIGN_SHORTCUT_KEYS = {
   left: "mod+shift+l",
   center: "mod+shift+e",
@@ -5238,10 +5808,10 @@ var TEXT_ALIGN_SHORTCUT_KEYS = {
   justify: "mod+shift+j"
 };
 var textAlignIcons = {
-  left: import_icons21.AlignLeftIcon,
-  center: import_icons21.AlignCenterIcon,
-  right: import_icons21.AlignRightIcon,
-  justify: import_icons21.AlignJustifyIcon
+  left: import_icons22.AlignLeftIcon,
+  center: import_icons22.AlignCenterIcon,
+  right: import_icons22.AlignRightIcon,
+  justify: import_icons22.AlignJustifyIcon
 };
 var textAlignLabels = {
   left: "Align left",
@@ -5288,10 +5858,10 @@ function useTextAlign(config) {
     onAligned
   } = config;
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react42.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react46.useState)(true);
   const canAlign = canSetTextAlign(editor, align);
   const isActive = isTextAlignActive(editor, align);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton5({ editor, align, hideWhenUnavailable }));
@@ -5302,7 +5872,7 @@ function useTextAlign(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable, align]);
-  const handleTextAlign = (0, import_react42.useCallback)(() => {
+  const handleTextAlign = (0, import_react46.useCallback)(() => {
     if (!editor) return false;
     const success = setTextAlign(editor, align);
     if (success) {
@@ -5322,7 +5892,7 @@ function useTextAlign(config) {
 }
 
 // src/ui/text-align-button/text-align-button.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var TextAlignButton = ({
   editor: providedEditor,
   align,
@@ -5349,7 +5919,7 @@ var TextAlignButton = ({
     hideWhenUnavailable,
     onAligned
   });
-  const handleClick = (0, import_react43.useCallback)(
+  const handleClick = (0, import_react47.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (e.defaultPrevented) return;
@@ -5360,8 +5930,8 @@ var TextAlignButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_button13.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_button14.IconButton,
     {
       type: "button",
       disabled: canAlign,
@@ -5376,19 +5946,19 @@ var TextAlignButton = ({
       shortcutKeys,
       onClick: handleClick,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, {})
     }
   );
 };
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
 var import_toolbar9 = require("@kopexa/toolbar");
-var import_react45 = require("react");
+var import_react49 = require("react");
 
 // src/ui/undo-redo-button/use-undo-redo.ts
 var import_editor_utils15 = require("@kopexa/editor-utils");
-var import_icons22 = require("@kopexa/icons");
-var import_react44 = require("react");
+var import_icons23 = require("@kopexa/icons");
+var import_react48 = require("react");
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
   redo: "mod+shift+z"
@@ -5398,8 +5968,8 @@ var historyActionLabels = {
   redo: "Redo"
 };
 var historyIcons = {
-  undo: import_icons22.UndoIcon,
-  redo: import_icons22.RedoIcon
+  undo: import_icons23.UndoIcon,
+  redo: import_icons23.RedoIcon
 };
 function canExecuteUndoRedoAction(editor, action) {
   if (!editor || !editor.isEditable) return false;
@@ -5428,9 +5998,9 @@ function useUndoRedo(config) {
     onExecuted
   } = config;
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react44.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react48.useState)(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (!editor) return;
     const handleUpdate = () => {
       setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable, action }));
@@ -5441,7 +6011,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = (0, import_react44.useCallback)(() => {
+  const handleAction = (0, import_react48.useCallback)(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -5460,7 +6030,7 @@ function useUndoRedo(config) {
 }
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var UndoRedoButton = ({
   editor: providedEditor,
   action,
@@ -5479,7 +6049,7 @@ var UndoRedoButton = ({
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = (0, import_react45.useCallback)(
+  const handleClick = (0, import_react49.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -5490,7 +6060,7 @@ var UndoRedoButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_toolbar9.ToolbarButton,
     {
       type: "button",
@@ -5505,13 +6075,13 @@ var UndoRedoButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, {})
     }
   );
 };
 
 // src/presets/basic/editor-header.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var EditorHeader = ({
   editor: providedEditor,
   variant
@@ -5521,7 +6091,7 @@ var EditorHeader = ({
   const isMobile = (0, import_use_is_mobile2.useIsMobile)();
   const windowSize = useWindowSize();
   const { styles } = useEditorUIContext();
-  const toolbarRef = (0, import_react46.useRef)(null);
+  const toolbarRef = (0, import_react50.useRef)(null);
   const bodyRect = useCursorVisibility({
     editor,
     overlayHeight: (_b = (_a = toolbarRef.current) == null ? void 0 : _a.getBoundingClientRect().height) != null ? _b : 0
@@ -5530,7 +6100,7 @@ var EditorHeader = ({
     return null;
   }
   const ToolbarContent = variant === "comment" ? CommentToolbarContent : variant === "field" ? FieldToolbarContent : MainToolbarContent;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_toolbar10.Toolbar,
     {
       sticky: true,
@@ -5540,54 +6110,54 @@ var EditorHeader = ({
         bottom: `calc(100% - ${windowSize.height - bodyRect.y}px)`
       } : {},
       className: styles.toolbar(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToolbarContent, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToolbarContent, {})
     }
   ) });
 };
-var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UndoRedoButton, { action: "undo" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UndoRedoButton, { action: "redo" })
+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" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BlockquoteButton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime24.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)(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_runtime24.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "code" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "underline" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorHighlightPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LinkPopover, {})
+  /* @__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_runtime24.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TableButton, {}) }),
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MoreOptions, { hideWhenUnavailable: true })
+  /* @__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 })
 ] });
-var CommentToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "code" })
+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" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LinkPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
+  /* @__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"] })
   ] })
 ] });
-var FieldToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "bold" }),
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "italic" }),
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "strike" }),
-  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LinkPopover, {})
+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, {})
 ] });
 function MoreOptions({
   editor: providedEditor,
@@ -5595,8 +6165,8 @@ function MoreOptions({
   ...props
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [show, setShow] = (0, import_react46.useState)(false);
-  (0, import_react46.useEffect)(() => {
+  const [show, setShow] = (0, import_react50.useState)(false);
+  (0, import_react50.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setShow(
@@ -5615,13 +6185,13 @@ function MoreOptions({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_toolbar10.ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_popover3.Popover.Root, { spacing: "dense", width: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  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)(
         import_popover3.Popover.Trigger,
         {
-          render: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          render: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             import_toolbar10.ToolbarButton,
             {
               type: "button",
@@ -5633,29 +6203,29 @@ function MoreOptions({
               title: "More options",
               isIconOnly: true,
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons23.MoreVerticalIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons24.MoreVerticalIcon, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         import_popover3.Popover.Content,
         {
           side: "top",
           align: "end",
           alignOffset: 4,
           sideOffset: 4,
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_toolbar10.Toolbar, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "superscript" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarkButton, { type: "subscript" })
+          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" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_toolbar10.ToolbarSeparator, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TextAlignButton, { align: "left" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TextAlignButton, { align: "center" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TextAlignButton, { align: "right" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TextAlignButton, { align: "justify" })
+            /* @__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" })
             ] })
           ] })
         }
@@ -5687,7 +6257,7 @@ function shouldShowMoreOptions(params) {
 }
 
 // src/presets/basic/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var BasicEditor = ({
   variant,
   bordered,
@@ -5695,28 +6265,28 @@ var BasicEditor = ({
   ...options
 }) => {
   const editor = useCreateEditor({ content, ...options });
-  const styles = (0, import_theme5.editorBasic)({ variant, bordered });
+  const styles = (0, import_theme6.editorBasic)({ variant, bordered });
   if (!editor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LoadingSpinner, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LoadingSpinner, {});
   }
   const isBottomToolbar = variant === "field";
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react47.EditorContext.Provider, { value: { editor }, children: [
-    !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(EditorHeader, { editor, variant }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(EditorContentArea, { variant }),
-    isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(EditorHeader, { editor, variant })
+  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 })
   ] }) }) });
 };
 var EditorContentArea = ({ variant }) => {
-  const styles = (0, import_theme5.editorBasic)({ variant });
-  const { editor } = (0, import_react48.useContext)(import_react47.EditorContext);
+  const styles = (0, import_theme6.editorBasic)({ variant });
+  const { editor } = (0, import_react52.useContext)(import_react51.EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: styles.wrapper(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      import_react47.EditorContent,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: styles.wrapper(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_react51.EditorContent,
       {
         editor,
         role: "presentation",
@@ -5724,17 +6294,17 @@ var EditorContentArea = ({ variant }) => {
         style: {
           cursor: isDragging ? "grabbing" : "auto"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SlashDropdownMenu, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SlashDropdownMenu, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BubbleMenu, { editor }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LinkBubble, { editor })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BubbleMenu, { editor }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkBubble, { editor })
   ] });
 };
 function LoadingSpinner({ text = "Connecting..." }) {
-  const styles = (0, import_theme5.editorSpinner)();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: styles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: styles.content(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  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)(
       "svg",
       {
         className: styles.svg(),
@@ -5742,9 +6312,9 @@ function LoadingSpinner({ text = "Connecting..." }) {
         fill: "none",
         viewBox: "0 0 24 24",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("title", { children: "Loading Spinner" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__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)(
             "path",
             {
               className: styles.path(),
@@ -5754,7 +6324,7 @@ function LoadingSpinner({ text = "Connecting..." }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: styles.text(), children: text })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: styles.text(), children: text })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node: