@kopexa/tiptap 17.6.18 → 17.7.0

package/dist/index.js

@@ -32,6 +32,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CalloutNode: () => CalloutNode,
+  CollaborationProvider: () => CollaborationProvider,
   Editor: () => BasicEditor,
   EditorFileProvider: () => EditorFileProvider,
   ImageNode: () => ImageNode,
@@ -45,21 +46,296 @@ __export(index_exports, {
   VariableSuggestion: () => VariableSuggestion,
   convertFileToBase64: () => convertFileToBase64,
   extractVariablesFromContent: () => extractVariablesFromContent,
+  generateColorFromId: () => generateColorFromId,
   getExtensions: () => getExtensions,
   handleImageUpload: () => handleImageUpload,
   isAllowedUri: () => isAllowedUri,
   sanitizeUrl: () => sanitizeUrl,
+  useCollaboration: () => useCollaboration,
+  useCollaborationRequired: () => useCollaborationRequired,
+  useDocumentVisibility: () => useDocumentVisibility,
   useEditorFile: () => useEditorFile,
   useEditorFileRequired: () => useEditorFileRequired,
+  useIdle: () => useIdle,
   useVariables: () => useVariables,
   useVariablesWithFallback: () => useVariablesWithFallback
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/context/editor-file-context.tsx
+// src/context/collaboration-context.tsx
+var import_provider = require("@hocuspocus/provider");
+var import_react3 = require("react");
+var import_y_indexeddb = require("y-indexeddb");
+var Y = __toESM(require("yjs"));
+
+// src/hooks/use-document-visibility.ts
 var import_react = require("react");
+function subscribe(callback) {
+  document.addEventListener("visibilitychange", callback);
+  return () => document.removeEventListener("visibilitychange", callback);
+}
+function getSnapshot() {
+  return document.visibilityState;
+}
+function getServerSnapshot() {
+  return "hidden";
+}
+function useDocumentVisibility() {
+  return (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/hooks/use-idle.ts
+var import_react2 = require("react");
+var EVENTS = [
+  "keypress",
+  "mousemove",
+  "touchmove",
+  "click",
+  "scroll"
+];
+function useIdle(timeout, options = {}) {
+  const { initialState = false } = options;
+  const [isIdle, setIsIdle] = (0, import_react2.useState)(initialState);
+  const timerRef = (0, import_react2.useRef)(null);
+  const resetIdle = (0, import_react2.useCallback)(() => {
+    setIsIdle(false);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => setIsIdle(true), timeout);
+  }, [timeout]);
+  (0, import_react2.useEffect)(() => {
+    timerRef.current = setTimeout(() => setIsIdle(true), timeout);
+    const handler = () => resetIdle();
+    for (const event of EVENTS) {
+      document.addEventListener(event, handler, { passive: true });
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+      for (const event of EVENTS) {
+        document.removeEventListener(event, handler);
+      }
+    };
+  }, [timeout, resetIdle]);
+  return { isIdle, resetIdle };
+}
+
+// src/utils/collab-color.ts
+function hslToHex(h, s, l) {
+  const sNorm = s / 100;
+  const lNorm = l / 100;
+  const a = sNorm * Math.min(lNorm, 1 - lNorm);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = lNorm - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+function generateColorFromId(id) {
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = id.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const hue = Math.abs(hash) % 360;
+  return hslToHex(hue, 65, 55);
+}
+
+// src/context/collaboration-context.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var EditorFileContext = (0, import_react.createContext)(null);
+var CollaborationContext = (0, import_react3.createContext)(null);
+var IDLE_TIMEOUT = 5e3;
+function mapStatus(ws) {
+  switch (ws) {
+    case import_provider.WebSocketStatus.Connected:
+      return "connected";
+    case import_provider.WebSocketStatus.Connecting:
+      return "connecting";
+    default:
+      return "disconnected";
+  }
+}
+function CollaborationProvider({
+  documentId,
+  url,
+  getToken,
+  user,
+  enableLocalPersistence = true,
+  children
+}) {
+  const resolvedUser = (0, import_react3.useMemo)(
+    () => {
+      var _a;
+      return {
+        id: user.id,
+        name: user.name,
+        color: (_a = user.color) != null ? _a : generateColorFromId(user.id),
+        avatar: user.avatar
+      };
+    },
+    [user.id, user.name, user.color, user.avatar]
+  );
+  const ydocRef = (0, import_react3.useRef)(null);
+  if (!ydocRef.current) {
+    ydocRef.current = new Y.Doc();
+  }
+  const ydoc = ydocRef.current;
+  const localRef = (0, import_react3.useRef)(null);
+  const [status, setStatus] = (0, import_react3.useState)("connecting");
+  const [remoteSynced, setRemoteSynced] = (0, import_react3.useState)(false);
+  const [localSynced, setLocalSynced] = (0, import_react3.useState)(!enableLocalPersistence);
+  const [lastSyncedAt, setLastSyncedAt] = (0, import_react3.useState)(null);
+  const [isReconnecting, setIsReconnecting] = (0, import_react3.useState)(false);
+  const [collabUsers, setCollabUsers] = (0, import_react3.useState)([]);
+  const [ready, setReady] = (0, import_react3.useState)(false);
+  const getTokenRef = (0, import_react3.useRef)(getToken);
+  getTokenRef.current = getToken;
+  const remoteRef = (0, import_react3.useRef)(null);
+  if (!remoteRef.current) {
+    remoteRef.current = new import_provider.HocuspocusProvider({
+      name: documentId,
+      url,
+      document: ydoc,
+      token: async () => getTokenRef.current(),
+      connect: false,
+      // connect is managed by the effect below
+      preserveConnection: false
+    });
+  }
+  const provider = remoteRef.current;
+  (0, import_react3.useEffect)(() => {
+    const remote = remoteRef.current;
+    if (!remote) return;
+    if (enableLocalPersistence) {
+      const local = new import_y_indexeddb.IndexeddbPersistence(documentId, ydoc);
+      local.on("synced", () => setLocalSynced(true));
+      localRef.current = local;
+    }
+    const onAuthFailed = () => {
+      remote.disconnect();
+      setIsReconnecting(true);
+      setTimeout(() => remote.connect(), 100);
+    };
+    const onSynced = () => {
+      setRemoteSynced(true);
+      setLastSyncedAt(/* @__PURE__ */ new Date());
+    };
+    const onStatus = ({ status: ws }) => {
+      const mapped = mapStatus(ws);
+      setStatus(mapped);
+      if (mapped === "connected") {
+        setIsReconnecting(false);
+      }
+    };
+    remote.on("authenticationFailed", onAuthFailed);
+    remote.on("synced", onSynced);
+    remote.on("status", onStatus);
+    const awareness = remote.awareness;
+    let updateUsers = null;
+    if (awareness) {
+      updateUsers = () => {
+        const states = awareness.getStates();
+        const users = [];
+        states.forEach((state, clientId) => {
+          var _a;
+          if (!state.user || clientId === awareness.clientID) return;
+          const u = state.user;
+          users.push({
+            ...u,
+            color: (_a = u.color) != null ? _a : generateColorFromId(u.id)
+          });
+        });
+        setCollabUsers(users);
+      };
+      awareness.on("change", updateUsers);
+      updateUsers();
+    }
+    remote.connect();
+    setReady(true);
+    return () => {
+      var _a;
+      if (awareness && updateUsers) {
+        awareness.off("change", updateUsers);
+      }
+      remote.off("authenticationFailed", onAuthFailed);
+      remote.off("synced", onSynced);
+      remote.off("status", onStatus);
+      remote.destroy();
+      (_a = localRef.current) == null ? void 0 : _a.destroy();
+      localRef.current = null;
+      remoteRef.current = null;
+    };
+  }, [documentId, ydoc, enableLocalPersistence]);
+  (0, import_react3.useEffect)(() => {
+    var _a;
+    const awareness = (_a = remoteRef.current) == null ? void 0 : _a.awareness;
+    if (awareness) {
+      awareness.setLocalStateField("user", resolvedUser);
+    }
+  }, [resolvedUser]);
+  const { isIdle, resetIdle } = useIdle(IDLE_TIMEOUT);
+  const visibility = useDocumentVisibility();
+  (0, import_react3.useEffect)(() => {
+    if (!ready || !remoteRef.current) return;
+    const remote = remoteRef.current;
+    if (isIdle && visibility === "hidden" && remote.status === import_provider.WebSocketStatus.Connected) {
+      remote.disconnect();
+      return;
+    }
+    if (visibility === "visible" && remote.status === import_provider.WebSocketStatus.Disconnected) {
+      resetIdle();
+      setIsReconnecting(true);
+      remote.connect();
+    }
+  }, [isIdle, visibility, ready, resetIdle]);
+  const synced = remoteSynced && localSynced;
+  const value = (0, import_react3.useMemo)(
+    () => ({
+      status,
+      isReconnecting,
+      synced,
+      remoteSynced,
+      localSynced,
+      lastSyncedAt,
+      collabUsers,
+      provider,
+      ydoc,
+      user: resolvedUser
+    }),
+    [
+      status,
+      isReconnecting,
+      synced,
+      remoteSynced,
+      localSynced,
+      lastSyncedAt,
+      collabUsers,
+      provider,
+      ydoc,
+      resolvedUser
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollaborationContext.Provider, { value, children });
+}
+function useCollaboration() {
+  return (0, import_react3.useContext)(CollaborationContext);
+}
+function useCollaborationRequired() {
+  const ctx = (0, import_react3.useContext)(CollaborationContext);
+  if (!ctx) {
+    throw new Error(
+      "useCollaborationRequired must be used within a CollaborationProvider"
+    );
+  }
+  return ctx;
+}
+
+// src/context/editor-file-context.tsx
+var import_react4 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var EditorFileContext = (0, import_react4.createContext)(null);
 var DEFAULT_CACHE_BUFFER = 2 * 60 * 1e3;
 var DEFAULT_CACHE_TTL = 10 * 60 * 1e3;
 var defaultIsReference = (src) => {
@@ -77,8 +353,8 @@ function EditorFileProvider({
   cacheBuffer = DEFAULT_CACHE_BUFFER,
   defaultCacheTtl = DEFAULT_CACHE_TTL
 }) {
-  const cacheRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-  const resolve = (0, import_react.useCallback)(
+  const cacheRef = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
+  const resolve = (0, import_react4.useCallback)(
     async (ref) => {
       const cache = cacheRef.current;
       const now = Date.now();
@@ -95,7 +371,7 @@ function EditorFileProvider({
     },
     [onResolve, cacheBuffer, defaultCacheTtl]
   );
-  const value = (0, import_react.useMemo)(
+  const value = (0, import_react4.useMemo)(
     () => ({
       isAvailable: true,
       upload: onUpload,
@@ -104,13 +380,13 @@ function EditorFileProvider({
     }),
     [onUpload, resolve, isReference]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorFileContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditorFileContext.Provider, { value, children });
 }
 function useEditorFile() {
-  return (0, import_react.useContext)(EditorFileContext);
+  return (0, import_react4.useContext)(EditorFileContext);
 }
 function useEditorFileRequired() {
-  const context = (0, import_react.useContext)(EditorFileContext);
+  const context = (0, import_react4.useContext)(EditorFileContext);
   if (!context) {
     throw new Error(
       "useEditorFileRequired must be used within an EditorFileProvider"
@@ -121,13 +397,13 @@ function useEditorFileRequired() {
 
 // src/extensions/callout/index.ts
 var import_core = require("@tiptap/core");
-var import_react5 = require("@tiptap/react");
+var import_react8 = require("@tiptap/react");
 
 // src/extensions/callout/callout-view.tsx
 var import_icons2 = require("@kopexa/icons");
 var import_theme = require("@kopexa/theme");
-var import_react3 = require("@tiptap/react");
-var import_react4 = require("react");
+var import_react6 = require("@tiptap/react");
+var import_react7 = require("react");
 
 // src/extensions/callout/callout-settings.tsx
 var import_button = require("@kopexa/button");
@@ -136,7 +412,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_react2 = require("react");
+var import_react5 = require("react");
 var import_react_intl2 = require("react-intl");
 
 // src/extensions/callout/messages.ts
@@ -200,7 +476,7 @@ var messages = (0, import_react_intl.defineMessages)({
 });
 
 // src/extensions/callout/callout-settings.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var VARIANTS = [
   { value: "default", messageKey: "variant_default" },
   { value: "info", messageKey: "variant_info" },
@@ -214,14 +490,14 @@ function CalloutSettings({
   getPos
 }) {
   const intl = (0, import_react_intl2.useIntl)();
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
-  const [localAttrs, setLocalAttrs] = (0, import_react2.useState)(attrs);
-  (0, import_react2.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
+  const [localAttrs, setLocalAttrs] = (0, import_react5.useState)(attrs);
+  (0, import_react5.useEffect)(() => {
     if (isOpen) {
       setLocalAttrs(attrs);
     }
   }, [isOpen, attrs]);
-  const handleSave = (0, import_react2.useCallback)(() => {
+  const handleSave = (0, import_react5.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -229,17 +505,17 @@ function CalloutSettings({
     );
     setIsOpen(false);
   }, [editor, localAttrs, getPos]);
-  const handleCancel = (0, import_react2.useCallback)(() => {
+  const handleCancel = (0, import_react5.useCallback)(() => {
     setLocalAttrs(attrs);
     setIsOpen(false);
   }, [attrs]);
-  const handleVariantChange = (0, import_react2.useCallback)((value) => {
+  const handleVariantChange = (0, import_react5.useCallback)((value) => {
     setLocalAttrs((prev) => ({
       ...prev,
       variant: String(value)
     }));
   }, []);
-  const handleTitleChange = (0, import_react2.useCallback)(
+  const handleTitleChange = (0, import_react5.useCallback)(
     (e) => {
       const value = e.target.value;
       setLocalAttrs((prev) => ({
@@ -252,8 +528,8 @@ function CalloutSettings({
   if (!editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_button.IconButton,
       {
         size: "sm",
@@ -264,30 +540,30 @@ function CalloutSettings({
           e.preventDefault();
           setIsOpen(true);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.SettingsIcon, { className: "size-3.5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.SettingsIcon, { className: "size-3.5" })
       }
     ),
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_dialog.Dialog.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.Title, { children: intl.formatMessage(messages.settings) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.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_label.Label, { className: "text-sm", children: intl.formatMessage(messages.variant) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             import_select.Select,
             {
               size: "sm",
               value: localAttrs.variant,
               onValueChange: handleVariantChange,
               children: [
-                /* @__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_runtime3.jsx)(import_select.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select.Select.Value, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select.Select.Content, { children: VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select.Select.Item, { value: v.value, children: intl.formatMessage(messages[v.messageKey]) }, v.value)) })
               ]
             }
           )
         ] }),
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_label.Label, { className: "text-sm", children: intl.formatMessage(messages.title) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_input.Input,
             {
               size: "sm",
@@ -298,41 +574,41 @@ function CalloutSettings({
           )
         ] })
       ] }) }),
-      /* @__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) })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_dialog.Dialog.Footer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_button.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages.cancel) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_button.Button, { onClick: handleSave, children: intl.formatMessage(messages.save) })
       ] })
     ] }) })
   ] });
 }
 
 // src/extensions/callout/callout-view.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function getVariantIcon(variant, iconClass) {
   switch (variant) {
     case "info":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.InfoIcon, { className: iconClass });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.InfoIcon, { className: iconClass });
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.CheckCirleIcon, { className: iconClass });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.CheckCirleIcon, { className: iconClass });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.AlertIcon, { className: iconClass });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.AlertIcon, { className: iconClass });
     case "destructive":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.AlertCircleIcon, { className: iconClass });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.AlertCircleIcon, { className: iconClass });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.ShellIcon, { className: iconClass });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.ShellIcon, { className: iconClass });
   }
 }
 function CalloutNodeView({ editor, node, getPos }) {
   const attrs = node.attrs;
   const { variant = "info", title } = attrs;
-  const isEditable = (0, import_react3.useEditorState)({
+  const isEditable = (0, import_react6.useEditorState)({
     editor,
     selector: ({ editor: e }) => {
       var _a;
       return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
     }
   });
-  const styles = (0, import_react4.useMemo)(
+  const styles = (0, import_react7.useMemo)(
     () => (0, import_theme.callout)({
       variant,
       radius: "md",
@@ -340,19 +616,19 @@ function CalloutNodeView({ editor, node, getPos }) {
     }),
     [variant]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    import_react3.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_react6.NodeViewWrapper,
     {
       className: styles.root(),
       "data-type": "callout",
       "data-variant": variant,
       children: [
-        /* @__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" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles.iconContainer(), children: getVariantIcon(variant, styles.icon()) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles.content(), children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles.title(), children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.NodeViewContent, { className: "callout-content" })
         ] }),
-        isEditable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        isEditable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           CalloutSettings,
           {
             editor,
@@ -415,7 +691,7 @@ var CalloutNode = import_core.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react5.ReactNodeViewRenderer)(CalloutNodeView);
+    return (0, import_react8.ReactNodeViewRenderer)(CalloutNodeView);
   },
   addCommands() {
     return {
@@ -470,14 +746,14 @@ var CalloutNode = import_core.Node.create({
 
 // src/extensions/image/index.ts
 var import_extension_image = require("@tiptap/extension-image");
-var import_react8 = require("@tiptap/react");
+var import_react11 = 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_react9 = require("@tiptap/react");
+var import_react10 = require("react");
 var import_react_intl4 = require("react-intl");
 
 // src/extensions/image/messages.ts
@@ -510,23 +786,24 @@ var messages2 = (0, import_react_intl3.defineMessages)({
 });
 
 // src/extensions/image/image-view.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ImageNodeView({ editor, node, getPos }) {
   var _a;
   const intl = (0, import_react_intl4.useIntl)();
   const fileHandler = useEditorFile();
   const { src, alt, title, uploadState, uploadProgress } = node.attrs;
-  const isEditable = (0, import_react6.useEditorState)({
+  const isEditable = (0, import_react9.useEditorState)({
     editor,
     selector: ({ editor: e }) => {
       var _a2;
       return (_a2 = e == null ? void 0 : e.isEditable) != null ? _a2 : false;
     }
   });
-  const [resolvedUrl, setResolvedUrl] = (0, import_react7.useState)(null);
-  const [resolveState, setResolveState] = (0, import_react7.useState)("idle");
+  const [resolvedUrl, setResolvedUrl] = (0, import_react10.useState)(null);
+  const [resolveState, setResolveState] = (0, import_react10.useState)("idle");
+  const retryCountRef = (0, import_react10.useRef)(0);
   const needsResolve = (_a = fileHandler == null ? void 0 : fileHandler.isReference(src)) != null ? _a : false;
-  const resolveImage = (0, import_react7.useCallback)(async () => {
+  const resolveImage = (0, import_react10.useCallback)(async () => {
     if (!src) return;
     if (!needsResolve) {
       setResolvedUrl(src);
@@ -543,17 +820,19 @@ function ImageNodeView({ editor, node, getPos }) {
       const url = await fileHandler.resolve(src);
       setResolvedUrl(url);
       setResolveState("resolved");
+      retryCountRef.current = 0;
     } catch {
       setResolveState("error");
     }
   }, [src, needsResolve, fileHandler]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     resolveImage();
   }, [resolveImage]);
-  const handleRetry = (0, import_react7.useCallback)(() => {
+  const handleRetry = (0, import_react10.useCallback)(() => {
+    retryCountRef.current += 1;
     resolveImage();
   }, [resolveImage]);
-  const handleRemove = (0, import_react7.useCallback)(() => {
+  const handleRemove = (0, import_react10.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.commands.deleteRange({
@@ -561,25 +840,25 @@ function ImageNodeView({ editor, node, getPos }) {
       to: pos + node.nodeSize
     });
   }, [editor, getPos, node.nodeSize]);
-  const errorStyles = (0, import_react7.useMemo)(
+  const errorStyles = (0, import_react10.useMemo)(
     () => (0, import_theme2.imagePlaceholder)({ size: "md", variant: "error" }),
     []
   );
-  const loadingStyles = (0, import_react7.useMemo)(
+  const loadingStyles = (0, import_react10.useMemo)(
     () => (0, import_theme2.imagePlaceholder)({ size: "md", variant: "uploading" }),
     []
   );
   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: loadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: loadingStyles.content(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative size-12", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: loadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: loadingStyles.content(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative size-12", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "svg",
           {
             className: "size-12 -rotate-90",
             viewBox: "0 0 36 36",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "circle",
                 {
                   cx: "18",
@@ -590,14 +869,14 @@ function ImageNodeView({ editor, node, getPos }) {
                   strokeWidth: "2"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "circle",
                 {
                   cx: "18",
                   cy: "18",
                   r: "16",
                   fill: "none",
-                  className: "stroke-primary",
+                  className: "stroke-primary transition-[stroke-dashoffset] duration-300 ease-out",
                   strokeWidth: "2",
                   strokeDasharray: 100,
                   strokeDashoffset: 100 - (uploadProgress != null ? uploadProgress : 0),
@@ -607,83 +886,120 @@ function ImageNodeView({ editor, node, getPos }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.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: loadingStyles.text(), children: intl.formatMessage(messages2.uploading) })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: loadingStyles.text(), children: intl.formatMessage(messages2.uploading) })
     ] }) }) });
   }
   if (uploadState === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: errorStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: errorStyles.content(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.AlertCircleIcon, { className: errorStyles.icon() }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: errorStyles.text(), children: intl.formatMessage(messages2.upload_error) }),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: errorStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: errorStyles.content(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons3.AlertCircleIcon, { className: errorStyles.icon() }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: errorStyles.text(), children: intl.formatMessage(messages2.upload_error) }),
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime5.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" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.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: `${loadingStyles.root()} animate-pulse`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: loadingStyles.text(), children: intl.formatMessage(messages2.loading) }) }) });
+  if (resolveState === "resolved" && resolvedUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react9.NodeViewWrapper, { className: "my-4 relative group", "data-type": "image", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "img",
+        {
+          src: resolvedUrl,
+          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_runtime5.jsx)("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_button2.IconButton,
+        {
+          size: "sm",
+          variant: "outline",
+          onClick: handleRemove,
+          "aria-label": intl.formatMessage(messages2.remove),
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons3.TrashIcon, { className: "size-3.5" })
+        }
+      ) })
+    ] });
   }
-  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,
+  const isLoading = resolveState === "loading" || resolveState === "idle";
+  const isError = resolveState === "error";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: [
+        "relative flex items-center justify-center",
+        "rounded-lg border-2 border-dashed",
+        "min-h-32 py-6 px-8",
+        "transition-colors duration-300 ease-out",
+        isError ? "border-destructive/50 bg-destructive/10" : "border-border bg-muted/30"
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
           {
-            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" })
+            className: [
+              "absolute inset-0 flex items-center justify-center",
+              "transition-opacity duration-200 ease-out",
+              isLoading ? "opacity-100" : "opacity-0 pointer-events-none"
+            ].join(" "),
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "size-5 rounded-full border-2 border-muted-foreground/30 border-t-muted-foreground animate-spin" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm text-muted-foreground", children: intl.formatMessage(messages2.loading) })
+            ] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_button2.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
           {
-            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" })
+            className: [
+              "flex flex-col items-center gap-2",
+              "transition-opacity duration-200 ease-out",
+              isError ? "opacity-100" : "opacity-0 pointer-events-none"
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons3.AlertCircleIcon, { className: "size-8 text-destructive" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm text-destructive", children: intl.formatMessage(messages2.error) }),
+              isEditable && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  import_button2.IconButton,
+                  {
+                    size: "sm",
+                    variant: "outline",
+                    onClick: handleRetry,
+                    "aria-label": intl.formatMessage(messages2.retry),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons3.ArrowCounterClockwiseIcon, { className: "size-4" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  import_button2.IconButton,
+                  {
+                    size: "sm",
+                    variant: "ghost",
+                    onClick: handleRemove,
+                    "aria-label": intl.formatMessage(messages2.remove),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.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
@@ -704,20 +1020,28 @@ var ImageNode = import_extension_image.Image.extend({
     };
   },
   addNodeView() {
-    return (0, import_react8.ReactNodeViewRenderer)(ImageNodeView);
+    return (0, import_react11.ReactNodeViewRenderer)(ImageNodeView, {
+      stopEvent: ({ event }) => {
+        const target = event.target;
+        if (target.closest("button, [role='button'], input, a")) {
+          return true;
+        }
+        return false;
+      }
+    });
   }
 });
 
 // src/extensions/image-upload/index.ts
 var import_core2 = require("@tiptap/core");
-var import_react11 = require("@tiptap/react");
+var import_react14 = require("@tiptap/react");
 
 // src/extensions/image-upload/image-upload-view.tsx
 var import_button3 = require("@kopexa/button");
 var import_icons4 = require("@kopexa/icons");
 var import_theme3 = require("@kopexa/theme");
-var import_react9 = require("@tiptap/react");
-var import_react10 = require("react");
+var import_react12 = require("@tiptap/react");
+var import_react13 = require("react");
 var import_react_intl6 = require("react-intl");
 
 // src/extensions/image-upload/messages.ts
@@ -754,22 +1078,22 @@ var messages3 = (0, import_react_intl5.defineMessages)({
 });
 
 // src/extensions/image-upload/image-upload-view.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function ImageUploadNodeView({ editor, node, getPos }) {
   const intl = (0, import_react_intl6.useIntl)();
   const fileHandler = useEditorFile();
-  const isEditable = (0, import_react9.useEditorState)({
+  const isEditable = (0, import_react12.useEditorState)({
     editor,
     selector: ({ editor: e }) => {
       var _a;
       return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
     }
   });
-  const [uploadState, setUploadState] = (0, import_react10.useState)("idle");
-  const [uploadProgress, setUploadProgress] = (0, import_react10.useState)(0);
-  const [isDragOver, setIsDragOver] = (0, import_react10.useState)(false);
-  const fileInputRef = (0, import_react10.useRef)(null);
-  const handleRemove = (0, import_react10.useCallback)(() => {
+  const [uploadState, setUploadState] = (0, import_react13.useState)("idle");
+  const [uploadProgress, setUploadProgress] = (0, import_react13.useState)(0);
+  const [isDragOver, setIsDragOver] = (0, import_react13.useState)(false);
+  const fileInputRef = (0, import_react13.useRef)(null);
+  const handleRemove = (0, import_react13.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.commands.deleteRange({
@@ -777,7 +1101,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
       to: pos + node.nodeSize
     });
   }, [editor, getPos, node.nodeSize]);
-  const handleFileSelect = (0, import_react10.useCallback)(
+  const handleFileSelect = (0, import_react13.useCallback)(
     async (file) => {
       if (!fileHandler) return;
       const pos = getPos();
@@ -806,7 +1130,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
     },
     [fileHandler, editor, getPos, node.nodeSize]
   );
-  const handleInputChange = (0, import_react10.useCallback)(
+  const handleInputChange = (0, import_react13.useCallback)(
     (e) => {
       var _a;
       const file = (_a = e.target.files) == null ? void 0 : _a[0];
@@ -817,7 +1141,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
     },
     [handleFileSelect]
   );
-  const handleDrop = (0, import_react10.useCallback)(
+  const handleDrop = (0, import_react13.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -829,74 +1153,74 @@ function ImageUploadNodeView({ editor, node, getPos }) {
     },
     [handleFileSelect]
   );
-  const handleDragOver = (0, import_react10.useCallback)((e) => {
+  const handleDragOver = (0, import_react13.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
-  const handleDragEnter = (0, import_react10.useCallback)((e) => {
+  const handleDragEnter = (0, import_react13.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(true);
   }, []);
-  const handleDragLeave = (0, import_react10.useCallback)((e) => {
+  const handleDragLeave = (0, import_react13.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     if (!e.currentTarget.contains(e.relatedTarget)) {
       setIsDragOver(false);
     }
   }, []);
-  const handleClick = (0, import_react10.useCallback)(() => {
+  const handleClick = (0, import_react13.useCallback)(() => {
     var _a;
     if (uploadState === "idle" || uploadState === "error") {
       (_a = fileInputRef.current) == null ? void 0 : _a.click();
     }
   }, [uploadState]);
-  const styles = (0, import_react10.useMemo)(
+  const styles = (0, import_react13.useMemo)(
     () => (0, import_theme3.imagePlaceholder)({
       size: "md",
       variant: isDragOver ? "default" : void 0
     }),
     [isDragOver]
   );
-  const errorStyles = (0, import_react10.useMemo)(
+  const errorStyles = (0, import_react13.useMemo)(
     () => (0, import_theme3.imagePlaceholder)({ size: "md", variant: "error" }),
     []
   );
-  const uploadingStyles = (0, import_react10.useMemo)(
+  const uploadingStyles = (0, import_react13.useMemo)(
     () => (0, import_theme3.imagePlaceholder)({ size: "md", variant: "uploading" }),
     []
   );
-  const disabledStyles = (0, import_react10.useMemo)(
+  const disabledStyles = (0, import_react13.useMemo)(
     () => (0, import_theme3.imagePlaceholder)({ size: "md", variant: "disabled" }),
     []
   );
   if (!fileHandler) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: disabledStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: disabledStyles.content(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.ImageIcon, { className: disabledStyles.icon() }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: disabledStyles.text(), children: intl.formatMessage(messages3.files_not_supported) }),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react12.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: disabledStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: disabledStyles.content(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons4.ImageIcon, { className: disabledStyles.icon() }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: disabledStyles.text(), children: intl.formatMessage(messages3.files_not_supported) }),
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_button3.IconButton,
         {
           size: "sm",
           variant: "ghost",
           onClick: handleRemove,
           "aria-label": intl.formatMessage(messages3.remove),
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.TrashIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons4.TrashIcon, { className: "size-4" })
         }
       )
     ] }) }) });
   }
   if (uploadState === "uploading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: uploadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: uploadingStyles.content(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative size-12", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react12.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: uploadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: uploadingStyles.content(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative size-12", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "svg",
           {
             className: "size-12 -rotate-90",
             viewBox: "0 0 36 36",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "circle",
                 {
                   cx: "18",
@@ -907,7 +1231,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
                   strokeWidth: "2"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "circle",
                 {
                   cx: "18",
@@ -924,22 +1248,22 @@ function ImageUploadNodeView({ editor, node, getPos }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium", children: [
           uploadProgress,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: uploadingStyles.text(), children: intl.formatMessage(messages3.uploading) })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: uploadingStyles.text(), children: intl.formatMessage(messages3.uploading) })
     ] }) }) });
   }
   if (uploadState === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: errorStyles.root(), onClick: handleClick, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: errorStyles.content(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.AlertCircleIcon, { className: errorStyles.icon() }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: errorStyles.text(), children: intl.formatMessage(messages3.upload_error) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: errorStyles.hint(), children: intl.formatMessage(messages3.click_to_retry) })
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react12.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: errorStyles.root(), onClick: handleClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: errorStyles.content(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons4.AlertCircleIcon, { className: errorStyles.icon() }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: errorStyles.text(), children: intl.formatMessage(messages3.upload_error) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: errorStyles.hint(), children: intl.formatMessage(messages3.click_to_retry) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "input",
         {
           ref: fileInputRef,
@@ -949,7 +1273,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
           onChange: handleInputChange
         }
       ),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_button3.IconButton,
         {
           size: "sm",
@@ -960,12 +1284,12 @@ function ImageUploadNodeView({ editor, node, getPos }) {
             handleRemove();
           },
           "aria-label": intl.formatMessage(messages3.remove),
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.TrashIcon, { className: "size-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons4.TrashIcon, { className: "size-3.5" })
         }
       )
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react12.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: `${styles.root()} ${isDragOver ? "border-primary bg-primary/10" : ""}`,
@@ -975,12 +1299,12 @@ function ImageUploadNodeView({ editor, node, getPos }) {
       onDragEnter: handleDragEnter,
       onDragLeave: handleDragLeave,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles.content(), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.UploadIcon, { className: styles.icon() }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles.text(), children: intl.formatMessage(messages3.upload_placeholder) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles.hint(), children: intl.formatMessage(messages3.upload_hint) })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: styles.content(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons4.UploadIcon, { className: styles.icon() }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles.text(), children: intl.formatMessage(messages3.upload_placeholder) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles.hint(), children: intl.formatMessage(messages3.upload_hint) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           {
             ref: fileInputRef,
@@ -990,7 +1314,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
             onChange: handleInputChange
           }
         ),
-        isEditable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isEditable && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_button3.IconButton,
           {
             size: "sm",
@@ -1001,7 +1325,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
               handleRemove();
             },
             "aria-label": intl.formatMessage(messages3.remove),
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons4.TrashIcon, { className: "size-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons4.TrashIcon, { className: "size-3.5" })
           }
         )
       ]
@@ -1047,7 +1371,15 @@ var ImageUploadNode = import_core2.Node.create({
     return ["div", { ...HTMLAttributes, "data-type": "image-upload" }];
   },
   addNodeView() {
-    return (0, import_react11.ReactNodeViewRenderer)(ImageUploadNodeView);
+    return (0, import_react14.ReactNodeViewRenderer)(ImageUploadNodeView, {
+      stopEvent: ({ event }) => {
+        const target = event.target;
+        if (target.closest("button, [role='button'], input, a")) {
+          return true;
+        }
+        return false;
+      }
+    });
   },
   addCommands() {
     return {
@@ -1082,17 +1414,17 @@ var ImageUploadNode = import_core2.Node.create({
 
 // src/extensions/math/index.ts
 var import_core4 = require("@tiptap/core");
-var import_react17 = require("@tiptap/react");
+var import_react20 = require("@tiptap/react");
 
 // src/extensions/math/math-block-view.tsx
 var import_button4 = require("@kopexa/button");
 var import_dialog2 = require("@kopexa/dialog");
 var import_icons5 = require("@kopexa/icons");
 var import_label2 = require("@kopexa/label");
-var import_react12 = require("@tiptap/react");
+var import_react15 = require("@tiptap/react");
 var import_katex = __toESM(require("katex"));
 var import_katex_min = require("katex/dist/katex.min.css");
-var import_react13 = require("react");
+var import_react16 = require("react");
 var import_react_intl8 = require("react-intl");
 
 // src/extensions/math/messages.ts
@@ -1146,28 +1478,28 @@ var messages4 = (0, import_react_intl7.defineMessages)({
 });
 
 // src/extensions/math/math-block-view.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function MathBlockView({ editor, node, getPos }) {
   const intl = (0, import_react_intl8.useIntl)();
   const attrs = node.attrs;
   const { latex = "" } = attrs;
-  const isEditable = (0, import_react12.useEditorState)({
+  const isEditable = (0, import_react15.useEditorState)({
     editor,
     selector: ({ editor: e }) => {
       var _a;
       return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
     }
   });
-  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
-  const [localLatex, setLocalLatex] = (0, import_react13.useState)(latex);
-  const [error, setError] = (0, import_react13.useState)(null);
-  (0, import_react13.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
+  const [localLatex, setLocalLatex] = (0, import_react16.useState)(latex);
+  const [error, setError] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
     if (isOpen) {
       setLocalLatex(latex);
       setError(null);
     }
   }, [isOpen, latex]);
-  const renderedHtml = (0, import_react13.useMemo)(() => {
+  const renderedHtml = (0, import_react16.useMemo)(() => {
     if (!latex) return null;
     try {
       return import_katex.default.renderToString(latex, {
@@ -1179,7 +1511,7 @@ function MathBlockView({ editor, node, getPos }) {
       return null;
     }
   }, [latex]);
-  const previewHtml = (0, import_react13.useMemo)(() => {
+  const previewHtml = (0, import_react16.useMemo)(() => {
     if (!localLatex) return null;
     try {
       setError(null);
@@ -1193,7 +1525,7 @@ function MathBlockView({ editor, node, getPos }) {
       return null;
     }
   }, [localLatex, intl]);
-  const handleSave = (0, import_react13.useCallback)(() => {
+  const handleSave = (0, import_react16.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1201,12 +1533,12 @@ function MathBlockView({ editor, node, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localLatex, getPos]);
-  const handleCancel = (0, import_react13.useCallback)(() => {
+  const handleCancel = (0, import_react16.useCallback)(() => {
     setLocalLatex(latex);
     setError(null);
     setIsOpen(false);
   }, [latex]);
-  const handleOpenEditor = (0, import_react13.useCallback)(
+  const handleOpenEditor = (0, import_react16.useCallback)(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -1217,32 +1549,32 @@ function MathBlockView({ editor, node, getPos }) {
     [isEditable]
   );
   const isEmpty = !latex;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_react12.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    import_react15.NodeViewWrapper,
     {
       className: "my-4 relative group",
       "data-type": "math-block",
       "data-latex": latex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime6.jsxs)("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-lg font-serif", children: "\u2211" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm", children: intl.formatMessage(messages4.empty_formula) })
-            ] }) : renderedHtml ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-lg font-serif", children: "\u2211" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm", children: intl.formatMessage(messages4.empty_formula) })
+            ] }) : renderedHtml ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "div",
               {
                 className: "katex-display",
                 dangerouslySetInnerHTML: { __html: renderedHtml }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-destructive text-sm", children: intl.formatMessage(messages4.invalid_latex) })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-destructive text-sm", children: intl.formatMessage(messages4.invalid_latex) })
           }
         ),
-        isEditable && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        isEditable && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           import_button4.IconButton,
           {
             size: "sm",
@@ -1250,15 +1582,15 @@ function MathBlockView({ editor, node, getPos }) {
             className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",
             "aria-label": intl.formatMessage(messages4.edit),
             onClick: handleOpenEditor,
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.EditIcon, { className: "size-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons5.EditIcon, { className: "size-3.5" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog2.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_dialog2.Dialog.Content, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog2.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog2.Dialog.Title, { children: intl.formatMessage(messages4.title) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dialog2.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_label2.Label, { className: "text-sm", children: intl.formatMessage(messages4.latex_input) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog2.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_dialog2.Dialog.Content, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog2.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog2.Dialog.Title, { children: intl.formatMessage(messages4.title) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog2.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_label2.Label, { className: "text-sm", children: intl.formatMessage(messages4.latex_input) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.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",
@@ -1268,22 +1600,22 @@ function MathBlockView({ editor, node, getPos }) {
                   spellCheck: false
                 }
               ),
-              error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-destructive", children: error })
+              error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-destructive", children: error })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_label2.Label, { className: "text-sm", children: intl.formatMessage(messages4.preview) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "min-h-16 p-4 rounded-md border border-border bg-muted/30 flex items-center justify-center", children: previewHtml ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_label2.Label, { className: "text-sm", children: intl.formatMessage(messages4.preview) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(
                 "div",
                 {
                   className: "katex-display",
                   dangerouslySetInnerHTML: { __html: previewHtml }
                 }
-              ) : localLatex ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages4.invalid_latex) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages4.latex_placeholder) }) })
+              ) : localLatex ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages4.invalid_latex) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages4.latex_placeholder) }) })
             ] })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_dialog2.Dialog.Footer, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button4.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages4.cancel) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button4.Button, { onClick: handleSave, disabled: !!error && !!localLatex, children: intl.formatMessage(messages4.save) })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_dialog2.Dialog.Footer, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_button4.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages4.cancel) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_button4.Button, { onClick: handleSave, disabled: !!error && !!localLatex, children: intl.formatMessage(messages4.save) })
           ] })
         ] }) })
       ]
@@ -1293,39 +1625,39 @@ function MathBlockView({ editor, node, getPos }) {
 
 // src/extensions/math/inline-math.ts
 var import_core3 = require("@tiptap/core");
-var import_react16 = require("@tiptap/react");
+var import_react19 = require("@tiptap/react");
 
 // src/extensions/math/inline-math-view.tsx
 var import_button5 = require("@kopexa/button");
 var import_dialog3 = require("@kopexa/dialog");
 var import_label3 = require("@kopexa/label");
-var import_react14 = require("@tiptap/react");
+var import_react17 = require("@tiptap/react");
 var import_katex2 = __toESM(require("katex"));
 var import_katex_min2 = require("katex/dist/katex.min.css");
-var import_react15 = require("react");
+var import_react18 = require("react");
 var import_react_intl9 = require("react-intl");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function InlineMathView({ editor, node, getPos }) {
   const intl = (0, import_react_intl9.useIntl)();
   const attrs = node.attrs;
   const { latex = "" } = attrs;
-  const isEditable = (0, import_react14.useEditorState)({
+  const isEditable = (0, import_react17.useEditorState)({
     editor,
     selector: ({ editor: e }) => {
       var _a;
       return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
     }
   });
-  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
-  const [localLatex, setLocalLatex] = (0, import_react15.useState)(latex);
-  const [error, setError] = (0, import_react15.useState)(null);
-  (0, import_react15.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
+  const [localLatex, setLocalLatex] = (0, import_react18.useState)(latex);
+  const [error, setError] = (0, import_react18.useState)(null);
+  (0, import_react18.useEffect)(() => {
     if (isOpen) {
       setLocalLatex(latex);
       setError(null);
     }
   }, [isOpen, latex]);
-  const renderedHtml = (0, import_react15.useMemo)(() => {
+  const renderedHtml = (0, import_react18.useMemo)(() => {
     if (!latex) return null;
     try {
       return import_katex2.default.renderToString(latex, {
@@ -1337,7 +1669,7 @@ function InlineMathView({ editor, node, getPos }) {
       return null;
     }
   }, [latex]);
-  const previewHtml = (0, import_react15.useMemo)(() => {
+  const previewHtml = (0, import_react18.useMemo)(() => {
     if (!localLatex) return null;
     try {
       setError(null);
@@ -1351,7 +1683,7 @@ function InlineMathView({ editor, node, getPos }) {
       return null;
     }
   }, [localLatex, intl]);
-  const handleSave = (0, import_react15.useCallback)(() => {
+  const handleSave = (0, import_react18.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1359,12 +1691,12 @@ function InlineMathView({ editor, node, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localLatex, getPos]);
-  const handleCancel = (0, import_react15.useCallback)(() => {
+  const handleCancel = (0, import_react18.useCallback)(() => {
     setLocalLatex(latex);
     setError(null);
     setIsOpen(false);
   }, [latex]);
-  const handleClick = (0, import_react15.useCallback)(
+  const handleClick = (0, import_react18.useCallback)(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -1375,33 +1707,33 @@ function InlineMathView({ editor, node, getPos }) {
     [isEditable]
   );
   const isEmpty = !latex;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    import_react14.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    import_react17.NodeViewWrapper,
     {
       as: "span",
       className: "inline-math-wrapper",
       "data-type": "inline-math",
       "data-latex": latex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "span",
           {
             className: `inline-math cursor-pointer rounded px-0.5 transition-colors ${isEditable ? "hover:bg-primary/10 hover:ring-1 hover:ring-primary/20" : ""} ${isEmpty ? "text-muted-foreground italic" : ""}`,
             onClick: handleClick,
-            children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs", children: "$?$" }) : renderedHtml ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-xs", children: "$?$" }) : renderedHtml ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "span",
               {
                 dangerouslySetInnerHTML: { __html: renderedHtml }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-destructive text-xs", children: latex })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-destructive text-xs", children: latex })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog3.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_dialog3.Dialog.Content, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog3.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog3.Dialog.Title, { children: intl.formatMessage(messages4.title) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog3.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_label3.Label, { className: "text-sm", children: intl.formatMessage(messages4.latex_input) }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog3.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_dialog3.Dialog.Content, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog3.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog3.Dialog.Title, { children: intl.formatMessage(messages4.title) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog3.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_label3.Label, { className: "text-sm", children: intl.formatMessage(messages4.latex_input) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "input",
                 {
                   type: "text",
@@ -1412,21 +1744,21 @@ function InlineMathView({ editor, node, getPos }) {
                   spellCheck: false
                 }
               ),
-              error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-destructive", children: error })
+              error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-destructive", children: error })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_label3.Label, { className: "text-sm", children: intl.formatMessage(messages4.preview) }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "min-h-10 p-3 rounded-md border border-border bg-muted/30 flex items-center justify-center", children: previewHtml ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_label3.Label, { className: "text-sm", children: intl.formatMessage(messages4.preview) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(
                 "span",
                 {
                   dangerouslySetInnerHTML: { __html: previewHtml }
                 }
-              ) : localLatex ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages4.invalid_latex) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-muted-foreground text-sm", children: "$...$" }) })
+              ) : localLatex ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages4.invalid_latex) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-muted-foreground text-sm", children: "$...$" }) })
             ] })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_dialog3.Dialog.Footer, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_button5.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages4.cancel) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_button5.Button, { onClick: handleSave, disabled: !!error && !!localLatex, children: intl.formatMessage(messages4.save) })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_dialog3.Dialog.Footer, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_button5.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages4.cancel) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_button5.Button, { onClick: handleSave, disabled: !!error && !!localLatex, children: intl.formatMessage(messages4.save) })
           ] })
         ] }) })
       ]
@@ -1472,7 +1804,7 @@ var InlineMath = import_core3.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react16.ReactNodeViewRenderer)(InlineMathView, {
+    return (0, import_react19.ReactNodeViewRenderer)(InlineMathView, {
       as: "span"
     });
   },
@@ -1540,7 +1872,7 @@ var MathBlock = import_core4.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react17.ReactNodeViewRenderer)(MathBlockView);
+    return (0, import_react20.ReactNodeViewRenderer)(MathBlockView);
   },
   addCommands() {
     return {
@@ -1583,13 +1915,13 @@ var MathBlock = import_core4.Node.create({
 
 // src/extensions/toc/index.ts
 var import_core5 = require("@tiptap/core");
-var import_react21 = require("@tiptap/react");
+var import_react24 = require("@tiptap/react");
 
 // src/extensions/toc/toc-view.tsx
 var import_icons7 = require("@kopexa/icons");
 var import_theme4 = require("@kopexa/theme");
-var import_react19 = require("@tiptap/react");
-var import_react20 = require("react");
+var import_react22 = require("@tiptap/react");
+var import_react23 = require("react");
 var import_react_intl12 = require("react-intl");
 
 // src/extensions/toc/messages.ts
@@ -1674,9 +2006,9 @@ var import_icons6 = require("@kopexa/icons");
 var import_label4 = require("@kopexa/label");
 var import_select2 = require("@kopexa/select");
 var import_switch = require("@kopexa/switch");
-var import_react18 = require("react");
+var import_react21 = require("react");
 var import_react_intl11 = require("react-intl");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var HEADING_LEVELS = [
   { value: "1", label: "H1" },
   { value: "2", label: "H2" },
@@ -1687,14 +2019,14 @@ var HEADING_LEVELS = [
 ];
 function TocSettings({ editor, attrs, getPos }) {
   const intl = (0, import_react_intl11.useIntl)();
-  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
-  const [localAttrs, setLocalAttrs] = (0, import_react18.useState)(attrs);
-  (0, import_react18.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+  const [localAttrs, setLocalAttrs] = (0, import_react21.useState)(attrs);
+  (0, import_react21.useEffect)(() => {
     if (isOpen) {
       setLocalAttrs(attrs);
     }
   }, [isOpen, attrs]);
-  const handleSave = (0, import_react18.useCallback)(() => {
+  const handleSave = (0, import_react21.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1702,11 +2034,11 @@ function TocSettings({ editor, attrs, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localAttrs, getPos]);
-  const handleCancel = (0, import_react18.useCallback)(() => {
+  const handleCancel = (0, import_react21.useCallback)(() => {
     setLocalAttrs(attrs);
     setIsOpen(false);
   }, [attrs]);
-  const handleMinLevelChange = (0, import_react18.useCallback)((value) => {
+  const handleMinLevelChange = (0, import_react21.useCallback)((value) => {
     const minLevel = Number.parseInt(String(value), 10);
     setLocalAttrs((prev) => ({
       ...prev,
@@ -1715,7 +2047,7 @@ function TocSettings({ editor, attrs, getPos }) {
       maxLevel: Math.max(prev.maxLevel, minLevel)
     }));
   }, []);
-  const handleMaxLevelChange = (0, import_react18.useCallback)((value) => {
+  const handleMaxLevelChange = (0, import_react21.useCallback)((value) => {
     const maxLevel = Number.parseInt(String(value), 10);
     setLocalAttrs((prev) => ({
       ...prev,
@@ -1724,10 +2056,10 @@ function TocSettings({ editor, attrs, getPos }) {
       minLevel: Math.min(prev.minLevel, maxLevel)
     }));
   }, []);
-  const handleNumberedChange = (0, import_react18.useCallback)((checked) => {
+  const handleNumberedChange = (0, import_react21.useCallback)((checked) => {
     setLocalAttrs((prev) => ({ ...prev, numbered: checked }));
   }, []);
-  const handleStyleChange = (0, import_react18.useCallback)((value) => {
+  const handleStyleChange = (0, import_react21.useCallback)((value) => {
     setLocalAttrs((prev) => ({
       ...prev,
       style: String(value)
@@ -1736,8 +2068,8 @@ function TocSettings({ editor, attrs, getPos }) {
   if (!editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_button6.IconButton,
       {
         size: "sm",
@@ -1748,24 +2080,24 @@ function TocSettings({ editor, attrs, getPos }) {
           e.preventDefault();
           setIsOpen(true);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons6.SettingsIcon, { className: "size-3.5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.SettingsIcon, { className: "size-3.5" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog4.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_dialog4.Dialog.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog4.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog4.Dialog.Title, { children: intl.formatMessage(messages5.settings) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_dialog4.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages5.min_level) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_dialog4.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_dialog4.Dialog.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_dialog4.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_dialog4.Dialog.Title, { children: intl.formatMessage(messages5.settings) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_dialog4.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages5.min_level) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               import_select2.Select,
               {
                 size: "sm",
                 value: String(localAttrs.minLevel),
                 onValueChange: handleMinLevelChange,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Value, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Content, { children: HEADING_LEVELS.map((level) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_select2.Select.Value, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_select2.Select.Content, { children: HEADING_LEVELS.map((level) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     import_select2.Select.Item,
                     {
                       value: level.value,
@@ -1778,17 +2110,17 @@ function TocSettings({ editor, attrs, getPos }) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages5.max_level) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages5.max_level) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               import_select2.Select,
               {
                 size: "sm",
                 value: String(localAttrs.maxLevel),
                 onValueChange: handleMaxLevelChange,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Value, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Content, { children: HEADING_LEVELS.map((level) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_select2.Select.Value, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_select2.Select.Content, { children: HEADING_LEVELS.map((level) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     import_select2.Select.Item,
                     {
                       value: level.value,
@@ -1802,12 +2134,12 @@ function TocSettings({ editor, attrs, getPos }) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages5.numbered) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages5.numbered_hint) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages5.numbered) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages5.numbered_hint) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             import_switch.Switch,
             {
               size: "sm",
@@ -1816,36 +2148,36 @@ function TocSettings({ editor, attrs, getPos }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages5.style) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_label4.Label, { className: "text-sm", children: intl.formatMessage(messages5.style) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             import_select2.Select,
             {
               size: "sm",
               value: localAttrs.style,
               onValueChange: handleStyleChange,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Value, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_select2.Select.Content, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Item, { value: "default", children: intl.formatMessage(messages5.style_default) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Item, { value: "flat", children: intl.formatMessage(messages5.style_flat) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select2.Select.Item, { value: "compact", children: intl.formatMessage(messages5.style_compact) })
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_select2.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_select2.Select.Value, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_select2.Select.Content, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_select2.Select.Item, { value: "default", children: intl.formatMessage(messages5.style_default) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_select2.Select.Item, { value: "flat", children: intl.formatMessage(messages5.style_flat) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_select2.Select.Item, { value: "compact", children: intl.formatMessage(messages5.style_compact) })
                 ] })
               ]
             }
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_dialog4.Dialog.Footer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_button6.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages5.cancel) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_button6.Button, { onClick: handleSave, children: intl.formatMessage(messages5.save) })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_dialog4.Dialog.Footer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_button6.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages5.cancel) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_button6.Button, { onClick: handleSave, children: intl.formatMessage(messages5.save) })
       ] })
     ] }) })
   ] });
 }
 
 // src/extensions/toc/toc-view.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function generateHeadingNumbers(headings, minLevel) {
   const counters = [0, 0, 0, 0, 0, 0];
   return headings.map((heading) => {
@@ -1867,7 +2199,7 @@ function generateHeadingNumbers(headings, minLevel) {
   });
 }
 function TocNodeView({ editor, node, getPos }) {
-  const [headings, setHeadings] = (0, import_react20.useState)([]);
+  const [headings, setHeadings] = (0, import_react23.useState)([]);
   const intl = (0, import_react_intl12.useIntl)();
   const attrs = node.attrs;
   const {
@@ -1876,8 +2208,8 @@ function TocNodeView({ editor, node, getPos }) {
     numbered = false,
     style = "default"
   } = attrs;
-  const styles = (0, import_react20.useMemo)(() => (0, import_theme4.toc)({ style }), [style]);
-  const updateHeadings = (0, import_react20.useCallback)(() => {
+  const styles = (0, import_react23.useMemo)(() => (0, import_theme4.toc)({ style }), [style]);
+  const updateHeadings = (0, import_react23.useCallback)(() => {
     const items = [];
     const { doc } = editor.state;
     doc.descendants((docNode, pos) => {
@@ -1897,14 +2229,14 @@ function TocNodeView({ editor, node, getPos }) {
     const numberedHeadings = generateHeadingNumbers(items, minLevel);
     setHeadings(numberedHeadings);
   }, [editor, minLevel, maxLevel]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     updateHeadings();
     editor.on("update", updateHeadings);
     return () => {
       editor.off("update", updateHeadings);
     };
   }, [editor, updateHeadings]);
-  const handleClick = (0, import_react20.useCallback)(
+  const handleClick = (0, import_react23.useCallback)(
     (pos, id) => {
       var _a;
       editor.chain().focus().setTextSelection(pos).run();
@@ -1925,13 +2257,13 @@ function TocNodeView({ editor, node, getPos }) {
   const getIndent = (level) => {
     return (level - minLevel) * 16;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react19.NodeViewWrapper, { className: styles.root(), "data-type": "toc", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: styles.header(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: styles.headerContent(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons7.ListIcon, { className: styles.headerIcon() }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: styles.headerTitle(), children: intl.formatMessage(messages5.title) })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react22.NodeViewWrapper, { className: styles.root(), "data-type": "toc", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: styles.header(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: styles.headerContent(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons7.ListIcon, { className: styles.headerIcon() }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: styles.headerTitle(), children: intl.formatMessage(messages5.title) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: styles.headerActions(), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.headerActions(), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         TocSettings,
         {
           editor,
@@ -1940,7 +2272,7 @@ function TocNodeView({ editor, node, getPos }) {
         }
       ) })
     ] }),
-    isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: styles.emptyState(), children: intl.formatMessage(messages5.empty_state) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("nav", { className: styles.nav(), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: styles.list(), children: headings.map((heading) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: styles.emptyState(), children: intl.formatMessage(messages5.empty_state) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("nav", { className: styles.nav(), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: styles.list(), children: headings.map((heading) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "li",
       {
         className: styles.item(),
@@ -1948,8 +2280,8 @@ function TocNodeView({ editor, node, getPos }) {
           paddingLeft: `${getIndent(heading.level)}px`
         },
         children: [
-          numbered && heading.number && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: styles.itemNumber(), children: heading.number }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          numbered && heading.number && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: styles.itemNumber(), children: heading.number }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               type: "button",
@@ -2024,7 +2356,7 @@ var TocNode = import_core5.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react21.ReactNodeViewRenderer)(TocNodeView);
+    return (0, import_react24.ReactNodeViewRenderer)(TocNodeView);
   },
   addCommands() {
     return {
@@ -2053,15 +2385,15 @@ var TocNode = import_core5.Node.create({
 
 // src/extensions/variable/index.ts
 var import_core6 = require("@tiptap/core");
-var import_react23 = require("@tiptap/react");
+var import_react26 = require("@tiptap/react");
 
 // src/extensions/variable/variable-view.tsx
 var import_theme5 = require("@kopexa/theme");
-var import_react22 = require("@tiptap/react");
+var import_react25 = require("@tiptap/react");
 
 // src/extensions/variable/variable-context.tsx
 var React = __toESM(require("react"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var VariableContext = React.createContext(null);
 function VariableProvider({
   children,
@@ -2075,7 +2407,7 @@ function VariableProvider({
     }),
     [variables, resolveVariable]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(VariableContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VariableContext.Provider, { value, children });
 }
 function useVariables() {
   return React.useContext(VariableContext);
@@ -2087,13 +2419,13 @@ function useVariablesWithFallback(fallbackVariables = []) {
 }
 
 // src/extensions/variable/variable-view.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function VariableNodeView({ node, editor }) {
   var _a;
   const attrs = node.attrs;
   const { name, fallback, category } = attrs;
   const context = useVariables();
-  const isEditable = (0, import_react22.useEditorState)({
+  const isEditable = (0, import_react25.useEditorState)({
     editor,
     selector: ({ editor: e }) => {
       var _a2;
@@ -2105,8 +2437,8 @@ function VariableNodeView({ node, editor }) {
   const displayValue = resolvedValue || fallback;
   const styles = (0, import_theme5.variableNode)({ resolved: hasValue });
   if (!isEditable && hasValue) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react22.NodeViewWrapper,
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react25.NodeViewWrapper,
       {
         as: "span",
         "data-type": "variable",
@@ -2116,8 +2448,8 @@ function VariableNodeView({ node, editor }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_react22.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_react25.NodeViewWrapper,
     {
       as: "span",
       className: styles.wrapper(),
@@ -2125,17 +2457,17 @@ function VariableNodeView({ node, editor }) {
       "data-name": name,
       "data-category": category,
       "data-resolved": hasValue ? "true" : "false",
-      children: hasValue ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.chip(), title: `{{${name}}}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.value(), children: displayValue }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      children: hasValue ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: styles.chip(), title: `{{${name}}}`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: styles.value(), children: displayValue }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "span",
         {
           className: styles.chip(),
           title: fallback ? `Fallback: ${fallback}` : void 0,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.bracket(), children: "{" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.bracket(), children: "{" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.name(), children: name }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.bracket(), children: "}" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.bracket(), children: "}" })
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: styles.bracket(), children: "{" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: styles.bracket(), children: "{" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: styles.name(), children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: styles.bracket(), children: "}" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: styles.bracket(), children: "}" })
           ]
         }
       )
@@ -2206,7 +2538,7 @@ var VariableNode = import_core6.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react23.ReactNodeViewRenderer)(VariableNodeView);
+    return (0, import_react26.ReactNodeViewRenderer)(VariableNodeView);
   },
   addCommands() {
     return {
@@ -2329,7 +2661,7 @@ var messages6 = (0, import_react_intl13.defineMessages)({
 });
 
 // src/extensions/variable/variable-filler-dialog.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function VariableFillerDialog({
   open,
   onOpenChange,
@@ -2379,19 +2711,19 @@ function VariableFillerDialog({
       return (_a = localValues[v.name]) == null ? void 0 : _a.trim();
     }).length;
   }, [variables, localValues]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_dialog5.Dialog.Root, { open, onOpenChange, size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_dialog5.Dialog.Content, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_dialog5.Dialog.Header, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_dialog5.Dialog.Title, { children: title || intl.formatMessage(messages6.filler_title) }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_dialog5.Dialog.Description, { children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_dialog5.Dialog.Root, { open, onOpenChange, size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_dialog5.Dialog.Content, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_dialog5.Dialog.Header, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_dialog5.Dialog.Title, { children: title || intl.formatMessage(messages6.filler_title) }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_dialog5.Dialog.Description, { children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_dialog5.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-6", children: Object.entries(groupedVariables).map(([category, vars]) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h4", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3", children: category }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-3", children: vars.map((v) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_label5.Label, { htmlFor: `var-${v.name}`, className: "text-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_dialog5.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "space-y-6", children: Object.entries(groupedVariables).map(([category, vars]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h4", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3", children: category }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "space-y-3", children: vars.map((v) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_label5.Label, { htmlFor: `var-${v.name}`, className: "text-sm", children: [
           v.label,
-          v.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ml-2 text-xs text-muted-foreground font-normal", children: v.description })
+          v.description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ml-2 text-xs text-muted-foreground font-normal", children: v.description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           import_input2.Input,
           {
             id: `var-${v.name}`,
@@ -2402,17 +2734,17 @@ function VariableFillerDialog({
         )
       ] }, v.name)) })
     ] }, category)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_dialog5.Dialog.Footer, { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_dialog5.Dialog.Footer, { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-sm text-muted-foreground", children: [
         filledCount,
         " / ",
         variables.length,
         " ",
         intl.formatMessage(messages6.filler_filled)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_button7.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages6.cancel) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_button7.Button, { onClick: handleSave, children: intl.formatMessage(messages6.save) })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_button7.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages6.cancel) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_button7.Button, { onClick: handleSave, children: intl.formatMessage(messages6.save) })
       ] })
     ] })
   ] }) });
@@ -2425,23 +2757,23 @@ var import_state2 = require("@tiptap/pm/state");
 var React6 = __toESM(require("react"));
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
-var import_react27 = require("@floating-ui/react");
+var import_react30 = require("@floating-ui/react");
 var import_state = require("@tiptap/pm/state");
 var import_suggestion = require("@tiptap/suggestion");
 var React5 = __toESM(require("react"));
 
 // src/hooks/use-floating-element.ts
-var import_react24 = require("@floating-ui/react");
+var import_react27 = require("@floating-ui/react");
 var React3 = __toESM(require("react"));
 function useFloatingElement(show, referencePos, zIndex, options) {
   const { dismissOptions, ...floatingOptions } = options || {};
-  const { refs, update, context, floatingStyles } = (0, import_react24.useFloating)({
+  const { refs, update, context, floatingStyles } = (0, import_react27.useFloating)({
     open: show,
     ...floatingOptions
   });
-  const { isMounted, styles } = (0, import_react24.useTransitionStyles)(context);
-  const dismiss = (0, import_react24.useDismiss)(context, dismissOptions);
-  const { getReferenceProps, getFloatingProps } = (0, import_react24.useInteractions)([dismiss]);
+  const { isMounted, styles } = (0, import_react27.useTransitionStyles)(context);
+  const dismiss = (0, import_react27.useDismiss)(context, dismissOptions);
+  const { getReferenceProps, getFloatingProps } = (0, import_react27.useInteractions)([dismiss]);
   React3.useEffect(() => {
     update();
   }, [referencePos, update]);
@@ -2604,15 +2936,15 @@ function useMenuNavigation({
 }
 
 // src/hooks/use-tiptap-editor.ts
-var import_react25 = require("@tiptap/react");
-var import_react26 = require("react");
+var import_react28 = require("@tiptap/react");
+var import_react29 = require("react");
 function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = (0, import_react25.useCurrentEditor)();
-  const mainEditor = (0, import_react26.useMemo)(
+  const { editor: coreEditor } = (0, import_react28.useCurrentEditor)();
+  const mainEditor = (0, import_react29.useMemo)(
     () => providedEditor || coreEditor,
     [providedEditor, coreEditor]
   );
-  const editorState = (0, import_react25.useEditorState)({
+  const editorState = (0, import_react28.useEditorState)({
     editor: mainEditor,
     selector(context) {
       if (!context.editor) {
@@ -2678,7 +3010,7 @@ function filterSuggestionItems(items, query) {
 }
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var SuggestionMenu = ({
   editor: providedEditor,
   floatingOptions,
@@ -2704,13 +3036,13 @@ var SuggestionMenu = ({
     {
       placement: "bottom-start",
       middleware: [
-        (0, import_react27.offset)(10),
-        (0, import_react27.flip)({
+        (0, import_react30.offset)(10),
+        (0, import_react30.flip)({
           mainAxis: true,
           crossAxis: false
         }),
-        (0, import_react27.shift)(),
-        (0, import_react27.size)({
+        (0, import_react30.shift)(),
+        (0, import_react30.size)({
           apply({ availableHeight, elements }) {
             if (elements.floating) {
               const maxHeightValue = maxHeight ? Math.min(maxHeight, availableHeight) : availableHeight;
@@ -2849,7 +3181,7 @@ var SuggestionMenu = ({
   if (!isMounted || !show || !editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react27.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react30.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       ref,
@@ -2870,7 +3202,7 @@ var SuggestionMenu = ({
 };
 
 // src/extensions/variable/variable-suggestion.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var VariableSuggestionPluginKey = new import_state2.PluginKey("variableSuggestion");
 function VariableSuggestion({
   editor,
@@ -2920,7 +3252,7 @@ function VariableSuggestion({
     },
     [variables]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     SuggestionMenu,
     {
       editor,
@@ -2929,7 +3261,7 @@ function VariableSuggestion({
       items: getItems,
       allowSpaces: false,
       selector: "tiptap-variable-suggestion-menu",
-      children: (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VariableList, { ...props })
+      children: (props) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VariableList, { ...props })
     }
   );
 }
@@ -2951,7 +3283,7 @@ var VariableItem = ({
       itemRef.current.scrollIntoView(false);
     }
   }, [isSelected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "button",
     {
       ref: itemRef,
@@ -2960,8 +3292,8 @@ var VariableItem = ({
       onClick: onSelect,
       className: "w-full flex items-center justify-between gap-3 px-2 py-1.5 text-sm rounded-sm outline-none hover:bg-muted data-[active-state=on]:bg-muted",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-medium truncate", children: item.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("code", { className: "text-xs text-muted-foreground font-mono shrink-0", children: item.subtext })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-medium truncate", children: item.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", { className: "text-xs text-muted-foreground font-mono shrink-0", children: item.subtext })
       ]
     }
   );
@@ -2986,7 +3318,7 @@ var VariableList = ({
     Object.entries(groups).forEach(([groupLabel, groupData], groupIndex) => {
       const groupItems = groupData.items.map((item, itemIndex) => {
         const originalIndex = groupData.indices[itemIndex];
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           VariableItem,
           {
             item,
@@ -2998,8 +3330,8 @@ var VariableList = ({
       });
       if (groupLabel) {
         rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "py-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-2 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: groupLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "py-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-2 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: groupLabel }),
             groupItems
           ] }, `group-${groupIndex}-${groupLabel}`)
         );
@@ -3012,7 +3344,7 @@ var VariableList = ({
   if (!renderedItems.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       className: styles.card(),
@@ -3020,7 +3352,7 @@ var VariableList = ({
         maxHeight: "var(--suggestion-menu-max-height)",
         minWidth: "240px"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.body(), children: renderedItems })
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.body(), children: renderedItems })
     }
   );
 };
@@ -3028,7 +3360,10 @@ var VariableList = ({
 // src/hooks/use-create-editor.ts
 var import_extension_code = require("@kopexa/extension-code");
 var import_extension_controlref = require("@kopexa/extension-controlref");
+var import_extension_pages = require("@kopexa/extension-pages");
 var import_extension_table = require("@kopexa/extension-table");
+var import_extension_collaboration = require("@tiptap/extension-collaboration");
+var import_extension_collaboration_caret = require("@tiptap/extension-collaboration-caret");
 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"));
@@ -3041,14 +3376,14 @@ var import_extension_text_style = require("@tiptap/extension-text-style");
 var import_extension_typography = require("@tiptap/extension-typography");
 var import_extension_unique_id = require("@tiptap/extension-unique-id");
 var import_extensions = require("@tiptap/extensions");
-var import_react31 = require("@tiptap/react");
+var import_react34 = require("@tiptap/react");
 var import_starter_kit = require("@tiptap/starter-kit");
-var import_react32 = require("react");
+var import_react35 = require("react");
 
 // src/extensions/link/index.ts
 var import_extension_link = __toESM(require("@tiptap/extension-link"));
 var import_state3 = require("@tiptap/pm/state");
-var import_react28 = require("@tiptap/react");
+var import_react31 = require("@tiptap/react");
 var Link = import_extension_link.default.extend({
   inclusive: false,
   parseHTML() {
@@ -3077,7 +3412,7 @@ var Link = import_extension_link.default.extend({
             const { schema, doc, tr } = view.state;
             let range;
             if (schema.marks.link) {
-              range = (0, import_react28.getMarkRange)(doc.resolve(pos), schema.marks.link);
+              range = (0, import_react31.getMarkRange)(doc.resolve(pos), schema.marks.link);
             }
             if (!range) {
               return;
@@ -3104,8 +3439,8 @@ var Link = import_extension_link.default.extend({
 // src/extensions/selection/index.ts
 var import_state4 = require("@tiptap/pm/state");
 var import_view = require("@tiptap/pm/view");
-var import_react29 = require("@tiptap/react");
-var Selection = import_react29.Extension.create({
+var import_react32 = require("@tiptap/react");
+var Selection = import_react32.Extension.create({
   name: "selection",
   addProseMirrorPlugins() {
     const { editor } = this;
@@ -3120,7 +3455,7 @@ var Selection = import_react29.Extension.create({
             if (editor.isFocused === true || !editor.isEditable) {
               return null;
             }
-            if ((0, import_react29.isNodeSelection)(state.selection)) {
+            if ((0, import_react32.isNodeSelection)(state.selection)) {
               return null;
             }
             return import_view.DecorationSet.create(state.doc, [
@@ -3137,7 +3472,7 @@ var Selection = import_react29.Extension.create({
 
 // src/extensions/trailing-node/index.ts
 var import_state5 = require("@tiptap/pm/state");
-var import_react30 = require("@tiptap/react");
+var import_react33 = require("@tiptap/react");
 function nodeEqualsType({
   types,
   node
@@ -3148,7 +3483,7 @@ function nodeEqualsType({
   }
   return node.type === types;
 }
-var TrailingNode = import_react30.Extension.create({
+var TrailingNode = import_react33.Extension.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -3421,21 +3756,29 @@ var useCreateEditor = ({
   controlResolver,
   fileHandler: fileHandlerProp,
   enableVariables = false,
+  pagesOptions,
+  customExtensions,
+  disabled,
   ...options
 }) => {
   const fileHandlerFromContext = useEditorFile();
   const fileHandler = fileHandlerProp != null ? fileHandlerProp : fileHandlerFromContext;
-  const [extensions] = (0, import_react32.useState)(
+  const collaboration = useCollaboration();
+  const [extensions] = (0, import_react35.useState)(
     () => getExtensions({
       editable,
       placeholder,
       enableControls,
       controlResolver,
       fileHandler,
-      enableVariables
+      enableVariables,
+      pagesOptions,
+      collaboration,
+      customExtensions,
+      disabled
     })
   );
-  const editor = (0, import_react31.useEditor)({
+  const editor = (0, import_react34.useEditor)({
     editorProps: {
       attributes: {
         autocomplete: "off",
@@ -3454,7 +3797,7 @@ var useCreateEditor = ({
     content: safeParseContent(content),
     ...options
   });
-  (0, import_react32.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (editor && editor.isEditable !== editable) {
       editor.setEditable(editable);
     }
@@ -3467,8 +3810,13 @@ function getExtensions({
   enableControls = false,
   controlResolver,
   fileHandler,
-  enableVariables = false
+  enableVariables = false,
+  pagesOptions,
+  collaboration,
+  customExtensions,
+  disabled
 }) {
+  const isCollab = !!collaboration;
   const extensions = [
     import_starter_kit.StarterKit.configure({
       trailingNode: false,
@@ -3477,9 +3825,10 @@ function getExtensions({
       // we use our custom link extension
       code: false,
       // we use our own
-      codeBlock: false
+      codeBlock: false,
       // we use our own
-      // undoRedo should be dynamic based on collaboration, later.^
+      // Disable undoRedo when using collaboration — Yjs provides its own undo
+      undoRedo: isCollab ? false : void 0
     }),
     import_extension_text_align.TextAlign.configure({ types: ["heading", "paragraph"] }),
     import_extension_list.TaskList,
@@ -3530,12 +3879,41 @@ function getExtensions({
       emptyNodeClass: "is-empty with-slash"
     })
   ];
+  if (collaboration) {
+    extensions.push(
+      import_extension_collaboration.Collaboration.configure({
+        document: collaboration.ydoc,
+        field: "default"
+      })
+    );
+    if (collaboration.provider) {
+      extensions.push(
+        import_extension_collaboration_caret.CollaborationCaret.configure({
+          provider: collaboration.provider,
+          user: {
+            name: collaboration.user.name,
+            color: collaboration.user.color
+          }
+        })
+      );
+    }
+  }
   if (enableControls) {
     extensions.push(import_extension_controlref.ControlKit.configure({ resolver: controlResolver }));
   }
   if (enableVariables) {
     extensions.push(VariableNode);
   }
+  if (pagesOptions) {
+    extensions.push(
+      import_extension_pages.Pages.configure({
+        pageFormat: "A4",
+        header: "",
+        footer: "",
+        ...pagesOptions
+      })
+    );
+  }
   if (fileHandler) {
     extensions.push(
       import_extension_file_handler.FileHandler.configure({
@@ -3559,6 +3937,20 @@ function getExtensions({
       })
     );
   }
+  if (disabled) {
+    const disabledNames = new Set(
+      Object.entries(disabled).filter(([, value]) => value === false).map(([name]) => name)
+    );
+    const filtered = extensions.filter((ext) => {
+      const name = typeof ext === "object" && "name" in ext ? ext.name : ext.name;
+      return !name || !disabledNames.has(name);
+    });
+    extensions.length = 0;
+    extensions.push(...filtered);
+  }
+  if (customExtensions == null ? void 0 : customExtensions.length) {
+    extensions.push(...customExtensions);
+  }
   return extensions;
 }
 async function handleFileUpload(editor, file, fileHandler, pos) {
@@ -3621,18 +4013,18 @@ async function handleFileUpload(editor, file, fileHandler, pos) {
 
 // src/presets/basic/index.tsx
 var import_theme9 = require("@kopexa/theme");
-var import_react56 = require("@tiptap/react");
-var import_react57 = require("react");
+var import_react59 = require("@tiptap/react");
+var import_react60 = require("react");
 
 // src/context/editor-context.ts
 var import_react_utils = require("@kopexa/react-utils");
 var [EditorUIProvider, useEditorUIContext] = (0, import_react_utils.createContext)();
 
 // src/hooks/use-ui-editor-state.ts
-var import_react33 = require("@tiptap/react");
+var import_react36 = require("@tiptap/react");
 function useUiEditorState(editor) {
   var _a;
-  return (_a = (0, import_react33.useEditorState)({
+  return (_a = (0, import_react36.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => {
       if (!editor2) return defaultUiState;
@@ -3658,7 +4050,7 @@ var import_icons9 = require("@kopexa/icons");
 var import_input3 = require("@kopexa/input");
 var import_popover = require("@kopexa/popover");
 var import_toolbar = require("@kopexa/toolbar");
-var import_react34 = require("react");
+var import_react37 = require("react");
 
 // src/ui/link-popover/use-link-popover.ts
 var import_editor_utils2 = require("@kopexa/editor-utils");
@@ -3887,9 +4279,9 @@ function useLinkPopover(config) {
 }
 
 // src/ui/link-popover/link-popover.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var LinkButton = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_toolbar.ToolbarButton,
     {
       type: "button",
@@ -3901,7 +4293,7 @@ var LinkButton = ({ className, children, ...props }) => {
       title: "Link",
       isIconOnly: !children,
       ...props,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons9.LinkIcon, {})
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons9.LinkIcon, {})
     }
   );
 };
@@ -3914,8 +4306,8 @@ var LinkMain = ({
   isActive,
   onSave
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react34.useState)(!isActive || !url);
-  (0, import_react34.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react37.useState)(!isActive || !url);
+  (0, import_react37.useEffect)(() => {
     setIsEditing(!isActive || !url);
   }, [isActive, url]);
   const handleKeyDown = (event) => {
@@ -3938,8 +4330,8 @@ var LinkMain = ({
     setIsEditing(true);
   };
   if (isEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_input3.Input,
         {
           type: "url",
@@ -3954,7 +4346,7 @@ var LinkMain = ({
           autoFocus: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_button8.IconButton,
         {
           type: "button",
@@ -3963,13 +4355,13 @@ var LinkMain = ({
           onClick: handleSave,
           "aria-label": "Save link",
           disabled: !url,
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons9.CheckIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons9.CheckIcon, { className: "size-4" })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "a",
       {
         href: url,
@@ -3983,8 +4375,8 @@ var LinkMain = ({
         children: url
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_button8.IconButton,
         {
           type: "button",
@@ -3992,10 +4384,10 @@ var LinkMain = ({
           variant: "ghost",
           onClick: openLink,
           "aria-label": "Open link in new tab",
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons9.ExternalLinkIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons9.ExternalLinkIcon, { className: "size-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_button8.IconButton,
         {
           type: "button",
@@ -4003,10 +4395,10 @@ var LinkMain = ({
           variant: "ghost",
           onClick: handleEdit,
           "aria-label": "Edit link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons9.EditIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons9.EditIcon, { className: "size-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_button8.IconButton,
         {
           type: "button",
@@ -4014,7 +4406,7 @@ var LinkMain = ({
           variant: "ghost",
           onClick: removeLink,
           "aria-label": "Remove link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons9.TrashIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons9.TrashIcon, { className: "size-4" })
         }
       )
     ] })
@@ -4031,7 +4423,7 @@ function LinkPopover({
   ...buttonProps
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react37.useState)(false);
   const {
     isVisible,
     canSet,
@@ -4047,18 +4439,18 @@ function LinkPopover({
     hideWhenUnavailable,
     onSetLink
   });
-  const handleOnOpenChange = (0, import_react34.useCallback)(
+  const handleOnOpenChange = (0, import_react37.useCallback)(
     (nextIsOpen) => {
       setIsOpen(nextIsOpen);
       onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
     },
     [onOpenChange]
   );
-  const handleSetLink = (0, import_react34.useCallback)(() => {
+  const handleSetLink = (0, import_react37.useCallback)(() => {
     setLink();
     setIsOpen(false);
   }, [setLink]);
-  const handleClick = (0, import_react34.useCallback)(
+  const handleClick = (0, import_react37.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4066,7 +4458,7 @@ function LinkPopover({
     },
     [onClick, isOpen]
   );
-  (0, import_react34.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (autoOpenOnLinkActive && isActive) {
       setIsOpen(true);
     }
@@ -4074,17 +4466,17 @@ function LinkPopover({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     import_popover.Popover.Root,
     {
       open: isOpen,
       onOpenChange: handleOnOpenChange,
       spacing: "dense",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           import_popover.Popover.Trigger,
           {
-            render: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            render: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               LinkButton,
               {
                 "data-disabled": !canSet,
@@ -4098,7 +4490,7 @@ function LinkPopover({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_popover.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_popover.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           LinkMain,
           {
             url,
@@ -4120,9 +4512,9 @@ LinkButton.displayName = "LinkButton";
 var import_editor_utils3 = require("@kopexa/editor-utils");
 var import_icons10 = require("@kopexa/icons");
 var import_toolbar2 = require("@kopexa/toolbar");
-var import_react35 = require("@tiptap/react");
-var import_react36 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react38 = require("@tiptap/react");
+var import_react39 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var markIcons = {
   bold: import_icons10.BoldIcon,
   italic: import_icons10.ItalicIcon,
@@ -4168,7 +4560,7 @@ function shouldShowMarkButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react35.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
+    if ((0, import_react38.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
       return false;
     }
   }
@@ -4213,7 +4605,7 @@ var MarkButton = ({
     shortcutKey,
     formattedName
   } = useMarkState(editor, type, disabled);
-  const handleClick = (0, import_react36.useCallback)(
+  const handleClick = (0, import_react39.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && !isDisabled && editor) {
@@ -4222,7 +4614,7 @@ var MarkButton = ({
     },
     [onClick, isDisabled, editor, type]
   );
-  const show = (0, import_react36.useMemo)(() => {
+  const show = (0, import_react39.useMemo)(() => {
     return shouldShowMarkButton({
       editor,
       type,
@@ -4233,7 +4625,7 @@ var MarkButton = ({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_toolbar2.ToolbarButton,
     {
       type: "button",
@@ -4251,18 +4643,18 @@ var MarkButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, {})
     }
   );
 };
 
 // src/ui/bubble-menu/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function BubbleMenu({ editor }) {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_menus.BubbleMenu,
     {
       editor,
@@ -4282,15 +4674,15 @@ function BubbleMenu({ editor }) {
         offset: 8
       },
       className: "rounded-lg border bg-background shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_toolbar3.Toolbar, { radius: "md", border: "none", className: "p-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_toolbar3.ToolbarGroup, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkButton, { type: "bold" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkButton, { type: "italic" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkButton, { type: "strike" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkButton, { type: "code" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_toolbar3.Toolbar, { radius: "md", border: "none", className: "p-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_toolbar3.ToolbarGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MarkButton, { type: "bold" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MarkButton, { type: "italic" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MarkButton, { type: "strike" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MarkButton, { type: "code" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_toolbar3.ToolbarSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_toolbar3.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LinkPopover, { autoOpenOnLinkActive: false }) })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_toolbar3.ToolbarSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_toolbar3.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LinkPopover, { autoOpenOnLinkActive: false }) })
       ] })
     }
   );
@@ -4302,7 +4694,7 @@ var React9 = __toESM(require("react"));
 
 // src/hooks/use-floating-toolbar-visibility.ts
 var import_state6 = require("@tiptap/pm/state");
-var import_react37 = require("@tiptap/react");
+var import_react40 = require("@tiptap/react");
 var React8 = __toESM(require("react"));
 var HIDE_FLOATING_META = "hideFloatingToolbar";
 var selectNodeAndHideFloating = (editor, pos) => {
@@ -4404,37 +4796,37 @@ var import_button9 = require("@kopexa/button");
 var import_icons11 = require("@kopexa/icons");
 var import_input4 = require("@kopexa/input");
 var import_menus2 = require("@tiptap/react/menus");
-var import_react38 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react41 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function LinkBubble({ editor }) {
-  const [isEditing, setIsEditing] = (0, import_react38.useState)(false);
-  const [url, setUrl] = (0, import_react38.useState)("");
-  const getCurrentUrl = (0, import_react38.useCallback)(() => {
+  const [isEditing, setIsEditing] = (0, import_react41.useState)(false);
+  const [url, setUrl] = (0, import_react41.useState)("");
+  const getCurrentUrl = (0, import_react41.useCallback)(() => {
     if (!editor) return "";
     const attrs = editor.getAttributes("link");
     return attrs.href || "";
   }, [editor]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
     if (isLinkActive2) {
       setUrl(getCurrentUrl());
       setIsEditing(false);
     }
   }, [editor, getCurrentUrl]);
-  const handleOpenLink = (0, import_react38.useCallback)(() => {
+  const handleOpenLink = (0, import_react41.useCallback)(() => {
     const href = getCurrentUrl();
     if (href) {
       window.open(href, "_blank", "noopener,noreferrer");
     }
   }, [getCurrentUrl]);
-  const handleRemoveLink = (0, import_react38.useCallback)(() => {
+  const handleRemoveLink = (0, import_react41.useCallback)(() => {
     editor == null ? void 0 : editor.chain().focus().unsetLink().run();
   }, [editor]);
-  const handleEdit = (0, import_react38.useCallback)(() => {
+  const handleEdit = (0, import_react41.useCallback)(() => {
     setUrl(getCurrentUrl());
     setIsEditing(true);
   }, [getCurrentUrl]);
-  const handleSave = (0, import_react38.useCallback)(() => {
+  const handleSave = (0, import_react41.useCallback)(() => {
     if (url) {
       editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     } else {
@@ -4442,7 +4834,7 @@ function LinkBubble({ editor }) {
     }
     setIsEditing(false);
   }, [editor, url]);
-  const handleKeyDown = (0, import_react38.useCallback)(
+  const handleKeyDown = (0, import_react41.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -4458,7 +4850,7 @@ function LinkBubble({ editor }) {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_menus2.BubbleMenu,
     {
       editor,
@@ -4472,8 +4864,8 @@ function LinkBubble({ editor }) {
         offset: 8
       },
       className: "rounded-lg border bg-background shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           import_input4.Input,
           {
             type: "url",
@@ -4485,7 +4877,7 @@ function LinkBubble({ editor }) {
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           import_button9.IconButton,
           {
             type: "button",
@@ -4493,11 +4885,11 @@ function LinkBubble({ editor }) {
             variant: "ghost",
             onClick: handleSave,
             "aria-label": "Save link",
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.EditIcon, { className: "size-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons11.EditIcon, { className: "size-4" })
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "a",
           {
             href: getCurrentUrl(),
@@ -4511,8 +4903,8 @@ function LinkBubble({ editor }) {
             children: getCurrentUrl()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             import_button9.IconButton,
             {
               type: "button",
@@ -4520,10 +4912,10 @@ function LinkBubble({ editor }) {
               variant: "ghost",
               onClick: handleOpenLink,
               "aria-label": "Open link in new tab",
-              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.ExternalLinkIcon, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons11.ExternalLinkIcon, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             import_button9.IconButton,
             {
               type: "button",
@@ -4531,10 +4923,10 @@ function LinkBubble({ editor }) {
               variant: "ghost",
               onClick: handleEdit,
               "aria-label": "Edit link",
-              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.EditIcon, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons11.EditIcon, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             import_button9.IconButton,
             {
               type: "button",
@@ -4542,7 +4934,7 @@ function LinkBubble({ editor }) {
               variant: "ghost",
               onClick: handleRemoveLink,
               "aria-label": "Remove link",
-              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.TrashIcon, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons11.TrashIcon, { className: "size-4" })
             }
           )
         ] })
@@ -4566,8 +4958,8 @@ var React10 = __toESM(require("react"));
 // src/ui/table-button/use-table.ts
 var import_editor_utils5 = require("@kopexa/editor-utils");
 var import_icons12 = require("@kopexa/icons");
-var import_react39 = require("@tiptap/react");
-var import_react40 = require("react");
+var import_react42 = require("@tiptap/react");
+var import_react43 = require("react");
 function canToggle(editor) {
   if (!editor || !editor.isEditable) return false;
   if (!(0, import_editor_utils5.isNodeInSchema)("table", editor) || (0, import_editor_utils5.isNodeTypeSelected)(editor, ["image"])) {
@@ -4598,7 +4990,7 @@ function shouldShowButton(props) {
   if (!editor || !editor.isEditable) return false;
   if (!(0, import_editor_utils5.isNodeInSchema)("table", editor)) return false;
   if (hideWhenUnavailable) {
-    if ((0, import_react39.isNodeSelection)(editor.state.selection) || !canToggle) {
+    if ((0, import_react42.isNodeSelection)(editor.state.selection) || !canToggle) {
       return false;
     }
   }
@@ -4611,10 +5003,10 @@ function useTableBlock(config) {
     onToggled
   } = config || {};
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react40.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react43.useState)(true);
   const canToggleState = canToggle(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
-  (0, import_react40.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
@@ -4625,7 +5017,7 @@ function useTableBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react40.useCallback)(() => {
+  const handleToggle = (0, import_react43.useCallback)(() => {
     if (!editor) return false;
     const success = toggleTable(editor);
     if (success) {
@@ -5027,11 +5419,11 @@ function useSlashDropdownMenu(config) {
 }
 
 // src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var SlashDropdownMenu = (props) => {
   const { config, ...restProps } = props;
   const { getSlashMenuItems } = useSlashDropdownMenu(config);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     SuggestionMenu,
     {
       char: "/",
@@ -5041,7 +5433,7 @@ var SlashDropdownMenu = (props) => {
       selector: "tiptap-slash-dropdown-menu",
       items: ({ query, editor }) => filterSuggestionItems(getSlashMenuItems(editor), query),
       ...restProps,
-      children: (props2) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(List, { ...props2, config })
+      children: (props2) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(List, { ...props2, config })
     }
   );
 };
@@ -5061,13 +5453,13 @@ var Item = (props) => {
     }
   }, [isSelected]);
   const BadgeIcon = item.badge;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_button10.Button,
     {
       ref: itemRef,
       variant: "ghost",
       color: "default",
-      startContent: BadgeIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BadgeIcon, {}),
+      startContent: BadgeIcon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BadgeIcon, {}),
       "data-active-state": isSelected ? "on" : "off",
       onClick: onSelect,
       fullWidth: true,
@@ -5089,7 +5481,7 @@ var List = ({
     if (!showGroups) {
       items.forEach((item, index) => {
         rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             Item,
             {
               item,
@@ -5114,7 +5506,7 @@ var List = ({
     Object.entries(groups).forEach(([groupLabel, groupData], groupIndex) => {
       if (groupIndex > 0) {
         rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             import_separator.Separator,
             {
               orientation: "horizontal"
@@ -5125,7 +5517,7 @@ var List = ({
       }
       const groupItems = groupData.items.map((item, itemIndex) => {
         const originalIndex = groupData.indices[itemIndex];
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           Item,
           {
             item,
@@ -5137,13 +5529,13 @@ var List = ({
       });
       if (groupLabel) {
         rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "div",
             {
               className: styles.cardItemGroup(),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: styles.cardGroupLabel(), children: groupLabel }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: styles.cardGroup(), children: groupItems })
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: styles.cardGroupLabel(), children: groupLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: styles.cardGroup(), children: groupItems })
               ]
             },
             `group-${groupIndex}-${groupLabel}`
@@ -5158,14 +5550,14 @@ var List = ({
   if (!renderedItems.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       className: styles.card(),
       style: {
         maxHeight: "var(--suggestion-menu-max-height)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: styles.body(), children: renderedItems })
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: styles.body(), children: renderedItems })
     }
   );
 };
@@ -5175,7 +5567,7 @@ var import_icons25 = require("@kopexa/icons");
 var import_popover3 = require("@kopexa/popover");
 var import_toolbar10 = require("@kopexa/toolbar");
 var import_use_is_mobile2 = require("@kopexa/use-is-mobile");
-var import_react55 = require("react");
+var import_react58 = require("react");
 
 // src/hooks/use-cursor-visibility.ts
 var React13 = __toESM(require("react"));
@@ -5398,7 +5790,7 @@ function useBlockquote(config) {
 }
 
 // src/ui/blockquote-button/blockquote-button.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var BlockquoteButton = ({
   editor: providedEditor,
   text,
@@ -5434,7 +5826,7 @@ var BlockquoteButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     import_toolbar4.ToolbarButton,
     {
       type: "button",
@@ -5451,9 +5843,9 @@ var BlockquoteButton = ({
       onClick: handleClick,
       isIconOnly: !text && !children,
       ...buttonProps,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: text })
+      children: children != null ? 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 })
       ] })
     }
   );
@@ -5462,7 +5854,7 @@ var BlockquoteButton = ({
 // src/ui/codeblock-button/code-block-button.tsx
 var import_icons16 = require("@kopexa/icons");
 var import_toolbar5 = require("@kopexa/toolbar");
-var import_react41 = require("react");
+var import_react44 = require("react");
 
 // src/ui/codeblock-button/use-code-block.ts
 var import_editor_utils9 = require("@kopexa/editor-utils");
@@ -5579,7 +5971,7 @@ function useCodeBlock(config) {
 }
 
 // src/ui/codeblock-button/code-block-button.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var CodeBlockButton = ({
   editor: providedEditor,
   text,
@@ -5596,7 +5988,7 @@ var CodeBlockButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react41.useCallback)(
+  const handleClick = (0, import_react44.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -5607,7 +5999,7 @@ var CodeBlockButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_toolbar5.ToolbarButton,
     {
       type: "button",
@@ -5624,7 +6016,7 @@ var CodeBlockButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons16.CodeblockIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons16.CodeblockIcon, {})
     }
   );
 };
@@ -5634,12 +6026,12 @@ var import_button11 = require("@kopexa/button");
 var import_icons18 = require("@kopexa/icons");
 var import_popover2 = require("@kopexa/popover");
 var import_toolbar7 = require("@kopexa/toolbar");
-var import_react43 = require("react");
+var import_react46 = require("react");
 
 // src/ui/color-highlight-button/color-highlight-button.tsx
 var import_theme8 = require("@kopexa/theme");
 var import_toolbar6 = require("@kopexa/toolbar");
-var import_react42 = require("react");
+var import_react45 = require("react");
 
 // src/ui/color-highlight-button/use-color-highlight.ts
 var import_editor_utils10 = require("@kopexa/editor-utils");
@@ -5805,7 +6197,7 @@ function useColorHighlight(config) {
 }
 
 // src/ui/color-highlight-button/color-highlight-button.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var ColorHighlightButton = ({
   editor: providedEditor,
   highlightColor,
@@ -5834,7 +6226,7 @@ var ColorHighlightButton = ({
     hideWhenUnavailable,
     onApplied
   });
-  const handleClick = (0, import_react42.useCallback)(
+  const handleClick = (0, import_react45.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -5842,7 +6234,7 @@ var ColorHighlightButton = ({
     },
     [handleColorHighlight, onClick]
   );
-  const buttonStyle = (0, import_react42.useMemo)(
+  const buttonStyle = (0, import_react45.useMemo)(
     () => ({
       ...style,
       "--highlight-color": highlightColor
@@ -5853,7 +6245,7 @@ var ColorHighlightButton = ({
     return null;
   }
   const styles = (0, import_theme8.colorHighlightButton)();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     import_toolbar6.ToolbarButton,
     {
       type: "button",
@@ -5872,15 +6264,15 @@ var ColorHighlightButton = ({
       isIconOnly: true,
       ...buttonProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "span",
           {
             "data-active-state": isActive ? "on" : "off",
             className: styles.mark()
           }
         ),
-        children || /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        children || /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "span",
             {
               style: { "--highlight-color": highlightColor }
@@ -5894,12 +6286,12 @@ var ColorHighlightButton = ({
 };
 
 // src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var ColorHighlightPopoverButton = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   import_button11.IconButton,
   {
     type: "button",
@@ -5911,7 +6303,7 @@ var ColorHighlightPopoverButton = ({
     tooltip: "Highlight",
     isIconOnly: !children,
     ...props,
-    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons18.HighlighterIcon, {})
+    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons18.HighlighterIcon, {})
   }
 );
 function ColorHighlightPopoverContent({
@@ -5925,8 +6317,8 @@ function ColorHighlightPopoverContent({
   ])
 }) {
   const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = (0, import_react43.useRef)(null);
-  const menuItems = (0, import_react43.useMemo)(
+  const containerRef = (0, import_react46.useRef)(null);
+  const menuItems = (0, import_react46.useMemo)(
     () => [...colors, { label: "Remove highlight", value: "none" }],
     [colors]
   );
@@ -5944,13 +6336,13 @@ function ColorHighlightPopoverContent({
     },
     autoSelectFirstItem: false
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         className: "flex items-center gap-1 outline-none",
         "data-orientation": "horizontal",
-        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           ColorHighlightButton,
           {
             editor,
@@ -5963,8 +6355,8 @@ function ColorHighlightPopoverContent({
         ))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_toolbar7.ToolbarSeparator, { orientation: "vertical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_toolbar7.ToolbarSeparator, { orientation: "vertical" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       import_button11.IconButton,
       {
         onClick: handleRemoveHighlight,
@@ -5975,7 +6367,7 @@ function ColorHighlightPopoverContent({
         variant: "ghost",
         color: "default",
         "data-highlighted": selectedIndex === colors.length,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons18.BanIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons18.BanIcon, {})
       }
     ) })
   ] });
@@ -5994,18 +6386,18 @@ function ColorHighlightPopover({
   ...props
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react43.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react46.useState)(false);
   const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
     editor,
     hideWhenUnavailable,
     onApplied
   });
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       import_popover2.Popover.Trigger,
       {
-        render: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        render: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           ColorHighlightPopoverButton,
           {
             disabled: !canColorHighlight2,
@@ -6019,7 +6411,7 @@ function ColorHighlightPopover({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
   ] });
 }
 
@@ -6028,7 +6420,7 @@ var import_button13 = require("@kopexa/button");
 var import_dropdown_menu = require("@kopexa/dropdown-menu");
 var import_editor_utils12 = require("@kopexa/editor-utils");
 var import_icons20 = require("@kopexa/icons");
-var import_react45 = require("@tiptap/react");
+var import_react48 = require("@tiptap/react");
 var React19 = __toESM(require("react"));
 
 // src/ui/heading-button/index.tsx
@@ -6038,7 +6430,7 @@ var import_icons19 = require("@kopexa/icons");
 var React18 = __toESM(require("react"));
 
 // src/ui/heading-button/utils.ts
-var import_react44 = require("@tiptap/react");
+var import_react47 = require("@tiptap/react");
 var headingShortcutKeys = {
   1: "Ctrl-Alt-1",
   2: "Ctrl-Alt-2",
@@ -6079,7 +6471,7 @@ function shouldShowHeadingButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react44.isNodeSelection)(editor.state.selection)) {
+    if ((0, import_react47.isNodeSelection)(editor.state.selection)) {
       return false;
     }
   }
@@ -6090,7 +6482,7 @@ function getFormattedHeadingName(level) {
 }
 
 // src/ui/heading-button/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var headingIcons = {
   1: import_icons19.HeadingOneIcon,
   2: import_icons19.HeadingTwoIcon,
@@ -6156,7 +6548,7 @@ var HeadingButton = ({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_button12.Button,
     {
       type: "button",
@@ -6172,7 +6564,7 @@ var HeadingButton = ({
       tooltip: formattedName,
       shortcutKeys: shortcutKey,
       onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, {}),
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, {}),
       ...buttonProps,
       ref,
       children: children || text
@@ -6181,7 +6573,7 @@ var HeadingButton = ({
 };
 
 // src/ui/heading-dropdown-menu/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function HeadingDropdownMenu({
   editor: providedEditor,
   levels = [1, 2, 3, 4, 5, 6],
@@ -6201,13 +6593,13 @@ function HeadingDropdownMenu({
     [onOpenChange]
   );
   const getActiveIcon = React19.useCallback(() => {
-    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons20.HeadingIcon, {});
+    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons20.HeadingIcon, {});
     const activeLevel = levels.find(
       (level) => editor.isActive("heading", { level })
     );
-    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons20.HeadingIcon, {});
+    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons20.HeadingIcon, {});
     const ActiveIcon = headingIcons[activeLevel];
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ActiveIcon, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ActiveIcon, {});
   }, [editor, levels]);
   const canToggleAnyHeading = React19.useCallback(() => {
     if (!editor) return false;
@@ -6222,7 +6614,7 @@ function HeadingDropdownMenu({
       return false;
     }
     if (hideWhenUnavailable) {
-      if ((0, import_react45.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
+      if ((0, import_react48.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
         return false;
       }
     }
@@ -6231,8 +6623,8 @@ function HeadingDropdownMenu({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       import_button13.Button,
       {
         type: "button",
@@ -6245,12 +6637,12 @@ function HeadingDropdownMenu({
         "aria-label": "Format text as heading",
         "aria-pressed": isAnyHeadingActive,
         tooltip: "Heading",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons20.ChevronDownIcon, {}),
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons20.ChevronDownIcon, {}),
         ...props,
         children: getActiveIcon()
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       HeadingButton,
       {
         editor,
@@ -6269,16 +6661,16 @@ var import_button15 = require("@kopexa/button");
 var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
 var import_editor_utils14 = require("@kopexa/editor-utils");
 var import_icons22 = require("@kopexa/icons");
-var import_react48 = require("@tiptap/react");
-var import_react49 = require("react");
+var import_react51 = require("@tiptap/react");
+var import_react52 = require("react");
 
 // src/ui/list-button/index.tsx
 var import_button14 = require("@kopexa/button");
 var import_editor_utils13 = require("@kopexa/editor-utils");
 var import_icons21 = require("@kopexa/icons");
-var import_react46 = require("@tiptap/react");
-var import_react47 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react49 = require("@tiptap/react");
+var import_react50 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var listOptions = [
   {
     label: "Bullet List",
@@ -6352,7 +6744,7 @@ function shouldShowListButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react46.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
+    if ((0, import_react49.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
       return false;
     }
   }
@@ -6387,7 +6779,7 @@ var ListButton = ({
     type
   );
   const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons21.ListIcon;
-  const handleClick = (0, import_react47.useCallback)(
+  const handleClick = (0, import_react50.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && editor) {
@@ -6396,7 +6788,7 @@ var ListButton = ({
     },
     [onClick, editor, type]
   );
-  const show = (0, import_react47.useMemo)(() => {
+  const show = (0, import_react50.useMemo)(() => {
     return shouldShowListButton({
       editor,
       type,
@@ -6407,7 +6799,7 @@ var ListButton = ({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_button14.Button,
     {
       type: "button",
@@ -6421,7 +6813,7 @@ var ListButton = ({
       tooltip: (listOption == null ? void 0 : listOption.label) || type,
       shortcutKeys: shortcutKey,
       onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, {}),
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, {}),
       ...buttonProps,
       ref,
       children: children || text
@@ -6430,7 +6822,7 @@ var ListButton = ({
 };
 
 // src/ui/list-dropdown-menu/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function canToggleAnyList(editor, listTypes) {
   if (!editor) return false;
   return listTypes.some((type) => canToggleList(editor, type));
@@ -6450,24 +6842,24 @@ function shouldShowListDropdown(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react48.isNodeSelection)(editor.state.selection) || !canToggleAny) {
+    if ((0, import_react51.isNodeSelection)(editor.state.selection) || !canToggleAny) {
       return false;
     }
   }
   return true;
 }
 function useListDropdownState(editor, availableTypes) {
-  const [isOpen, setIsOpen] = (0, import_react49.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react52.useState)(false);
   const listInSchema = availableTypes.some(
     (type) => (0, import_editor_utils14.isNodeInSchema)(type, editor)
   );
-  const filteredLists = (0, import_react49.useMemo)(
+  const filteredLists = (0, import_react52.useMemo)(
     () => getFilteredListOptions(availableTypes),
     [availableTypes]
   );
   const canToggleAny = canToggleAnyList(editor, availableTypes);
   const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = (0, import_react49.useCallback)(
+  const handleOpenChange = (0, import_react52.useCallback)(
     (open, callback) => {
       setIsOpen(open);
       callback == null ? void 0 : callback(open);
@@ -6485,11 +6877,11 @@ function useListDropdownState(editor, availableTypes) {
   };
 }
 function useActiveListIcon(editor, filteredLists) {
-  return (0, import_react49.useCallback)(() => {
+  return (0, import_react52.useCallback)(() => {
     const activeOption = filteredLists.find(
       (option) => isListActive(editor, option.type)
     );
-    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons22.ListIcon, {});
+    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons22.ListIcon, {});
   }, [editor, filteredLists]);
 }
 function ListDropdownMenu({
@@ -6509,7 +6901,7 @@ function ListDropdownMenu({
     handleOpenChange
   } = useListDropdownState(editor, types);
   const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = (0, import_react49.useMemo)(() => {
+  const show = (0, import_react52.useMemo)(() => {
     return shouldShowListDropdown({
       editor,
       listTypes: types,
@@ -6518,15 +6910,15 @@ function ListDropdownMenu({
       canToggleAny
     });
   }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = (0, import_react49.useCallback)(
+  const handleOnOpenChange = (0, import_react52.useCallback)(
     (open) => handleOpenChange(open, onOpenChange),
     [handleOpenChange, onOpenChange]
   );
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_button15.Button,
       {
         type: "button",
@@ -6536,12 +6928,12 @@ function ListDropdownMenu({
         tabIndex: -1,
         "aria-label": "List options",
         tooltip: "List",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons22.ChevronDownIcon, {}),
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons22.ChevronDownIcon, {}),
         ...props,
         children: getActiveIcon()
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_dropdown_menu2.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_dropdown_menu2.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       ListButton,
       {
         editor,
@@ -6558,8 +6950,8 @@ function ListDropdownMenu({
 
 // src/ui/table-button/index.tsx
 var import_toolbar8 = require("@kopexa/toolbar");
-var import_react50 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react53 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var TableButton = ({
   editor: providedEditor,
   text,
@@ -6583,7 +6975,7 @@ var TableButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react50.useCallback)(
+  const handleClick = (0, import_react53.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -6594,7 +6986,7 @@ var TableButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_toolbar8.ToolbarButton,
     {
       type: "button",
@@ -6610,9 +7002,9 @@ var TableButton = ({
       onClick: handleClick,
       isIconOnly: !text && !children,
       ...buttonProps,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: text })
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, {}),
+        text && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: text })
       ] })
     }
   );
@@ -6620,12 +7012,12 @@ var TableButton = ({
 
 // src/ui/text-align-button/text-align-button.tsx
 var import_button16 = require("@kopexa/button");
-var import_react52 = require("react");
+var import_react55 = require("react");
 
 // src/ui/text-align-button/use-text-align.ts
 var import_editor_utils15 = require("@kopexa/editor-utils");
 var import_icons23 = require("@kopexa/icons");
-var import_react51 = require("react");
+var import_react54 = require("react");
 var TEXT_ALIGN_SHORTCUT_KEYS = {
   left: "mod+shift+l",
   center: "mod+shift+e",
@@ -6683,10 +7075,10 @@ function useTextAlign(config) {
     onAligned
   } = config;
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react51.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react54.useState)(true);
   const canAlign = canSetTextAlign(editor, align);
   const isActive = isTextAlignActive(editor, align);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton5({ editor, align, hideWhenUnavailable }));
@@ -6697,7 +7089,7 @@ function useTextAlign(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable, align]);
-  const handleTextAlign = (0, import_react51.useCallback)(() => {
+  const handleTextAlign = (0, import_react54.useCallback)(() => {
     if (!editor) return false;
     const success = setTextAlign(editor, align);
     if (success) {
@@ -6717,7 +7109,7 @@ function useTextAlign(config) {
 }
 
 // src/ui/text-align-button/text-align-button.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var TextAlignButton = ({
   editor: providedEditor,
   align,
@@ -6744,7 +7136,7 @@ var TextAlignButton = ({
     hideWhenUnavailable,
     onAligned
   });
-  const handleClick = (0, import_react52.useCallback)(
+  const handleClick = (0, import_react55.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (e.defaultPrevented) return;
@@ -6755,7 +7147,7 @@ var TextAlignButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_button16.IconButton,
     {
       type: "button",
@@ -6771,19 +7163,19 @@ var TextAlignButton = ({
       shortcutKeys,
       onClick: handleClick,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, {})
     }
   );
 };
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
 var import_toolbar9 = require("@kopexa/toolbar");
-var import_react54 = require("react");
+var import_react57 = require("react");
 
 // src/ui/undo-redo-button/use-undo-redo.ts
 var import_editor_utils16 = require("@kopexa/editor-utils");
 var import_icons24 = require("@kopexa/icons");
-var import_react53 = require("react");
+var import_react56 = require("react");
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
   redo: "mod+shift+z"
@@ -6823,9 +7215,9 @@ function useUndoRedo(config) {
     onExecuted
   } = config;
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react53.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react56.useState)(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!editor) return;
     const handleUpdate = () => {
       setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable, action }));
@@ -6836,7 +7228,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = (0, import_react53.useCallback)(() => {
+  const handleAction = (0, import_react56.useCallback)(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -6855,7 +7247,7 @@ function useUndoRedo(config) {
 }
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var UndoRedoButton = ({
   editor: providedEditor,
   action,
@@ -6874,7 +7266,7 @@ var UndoRedoButton = ({
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = (0, import_react54.useCallback)(
+  const handleClick = (0, import_react57.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -6885,7 +7277,7 @@ var UndoRedoButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_toolbar9.ToolbarButton,
     {
       type: "button",
@@ -6900,13 +7292,13 @@ var UndoRedoButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, {})
     }
   );
 };
 
 // src/presets/basic/editor-header.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var EditorHeader = ({
   editor: providedEditor,
   variant
@@ -6916,7 +7308,7 @@ var EditorHeader = ({
   const isMobile = (0, import_use_is_mobile2.useIsMobile)();
   const windowSize = useWindowSize();
   const { styles } = useEditorUIContext();
-  const toolbarRef = (0, import_react55.useRef)(null);
+  const toolbarRef = (0, import_react58.useRef)(null);
   const bodyRect = useCursorVisibility({
     editor,
     overlayHeight: (_b = (_a = toolbarRef.current) == null ? void 0 : _a.getBoundingClientRect().height) != null ? _b : 0
@@ -6925,7 +7317,7 @@ var EditorHeader = ({
     return null;
   }
   const ToolbarContent = variant === "comment" ? CommentToolbarContent : variant === "field" ? FieldToolbarContent : MainToolbarContent;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     import_toolbar10.Toolbar,
     {
       sticky: true,
@@ -6935,54 +7327,54 @@ var EditorHeader = ({
         bottom: `calc(100% - ${windowSize.height - bodyRect.y}px)`
       } : {},
       className: styles.toolbar(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ToolbarContent, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ToolbarContent, {})
     }
   ) });
 };
-var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(UndoRedoButton, { action: "undo" }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(UndoRedoButton, { action: "redo" })
+var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UndoRedoButton, { action: "undo" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UndoRedoButton, { action: "redo" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(BlockquoteButton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CodeBlockButton, {})
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BlockquoteButton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CodeBlockButton, {})
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "code" }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "underline" }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorHighlightPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LinkPopover, {})
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "bold" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "italic" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "strike" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "code" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "underline" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColorHighlightPopover, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkPopover, {})
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TableButton, {}) }),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MoreOptions, { hideWhenUnavailable: true })
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TableButton, {}) }),
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MoreOptions, { hideWhenUnavailable: true })
 ] });
-var CommentToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "code" })
+var CommentToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "bold" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "italic" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "strike" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "code" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LinkPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkPopover, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
   ] })
 ] });
-var FieldToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "bold" }),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "italic" }),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "strike" }),
-  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LinkPopover, {})
+var FieldToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "bold" }),
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "italic" }),
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "strike" }),
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkPopover, {})
 ] });
 function MoreOptions({
   editor: providedEditor,
@@ -6990,8 +7382,8 @@ function MoreOptions({
   ...props
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [show, setShow] = (0, import_react55.useState)(false);
-  (0, import_react55.useEffect)(() => {
+  const [show, setShow] = (0, import_react58.useState)(false);
+  (0, import_react58.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setShow(
@@ -7010,13 +7402,13 @@ function MoreOptions({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_popover3.Popover.Root, { spacing: "dense", width: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_popover3.Popover.Root, { spacing: "dense", width: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         import_popover3.Popover.Trigger,
         {
-          render: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          render: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             import_toolbar10.ToolbarButton,
             {
               type: "button",
@@ -7028,29 +7420,29 @@ function MoreOptions({
               title: "More options",
               isIconOnly: true,
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons25.MoreVerticalIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons25.MoreVerticalIcon, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         import_popover3.Popover.Content,
         {
           side: "top",
           align: "end",
           alignOffset: 4,
           sideOffset: 4,
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.Toolbar, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "superscript" }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "subscript" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.Toolbar, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "superscript" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "subscript" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarSeparator, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TextAlignButton, { align: "left" }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TextAlignButton, { align: "center" }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TextAlignButton, { align: "right" }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TextAlignButton, { align: "justify" })
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextAlignButton, { align: "left" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextAlignButton, { align: "center" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextAlignButton, { align: "right" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextAlignButton, { align: "justify" })
             ] })
           ] })
         }
@@ -7082,7 +7474,7 @@ function shouldShowMoreOptions(params) {
 }
 
 // src/presets/basic/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var BasicEditor = ({
   variant,
   bordered,
@@ -7090,39 +7482,53 @@ var BasicEditor = ({
   variables,
   variableValues,
   showToolbar = true,
+  pagesOptions,
   ...options
 }) => {
   const editor = useCreateEditor({
     content,
     enableVariables: !!(variables == null ? void 0 : variables.length),
+    pagesOptions,
     ...options
   });
   const styles = (0, import_theme9.editorBasic)({ variant, bordered });
-  const resolveVariable = (0, import_react57.useCallback)(
+  const resolveVariable = (0, import_react60.useCallback)(
     (name) => variableValues == null ? void 0 : variableValues[name],
     [variableValues]
   );
   if (!editor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LoadingSpinner, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LoadingSpinner, {});
   }
   const isBottomToolbar = variant === "field";
   const hasVariables = variables && variables.length > 0;
-  const editorContent = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react56.EditorContext.Provider, { value: { editor }, children: [
-    showToolbar && !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EditorHeader, { editor, variant }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EditorContentArea, { variant, variables }),
-    showToolbar && isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EditorHeader, { editor, variant })
+  const hasPagination = !!pagesOptions;
+  const editorContent = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react59.EditorContext.Provider, { value: { editor }, children: [
+    showToolbar && !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EditorHeader, { editor, variant }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      EditorContentArea,
+      {
+        variant,
+        variables,
+        hasPagination
+      }
+    ),
+    showToolbar && isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EditorHeader, { editor, variant })
   ] }) }) });
   if (hasVariables) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableProvider, { variables, resolveVariable, children: editorContent });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariableProvider, { variables, resolveVariable, children: editorContent });
   }
   return editorContent;
 };
-var EditorContentArea = ({ variant, variables }) => {
+var EditorContentArea = ({
+  variant,
+  variables,
+  hasPagination
+}) => {
   const styles = (0, import_theme9.editorBasic)({ variant });
-  const { editor } = (0, import_react57.useContext)(import_react56.EditorContext);
+  const { editor } = (0, import_react60.useContext)(import_react59.EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
-  const handleKeyDown = (0, import_react57.useCallback)(
+  const handleKeyDown = (0, import_react60.useCallback)(
     (e) => {
       if (!(editor == null ? void 0 : editor.isFocused)) return;
       const isMod = e.metaKey || e.ctrlKey;
@@ -7161,33 +7567,34 @@ var EditorContentArea = ({ variant, variables }) => {
     return null;
   }
   const isEditable = editor.isEditable;
+  const contentClassName = hasPagination ? "w-full min-w-0 h-auto min-h-0" : styles.content();
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: Wrapper intercepts keyboard shortcuts to prevent propagation
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: styles.wrapper(), onKeyDown: handleKeyDown, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-        import_react56.EditorContent,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: styles.wrapper(), onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        import_react59.EditorContent,
         {
           editor,
           role: "presentation",
-          className: styles.content(),
+          className: contentClassName,
           style: {
             cursor: isDragging ? "grabbing" : "auto"
           },
           children: [
-            isEditable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SlashDropdownMenu, {}),
-            isEditable && variables && variables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableSuggestion, { editor, variables })
+            isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SlashDropdownMenu, {}),
+            isEditable && variables && variables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariableSuggestion, { editor, variables })
           ]
         }
       ),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BubbleMenu, { editor }),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkBubble, { editor })
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(BubbleMenu, { editor }),
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinkBubble, { editor })
     ] })
   );
 };
 function LoadingSpinner({ text = "Connecting..." }) {
   const styles = (0, import_theme9.editorSpinner)();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: styles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: styles.content(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: styles.content(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "svg",
       {
         className: styles.svg(),
@@ -7195,9 +7602,9 @@ function LoadingSpinner({ text = "Connecting..." }) {
         fill: "none",
         viewBox: "0 0 24 24",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("title", { children: "Loading Spinner" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("title", { children: "Loading Spinner" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "path",
             {
               className: styles.path(),
@@ -7207,12 +7614,13 @@ function LoadingSpinner({ text = "Connecting..." }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: styles.text(), children: text })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.text(), children: text })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CalloutNode,
+  CollaborationProvider,
   Editor,
   EditorFileProvider,
   ImageNode,
@@ -7226,12 +7634,17 @@ function LoadingSpinner({ text = "Connecting..." }) {
   VariableSuggestion,
   convertFileToBase64,
   extractVariablesFromContent,
+  generateColorFromId,
   getExtensions,
   handleImageUpload,
   isAllowedUri,
   sanitizeUrl,
+  useCollaboration,
+  useCollaborationRequired,
+  useDocumentVisibility,
   useEditorFile,
   useEditorFileRequired,
+  useIdle,
   useVariables,
   useVariablesWithFallback
 });