@kopexa/tiptap 17.10.0 → 17.10.2

package/dist/index.mjs

@@ -373,11 +373,30 @@ import {
 import { callout } from "@kopexa/theme";
 import {
   NodeViewContent,
-  NodeViewWrapper,
-  useEditorState
+  NodeViewWrapper
 } from "@tiptap/react";
 import { useMemo as useMemo3 } from "react";
 
+// src/hooks/use-editor-editable.ts
+import { useCallback as useCallback3, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useEditorEditable(editor) {
+  const subscribe2 = useCallback3(
+    (callback) => {
+      if (!editor) return () => {
+      };
+      editor.on("transaction", callback);
+      return () => editor.off("transaction", callback);
+    },
+    [editor]
+  );
+  const getSnapshot2 = useCallback3(() => {
+    var _a;
+    return (_a = editor == null ? void 0 : editor.isEditable) != null ? _a : false;
+  }, [editor]);
+  const getServerSnapshot2 = useCallback3(() => false, []);
+  return useSyncExternalStore2(subscribe2, getSnapshot2, getServerSnapshot2);
+}
+
 // src/extensions/callout/callout-settings.tsx
 import { Button, IconButton } from "@kopexa/button";
 import { Dialog } from "@kopexa/dialog";
@@ -385,7 +404,7 @@ import { SettingsIcon } from "@kopexa/icons";
 import { Input } from "@kopexa/input";
 import { Label } from "@kopexa/label";
 import { Select } from "@kopexa/select";
-import { useCallback as useCallback3, useEffect as useEffect3, useState as useState3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3, useState as useState3 } from "react";
 import { useIntl } from "react-intl";
 
 // src/extensions/callout/messages.ts
@@ -470,7 +489,7 @@ function CalloutSettings({
       setLocalAttrs(attrs);
     }
   }, [isOpen, attrs]);
-  const handleSave = useCallback3(() => {
+  const handleSave = useCallback4(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -478,17 +497,17 @@ function CalloutSettings({
     );
     setIsOpen(false);
   }, [editor, localAttrs, getPos]);
-  const handleCancel = useCallback3(() => {
+  const handleCancel = useCallback4(() => {
     setLocalAttrs(attrs);
     setIsOpen(false);
   }, [attrs]);
-  const handleVariantChange = useCallback3((value) => {
+  const handleVariantChange = useCallback4((value) => {
     setLocalAttrs((prev) => ({
       ...prev,
       variant: String(value)
     }));
   }, []);
-  const handleTitleChange = useCallback3(
+  const handleTitleChange = useCallback4(
     (e) => {
       const value = e.target.value;
       setLocalAttrs((prev) => ({
@@ -574,13 +593,7 @@ function getVariantIcon(variant, iconClass) {
 function CalloutNodeView({ editor, node, getPos }) {
   const attrs = node.attrs;
   const { variant = "info", title } = attrs;
-  const isEditable = useEditorState({
-    editor,
-    selector: ({ editor: e }) => {
-      var _a;
-      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
-    }
-  });
+  const isEditable = useEditorEditable(editor);
   const styles = useMemo3(
     () => callout({
       variant,
@@ -729,11 +742,8 @@ import {
   TrashIcon
 } from "@kopexa/icons";
 import { imagePlaceholder } from "@kopexa/theme";
-import {
-  NodeViewWrapper as NodeViewWrapper2,
-  useEditorState as useEditorState2
-} from "@tiptap/react";
-import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
+import { NodeViewWrapper as NodeViewWrapper2 } from "@tiptap/react";
+import { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
 import { useIntl as useIntl2 } from "react-intl";
 
 // src/extensions/image/messages.ts
@@ -772,18 +782,12 @@ function ImageNodeView({ editor, node, getPos }) {
   const intl = useIntl2();
   const fileHandler = useEditorFile();
   const { src, alt, title, uploadState, uploadProgress } = node.attrs;
-  const isEditable = useEditorState2({
-    editor,
-    selector: ({ editor: e }) => {
-      var _a2;
-      return (_a2 = e == null ? void 0 : e.isEditable) != null ? _a2 : false;
-    }
-  });
+  const isEditable = useEditorEditable(editor);
   const [resolvedUrl, setResolvedUrl] = useState4(null);
   const [resolveState, setResolveState] = useState4("idle");
   const retryCountRef = useRef4(0);
   const needsResolve = (_a = fileHandler == null ? void 0 : fileHandler.isReference(src)) != null ? _a : false;
-  const resolveImage = useCallback4(async () => {
+  const resolveImage = useCallback5(async () => {
     if (!src) return;
     if (!needsResolve) {
       setResolvedUrl(src);
@@ -808,11 +812,11 @@ function ImageNodeView({ editor, node, getPos }) {
   useEffect4(() => {
     resolveImage();
   }, [resolveImage]);
-  const handleRetry = useCallback4(() => {
+  const handleRetry = useCallback5(() => {
     retryCountRef.current += 1;
     resolveImage();
   }, [resolveImage]);
-  const handleRemove = useCallback4(() => {
+  const handleRemove = useCallback5(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.commands.deleteRange({
@@ -1025,11 +1029,8 @@ import {
   UploadIcon
 } from "@kopexa/icons";
 import { imagePlaceholder as imagePlaceholder2 } from "@kopexa/theme";
-import {
-  NodeViewWrapper as NodeViewWrapper3,
-  useEditorState as useEditorState3
-} from "@tiptap/react";
-import { useCallback as useCallback5, useMemo as useMemo5, useRef as useRef5, useState as useState5 } from "react";
+import { NodeViewWrapper as NodeViewWrapper3 } from "@tiptap/react";
+import { useCallback as useCallback6, useMemo as useMemo5, useRef as useRef5, useState as useState5 } from "react";
 import { useIntl as useIntl3 } from "react-intl";
 
 // src/extensions/image-upload/messages.ts
@@ -1070,18 +1071,12 @@ import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function ImageUploadNodeView({ editor, node, getPos }) {
   const intl = useIntl3();
   const fileHandler = useEditorFile();
-  const isEditable = useEditorState3({
-    editor,
-    selector: ({ editor: e }) => {
-      var _a;
-      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
-    }
-  });
+  const isEditable = useEditorEditable(editor);
   const [uploadState, setUploadState] = useState5("idle");
   const [uploadProgress, setUploadProgress] = useState5(0);
   const [isDragOver, setIsDragOver] = useState5(false);
   const fileInputRef = useRef5(null);
-  const handleRemove = useCallback5(() => {
+  const handleRemove = useCallback6(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.commands.deleteRange({
@@ -1089,7 +1084,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
       to: pos + node.nodeSize
     });
   }, [editor, getPos, node.nodeSize]);
-  const handleFileSelect = useCallback5(
+  const handleFileSelect = useCallback6(
     async (file) => {
       if (!fileHandler) return;
       const pos = getPos();
@@ -1118,7 +1113,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
     },
     [fileHandler, editor, getPos, node.nodeSize]
   );
-  const handleInputChange = useCallback5(
+  const handleInputChange = useCallback6(
     (e) => {
       var _a;
       const file = (_a = e.target.files) == null ? void 0 : _a[0];
@@ -1129,7 +1124,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
     },
     [handleFileSelect]
   );
-  const handleDrop = useCallback5(
+  const handleDrop = useCallback6(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1141,23 +1136,23 @@ function ImageUploadNodeView({ editor, node, getPos }) {
     },
     [handleFileSelect]
   );
-  const handleDragOver = useCallback5((e) => {
+  const handleDragOver = useCallback6((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
-  const handleDragEnter = useCallback5((e) => {
+  const handleDragEnter = useCallback6((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(true);
   }, []);
-  const handleDragLeave = useCallback5((e) => {
+  const handleDragLeave = useCallback6((e) => {
     e.preventDefault();
     e.stopPropagation();
     if (!e.currentTarget.contains(e.relatedTarget)) {
       setIsDragOver(false);
     }
   }, []);
-  const handleClick = useCallback5(() => {
+  const handleClick = useCallback6(() => {
     var _a;
     if (uploadState === "idle" || uploadState === "error") {
       (_a = fileInputRef.current) == null ? void 0 : _a.click();
@@ -1409,13 +1404,10 @@ import { Button as Button2, IconButton as IconButton4 } from "@kopexa/button";
 import { Dialog as Dialog2 } from "@kopexa/dialog";
 import { EditIcon } from "@kopexa/icons";
 import { Label as Label2 } from "@kopexa/label";
-import {
-  NodeViewWrapper as NodeViewWrapper4,
-  useEditorState as useEditorState4
-} from "@tiptap/react";
+import { NodeViewWrapper as NodeViewWrapper4 } from "@tiptap/react";
 import katex from "katex";
 import "katex/dist/katex.min.css";
-import { useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo6, useState as useState6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect5, useMemo as useMemo6, useState as useState6 } from "react";
 import { useIntl as useIntl4 } from "react-intl";
 
 // src/extensions/math/messages.ts
@@ -1474,13 +1466,7 @@ function MathBlockView({ editor, node, getPos }) {
   const intl = useIntl4();
   const attrs = node.attrs;
   const { latex = "" } = attrs;
-  const isEditable = useEditorState4({
-    editor,
-    selector: ({ editor: e }) => {
-      var _a;
-      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
-    }
-  });
+  const isEditable = useEditorEditable(editor);
   const [isOpen, setIsOpen] = useState6(false);
   const [localLatex, setLocalLatex] = useState6(latex);
   const [error, setError] = useState6(null);
@@ -1516,7 +1502,7 @@ function MathBlockView({ editor, node, getPos }) {
       return null;
     }
   }, [localLatex, intl]);
-  const handleSave = useCallback6(() => {
+  const handleSave = useCallback7(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1524,12 +1510,12 @@ function MathBlockView({ editor, node, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localLatex, getPos]);
-  const handleCancel = useCallback6(() => {
+  const handleCancel = useCallback7(() => {
     setLocalLatex(latex);
     setError(null);
     setIsOpen(false);
   }, [latex]);
-  const handleOpenEditor = useCallback6(
+  const handleOpenEditor = useCallback7(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -1622,26 +1608,17 @@ import { ReactNodeViewRenderer as ReactNodeViewRenderer4 } from "@tiptap/react";
 import { Button as Button3 } from "@kopexa/button";
 import { Dialog as Dialog3 } from "@kopexa/dialog";
 import { Label as Label3 } from "@kopexa/label";
-import {
-  NodeViewWrapper as NodeViewWrapper5,
-  useEditorState as useEditorState5
-} from "@tiptap/react";
+import { NodeViewWrapper as NodeViewWrapper5 } from "@tiptap/react";
 import katex2 from "katex";
 import "katex/dist/katex.min.css";
-import { useCallback as useCallback7, useEffect as useEffect6, useMemo as useMemo7, useState as useState7 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect6, useMemo as useMemo7, useState as useState7 } from "react";
 import { useIntl as useIntl5 } from "react-intl";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function InlineMathView({ editor, node, getPos }) {
   const intl = useIntl5();
   const attrs = node.attrs;
   const { latex = "" } = attrs;
-  const isEditable = useEditorState5({
-    editor,
-    selector: ({ editor: e }) => {
-      var _a;
-      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
-    }
-  });
+  const isEditable = useEditorEditable(editor);
   const [isOpen, setIsOpen] = useState7(false);
   const [localLatex, setLocalLatex] = useState7(latex);
   const [error, setError] = useState7(null);
@@ -1677,7 +1654,7 @@ function InlineMathView({ editor, node, getPos }) {
       return null;
     }
   }, [localLatex, intl]);
-  const handleSave = useCallback7(() => {
+  const handleSave = useCallback8(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1685,12 +1662,12 @@ function InlineMathView({ editor, node, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localLatex, getPos]);
-  const handleCancel = useCallback7(() => {
+  const handleCancel = useCallback8(() => {
     setLocalLatex(latex);
     setError(null);
     setIsOpen(false);
   }, [latex]);
-  const handleClick = useCallback7(
+  const handleClick = useCallback8(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -1915,7 +1892,7 @@ import { ReactNodeViewRenderer as ReactNodeViewRenderer6 } from "@tiptap/react";
 import { ListIcon } from "@kopexa/icons";
 import { toc } from "@kopexa/theme";
 import { NodeViewWrapper as NodeViewWrapper6 } from "@tiptap/react";
-import { useCallback as useCallback9, useEffect as useEffect8, useMemo as useMemo8, useState as useState9 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect8, useMemo as useMemo8, useState as useState9 } from "react";
 import { useIntl as useIntl7 } from "react-intl";
 
 // src/extensions/toc/messages.ts
@@ -2000,7 +1977,7 @@ import { SettingsIcon as SettingsIcon2 } from "@kopexa/icons";
 import { Label as Label4 } from "@kopexa/label";
 import { Select as Select2 } from "@kopexa/select";
 import { Switch } from "@kopexa/switch";
-import { useCallback as useCallback8, useEffect as useEffect7, useState as useState8 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect7, useState as useState8 } from "react";
 import { useIntl as useIntl6 } from "react-intl";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var HEADING_LEVELS = [
@@ -2020,7 +1997,7 @@ function TocSettings({ editor, attrs, getPos }) {
       setLocalAttrs(attrs);
     }
   }, [isOpen, attrs]);
-  const handleSave = useCallback8(() => {
+  const handleSave = useCallback9(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -2028,11 +2005,11 @@ function TocSettings({ editor, attrs, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localAttrs, getPos]);
-  const handleCancel = useCallback8(() => {
+  const handleCancel = useCallback9(() => {
     setLocalAttrs(attrs);
     setIsOpen(false);
   }, [attrs]);
-  const handleMinLevelChange = useCallback8((value) => {
+  const handleMinLevelChange = useCallback9((value) => {
     const minLevel = Number.parseInt(String(value), 10);
     setLocalAttrs((prev) => ({
       ...prev,
@@ -2041,7 +2018,7 @@ function TocSettings({ editor, attrs, getPos }) {
       maxLevel: Math.max(prev.maxLevel, minLevel)
     }));
   }, []);
-  const handleMaxLevelChange = useCallback8((value) => {
+  const handleMaxLevelChange = useCallback9((value) => {
     const maxLevel = Number.parseInt(String(value), 10);
     setLocalAttrs((prev) => ({
       ...prev,
@@ -2050,10 +2027,10 @@ function TocSettings({ editor, attrs, getPos }) {
       minLevel: Math.min(prev.minLevel, maxLevel)
     }));
   }, []);
-  const handleNumberedChange = useCallback8((checked) => {
+  const handleNumberedChange = useCallback9((checked) => {
     setLocalAttrs((prev) => ({ ...prev, numbered: checked }));
   }, []);
-  const handleStyleChange = useCallback8((value) => {
+  const handleStyleChange = useCallback9((value) => {
     setLocalAttrs((prev) => ({
       ...prev,
       style: String(value)
@@ -2203,7 +2180,7 @@ function TocNodeView({ editor, node, getPos }) {
     style = "default"
   } = attrs;
   const styles = useMemo8(() => toc({ style }), [style]);
-  const updateHeadings = useCallback9(() => {
+  const updateHeadings = useCallback10(() => {
     const items = [];
     const { doc } = editor.state;
     doc.descendants((docNode, pos) => {
@@ -2230,7 +2207,7 @@ function TocNodeView({ editor, node, getPos }) {
       editor.off("update", updateHeadings);
     };
   }, [editor, updateHeadings]);
-  const handleClick = useCallback9(
+  const handleClick = useCallback10(
     (pos, id) => {
       var _a;
       editor.chain().focus().setTextSelection(pos).run();
@@ -2383,10 +2360,7 @@ import { ReactNodeViewRenderer as ReactNodeViewRenderer7 } from "@tiptap/react";
 
 // src/extensions/variable/variable-view.tsx
 import { variableNode } from "@kopexa/theme";
-import {
-  NodeViewWrapper as NodeViewWrapper7,
-  useEditorState as useEditorState6
-} from "@tiptap/react";
+import { NodeViewWrapper as NodeViewWrapper7 } from "@tiptap/react";
 
 // src/extensions/variable/variable-context.tsx
 import * as React from "react";
@@ -2422,13 +2396,7 @@ function VariableNodeView({ node, editor }) {
   const attrs = node.attrs;
   const { name, fallback, category } = attrs;
   const context = useVariables();
-  const isEditable = useEditorState6({
-    editor,
-    selector: ({ editor: e }) => {
-      var _a2;
-      return (_a2 = e == null ? void 0 : e.isEditable) != null ? _a2 : true;
-    }
-  });
+  const isEditable = useEditorEditable(editor);
   const resolvedValue = (_a = context == null ? void 0 : context.resolveVariable) == null ? void 0 : _a.call(context, name);
   const hasValue = resolvedValue !== void 0 && resolvedValue !== "";
   const displayValue = resolvedValue || fallback;
@@ -4381,7 +4349,7 @@ import {
   EditorContext
 } from "@tiptap/react";
 import {
-  useCallback as useCallback38,
+  useCallback as useCallback39,
   useContext as useContext4
 } from "react";
 import { useIntl as useIntl19 } from "react-intl";
@@ -4391,10 +4359,10 @@ import { createContext as createContext4 } from "@kopexa/react-utils";
 var [EditorUIProvider, useEditorUIContext] = createContext4();
 
 // src/hooks/use-ui-editor-state.ts
-import { useEditorState as useEditorState7 } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
 function useUiEditorState(editor) {
   var _a;
-  return (_a = useEditorState7({
+  return (_a = useEditorState({
     editor,
     selector: ({ editor: editor2 }) => {
       if (!editor2) return defaultUiState;
@@ -4427,7 +4395,7 @@ import {
 import { Input as Input3 } from "@kopexa/input";
 import { Popover } from "@kopexa/popover";
 import { ToolbarButton } from "@kopexa/toolbar";
-import { useCallback as useCallback14, useEffect as useEffect16, useState as useState15 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect16, useState as useState15 } from "react";
 
 // src/ui/link-popover/use-link-popover.ts
 import { isMarkInSchema, useTiptapEditor as useTiptapEditor2 } from "@kopexa/editor-utils";
@@ -4816,18 +4784,18 @@ function LinkPopover({
     hideWhenUnavailable,
     onSetLink
   });
-  const handleOnOpenChange = useCallback14(
+  const handleOnOpenChange = useCallback15(
     (nextIsOpen) => {
       setIsOpen(nextIsOpen);
       onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
     },
     [onOpenChange]
   );
-  const handleSetLink = useCallback14(() => {
+  const handleSetLink = useCallback15(() => {
     setLink();
     setIsOpen(false);
   }, [setLink]);
-  const handleClick = useCallback14(
+  const handleClick = useCallback15(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4902,7 +4870,7 @@ import {
 } from "@kopexa/icons";
 import { ToolbarButton as ToolbarButton2 } from "@kopexa/toolbar";
 import { isNodeSelection as isNodeSelection2 } from "@tiptap/react";
-import { useCallback as useCallback15, useMemo as useMemo13 } from "react";
+import { useCallback as useCallback16, useMemo as useMemo13 } from "react";
 import { useIntl as useIntl9 } from "react-intl";
 
 // src/ui/messages.ts
@@ -5423,7 +5391,7 @@ var MarkButton = ({
     shortcutKey,
     formattedName
   } = useMarkState(editor, type, disabled);
-  const handleClick = useCallback15(
+  const handleClick = useCallback16(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && !isDisabled && editor) {
@@ -5614,14 +5582,14 @@ import { IconButton as IconButton7 } from "@kopexa/button";
 import { EditIcon as EditIcon3, ExternalLinkIcon as ExternalLinkIcon2, TrashIcon as TrashIcon4 } from "@kopexa/icons";
 import { Input as Input4 } from "@kopexa/input";
 import { BubbleMenu as TiptapBubbleMenu2 } from "@tiptap/react/menus";
-import { useCallback as useCallback17, useEffect as useEffect19, useState as useState17 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect19, useState as useState17 } from "react";
 import { useIntl as useIntl10 } from "react-intl";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 function LinkBubble({ editor }) {
   const intl = useIntl10();
   const [isEditing, setIsEditing] = useState17(false);
   const [url, setUrl] = useState17("");
-  const getCurrentUrl = useCallback17(() => {
+  const getCurrentUrl = useCallback18(() => {
     if (!editor) return "";
     const attrs = editor.getAttributes("link");
     return attrs.href || "";
@@ -5633,20 +5601,20 @@ function LinkBubble({ editor }) {
       setIsEditing(false);
     }
   }, [editor, getCurrentUrl]);
-  const handleOpenLink = useCallback17(() => {
+  const handleOpenLink = useCallback18(() => {
     const href = getCurrentUrl();
     if (href) {
       window.open(href, "_blank", "noopener,noreferrer");
     }
   }, [getCurrentUrl]);
-  const handleRemoveLink = useCallback17(() => {
+  const handleRemoveLink = useCallback18(() => {
     editor == null ? void 0 : editor.chain().focus().unsetLink().run();
   }, [editor]);
-  const handleEdit = useCallback17(() => {
+  const handleEdit = useCallback18(() => {
     setUrl(getCurrentUrl());
     setIsEditing(true);
   }, [getCurrentUrl]);
-  const handleSave = useCallback17(() => {
+  const handleSave = useCallback18(() => {
     if (url) {
       editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     } else {
@@ -5654,7 +5622,7 @@ function LinkBubble({ editor }) {
     }
     setIsEditing(false);
   }, [editor, url]);
-  const handleKeyDown = useCallback17(
+  const handleKeyDown = useCallback18(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -5807,7 +5775,7 @@ import {
 } from "@kopexa/editor-utils";
 import { TableIcon } from "@kopexa/icons";
 import { isNodeSelection as isNodeSelection4 } from "@tiptap/react";
-import { useCallback as useCallback18, useEffect as useEffect20, useState as useState18 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect20, useState as useState18 } from "react";
 import { useIntl as useIntl11 } from "react-intl";
 function canToggle(editor) {
   if (!editor || !editor.isEditable) return false;
@@ -5867,7 +5835,7 @@ function useTableBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = useCallback18(() => {
+  const handleToggle = useCallback19(() => {
     if (!editor) return false;
     const success = toggleTable(editor);
     if (success) {
@@ -6551,7 +6519,7 @@ import { useMemo as useMemo16, useRef as useRef11, useState as useState22 } from
 import { useTiptapEditor as useTiptapEditor8 } from "@kopexa/editor-utils";
 import { colorHighlightButton } from "@kopexa/theme";
 import { ToolbarButton as ToolbarButton3 } from "@kopexa/toolbar";
-import { useCallback as useCallback22, useMemo as useMemo15 } from "react";
+import { useCallback as useCallback23, useMemo as useMemo15 } from "react";
 
 // src/ui/color-highlight-button/use-color-highlight.ts
 import {
@@ -6752,7 +6720,7 @@ var ColorHighlightButton = ({
     hideWhenUnavailable,
     onApplied
   });
-  const handleClick = useCallback22(
+  const handleClick = useCallback23(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -6947,14 +6915,14 @@ import { DropdownMenu } from "@kopexa/dropdown-menu";
 import { isNodeInSchema as isNodeInSchema4, useTiptapEditor as useTiptapEditor11 } from "@kopexa/editor-utils";
 import { ChevronDownIcon, ListIcon as ListIcon4 } from "@kopexa/icons";
 import { isNodeSelection as isNodeSelection6 } from "@tiptap/react";
-import { useCallback as useCallback24, useMemo as useMemo18, useState as useState23 } from "react";
+import { useCallback as useCallback25, useMemo as useMemo18, useState as useState23 } from "react";
 
 // src/ui/list-button/index.tsx
 import { Button as Button7 } from "@kopexa/button";
 import { isNodeInSchema as isNodeInSchema3, useTiptapEditor as useTiptapEditor10 } from "@kopexa/editor-utils";
 import { ListIcon as ListIcon3, ListOrderedIcon as ListOrderedIcon2, ListTodoIcon as ListTodoIcon2 } from "@kopexa/icons";
 import { isNodeSelection as isNodeSelection5 } from "@tiptap/react";
-import { useCallback as useCallback23, useMemo as useMemo17 } from "react";
+import { useCallback as useCallback24, useMemo as useMemo17 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var listOptions = [
   {
@@ -7064,7 +7032,7 @@ var ListButton = ({
     type
   );
   const Icon = (listOption == null ? void 0 : listOption.icon) || ListIcon3;
-  const handleClick = useCallback23(
+  const handleClick = useCallback24(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && editor) {
@@ -7144,7 +7112,7 @@ function useListDropdownState(editor, availableTypes) {
   );
   const canToggleAny = canToggleAnyList(editor, availableTypes);
   const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = useCallback24(
+  const handleOpenChange = useCallback25(
     (open, callback) => {
       setIsOpen(open);
       callback == null ? void 0 : callback(open);
@@ -7162,7 +7130,7 @@ function useListDropdownState(editor, availableTypes) {
   };
 }
 function useActiveListIcon(editor, filteredLists) {
-  return useCallback24(() => {
+  return useCallback25(() => {
     const activeOption = filteredLists.find(
       (option) => isListActive(editor, option.type)
     );
@@ -7195,7 +7163,7 @@ function ListDropdownMenu({
       canToggleAny
     });
   }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = useCallback24(
+  const handleOnOpenChange = useCallback25(
     (open) => handleOpenChange(open, onOpenChange),
     [handleOpenChange, onOpenChange]
   );
@@ -7236,7 +7204,7 @@ function ListDropdownMenu({
 // src/ui/table-button/index.tsx
 import { useTiptapEditor as useTiptapEditor12 } from "@kopexa/editor-utils";
 import { ToolbarButton as ToolbarButton4 } from "@kopexa/toolbar";
-import { useCallback as useCallback25 } from "react";
+import { useCallback as useCallback26 } from "react";
 import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var TableButton = ({
   editor: providedEditor,
@@ -7261,7 +7229,7 @@ var TableButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = useCallback25(
+  const handleClick = useCallback26(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -7299,7 +7267,7 @@ var TableButton = ({
 // src/ui/text-align-button/text-align-button.tsx
 import { IconButton as IconButton9 } from "@kopexa/button";
 import { useTiptapEditor as useTiptapEditor14 } from "@kopexa/editor-utils";
-import { useCallback as useCallback27 } from "react";
+import { useCallback as useCallback28 } from "react";
 
 // src/ui/text-align-button/use-text-align.ts
 import {
@@ -7313,7 +7281,7 @@ import {
   AlignLeftIcon,
   AlignRightIcon
 } from "@kopexa/icons";
-import { useCallback as useCallback26, useEffect as useEffect25, useState as useState24 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect25, useState as useState24 } from "react";
 import { useIntl as useIntl14 } from "react-intl";
 var TEXT_ALIGN_SHORTCUT_KEYS = {
   left: "mod+shift+l",
@@ -7387,7 +7355,7 @@ function useTextAlign(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable, align]);
-  const handleTextAlign = useCallback26(() => {
+  const handleTextAlign = useCallback27(() => {
     if (!editor) return false;
     const success = setTextAlign(editor, align);
     if (success) {
@@ -7434,7 +7402,7 @@ var TextAlignButton = ({
     hideWhenUnavailable,
     onAligned
   });
-  const handleClick = useCallback27(
+  const handleClick = useCallback28(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (e.defaultPrevented) return;
@@ -7664,7 +7632,7 @@ var BlockquoteButton = ({
 import { useTiptapEditor as useTiptapEditor18 } from "@kopexa/editor-utils";
 import { CodeblockIcon as CodeblockIcon2 } from "@kopexa/icons";
 import { ToolbarButton as ToolbarButton6 } from "@kopexa/toolbar";
-import { useCallback as useCallback31 } from "react";
+import { useCallback as useCallback32 } from "react";
 
 // src/ui/codeblock-button/use-code-block.ts
 import {
@@ -7804,7 +7772,7 @@ var CodeBlockButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = useCallback31(
+  const handleClick = useCallback32(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -8001,7 +7969,7 @@ import { Button as Button10 } from "@kopexa/button";
 import { Chip } from "@kopexa/chip";
 import { useTiptapEditor as useTiptapEditor21 } from "@kopexa/editor-utils";
 import { parseShortcutKeys } from "@kopexa/shared-utils";
-import { useCallback as useCallback34 } from "react";
+import { useCallback as useCallback35 } from "react";
 
 // src/ui/text-button/use-text.ts
 import {
@@ -8015,7 +7983,7 @@ import {
 import { TypeIcon as TypeIcon2 } from "@kopexa/icons";
 import { useIsMobile as useIsMobile2 } from "@kopexa/use-is-mobile";
 import { NodeSelection as NodeSelection4, TextSelection as TextSelection4 } from "@tiptap/pm/state";
-import { useCallback as useCallback33, useEffect as useEffect28, useState as useState27 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect28, useState as useState27 } from "react";
 import { useHotkeys as useHotkeys2 } from "react-hotkeys-hook";
 var TEXT_SHORTCUT_KEY = "mod+alt+0";
 function canToggleText(editor, turnInto = true) {
@@ -8122,7 +8090,7 @@ function useText(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = useCallback33(() => {
+  const handleToggle = useCallback34(() => {
     if (!editor) return false;
     const success = toggleParagraph(editor);
     if (success) {
@@ -8185,7 +8153,7 @@ var TextButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = useCallback34(
+  const handleClick = useCallback35(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -8226,7 +8194,7 @@ var TextButton = ({
 import { useTiptapEditor as useTiptapEditor22 } from "@kopexa/editor-utils";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@kopexa/icons";
 import { NodeSelection as NodeSelection5 } from "@tiptap/pm/state";
-import { useCallback as useCallback35, useEffect as useEffect29, useMemo as useMemo20, useState as useState28 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect29, useMemo as useMemo20, useState as useState28 } from "react";
 import { useIntl as useIntl15 } from "react-intl";
 var TURN_INTO_BLOCKS = [
   "paragraph",
@@ -8347,7 +8315,7 @@ function useTurnIntoDropdown(config) {
       (opt) => blockTypes.includes(opt.type)
     );
   }, [blockTypes, translatedBlockTypeOptions]);
-  const handleOpenChange = useCallback35(
+  const handleOpenChange = useCallback36(
     (open) => {
       if (!editor || !canToggle3) return;
       setIsOpen(open);
@@ -8557,12 +8525,12 @@ TurnIntoDropdown.displayName = "TurnIntoDropdown";
 // src/ui/undo-redo-button/undo-redo-button.tsx
 import { useTiptapEditor as useTiptapEditor25 } from "@kopexa/editor-utils";
 import { ToolbarButton as ToolbarButton7 } from "@kopexa/toolbar";
-import { useCallback as useCallback37 } from "react";
+import { useCallback as useCallback38 } from "react";
 
 // src/ui/undo-redo-button/use-undo-redo.ts
 import { isNodeTypeSelected as isNodeTypeSelected7, useTiptapEditor as useTiptapEditor24 } from "@kopexa/editor-utils";
 import { RedoIcon, UndoIcon } from "@kopexa/icons";
-import { useCallback as useCallback36, useEffect as useEffect30, useState as useState29 } from "react";
+import { useCallback as useCallback37, useEffect as useEffect30, useState as useState29 } from "react";
 import { useIntl as useIntl17 } from "react-intl";
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
@@ -8617,7 +8585,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = useCallback36(() => {
+  const handleAction = useCallback37(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -8655,7 +8623,7 @@ var UndoRedoButton = ({
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = useCallback37(
+  const handleClick = useCallback38(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -8882,7 +8850,7 @@ var BasicEditor = ({
     ...options
   });
   const styles = editorBasic({ variant, bordered });
-  const resolveVariable = useCallback38(
+  const resolveVariable = useCallback39(
     (name) => variableValues == null ? void 0 : variableValues[name],
     [variableValues]
   );
@@ -8919,7 +8887,7 @@ var EditorContentArea = ({
   const { editor } = useContext4(EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
-  const handleKeyDown = useCallback38(
+  const handleKeyDown = useCallback39(
     (e) => {
       if (!(editor == null ? void 0 : editor.isFocused)) return;
       const isMod = e.metaKey || e.ctrlKey;