@kopexa/tiptap 17.7.0 → 17.7.2

package/dist/index.js

@@ -2751,13 +2751,14 @@ function VariableFillerDialog({
 }
 
 // src/extensions/variable/variable-suggestion.tsx
-var import_editor_utils = require("@kopexa/editor-utils");
+var import_editor_utils2 = require("@kopexa/editor-utils");
 var import_theme6 = require("@kopexa/theme");
 var import_state2 = require("@tiptap/pm/state");
 var React6 = __toESM(require("react"));
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
-var import_react30 = require("@floating-ui/react");
+var import_react28 = require("@floating-ui/react");
+var import_editor_utils = require("@kopexa/editor-utils");
 var import_state = require("@tiptap/pm/state");
 var import_suggestion = require("@tiptap/suggestion");
 var React5 = __toESM(require("react"));
@@ -2935,35 +2936,6 @@ function useMenuNavigation({
   };
 }
 
-// src/hooks/use-tiptap-editor.ts
-var import_react28 = require("@tiptap/react");
-var import_react29 = require("react");
-function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = (0, import_react28.useCurrentEditor)();
-  const mainEditor = (0, import_react29.useMemo)(
-    () => providedEditor || coreEditor,
-    [providedEditor, coreEditor]
-  );
-  const editorState = (0, import_react28.useEditorState)({
-    editor: mainEditor,
-    selector(context) {
-      if (!context.editor) {
-        return {
-          editor: null,
-          editorState: void 0,
-          canCommand: void 0
-        };
-      }
-      return {
-        editor: context.editor,
-        editorState: context.editor.state,
-        canCommand: context.editor.can
-      };
-    }
-  });
-  return editorState || { editor: null };
-}
-
 // src/ui/suggestion-menu/suggestion-menu-utils.ts
 function calculateStartPosition(cursorPosition, previousNode, triggerChar) {
   if (!(previousNode == null ? void 0 : previousNode.text) || !triggerChar) {
@@ -3020,7 +2992,7 @@ var SuggestionMenu = ({
   pluginKey = import_suggestion.SuggestionPluginKey,
   ...internalSuggestionProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils.useTiptapEditor)(providedEditor);
   const [show, setShow] = React5.useState(false);
   const [internalClientRect, setInternalClientRect] = React5.useState(null);
   const [internalCommand, setInternalCommand] = React5.useState(null);
@@ -3036,13 +3008,13 @@ var SuggestionMenu = ({
     {
       placement: "bottom-start",
       middleware: [
-        (0, import_react30.offset)(10),
-        (0, import_react30.flip)({
+        (0, import_react28.offset)(10),
+        (0, import_react28.flip)({
           mainAxis: true,
           crossAxis: false
         }),
-        (0, import_react30.shift)(),
-        (0, import_react30.size)({
+        (0, import_react28.shift)(),
+        (0, import_react28.size)({
           apply({ availableHeight, elements }) {
             if (elements.floating) {
               const maxHeightValue = maxHeight ? Math.min(maxHeight, availableHeight) : availableHeight;
@@ -3181,7 +3153,7 @@ var SuggestionMenu = ({
   if (!isMounted || !show || !editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react30.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react28.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       ref,
@@ -3276,7 +3248,7 @@ var VariableItem = ({
       '[data-selector="tiptap-variable-suggestion-menu"]'
     );
     if (!itemRef.current || !isSelected || !selector) return;
-    const overflow = (0, import_editor_utils.getElementOverflowPosition)(itemRef.current, selector);
+    const overflow = (0, import_editor_utils2.getElementOverflowPosition)(itemRef.current, selector);
     if (overflow === "top") {
       itemRef.current.scrollIntoView(true);
     } else if (overflow === "bottom") {
@@ -3376,14 +3348,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_react34 = require("@tiptap/react");
+var import_react32 = require("@tiptap/react");
 var import_starter_kit = require("@tiptap/starter-kit");
-var import_react35 = require("react");
+var import_react33 = 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_react31 = require("@tiptap/react");
+var import_react29 = require("@tiptap/react");
 var Link = import_extension_link.default.extend({
   inclusive: false,
   parseHTML() {
@@ -3412,7 +3384,7 @@ var Link = import_extension_link.default.extend({
             const { schema, doc, tr } = view.state;
             let range;
             if (schema.marks.link) {
-              range = (0, import_react31.getMarkRange)(doc.resolve(pos), schema.marks.link);
+              range = (0, import_react29.getMarkRange)(doc.resolve(pos), schema.marks.link);
             }
             if (!range) {
               return;
@@ -3436,11 +3408,290 @@ var Link = import_extension_link.default.extend({
   }
 });
 
+// src/extensions/node-alignment/index.ts
+var import_editor_utils3 = require("@kopexa/editor-utils");
+var import_core7 = require("@tiptap/core");
+function getToggleValue(targets, attributeName, inputValue) {
+  var _a, _b;
+  if (targets.length === 0) return null;
+  for (const target of targets) {
+    const currentValue = (_b = (_a = target.node.attrs) == null ? void 0 : _a[attributeName]) != null ? _b : null;
+    if (currentValue !== inputValue) {
+      return inputValue;
+    }
+  }
+  return null;
+}
+var NodeAlignment = import_core7.Extension.create({
+  name: "nodeAlignment",
+  addOptions() {
+    return {
+      types: ["paragraph", "heading", "blockquote", "tableCell", "tableHeader"],
+      useStyle: true,
+      textAlignValues: ["left", "center", "right", "justify"],
+      verticalAlignValues: ["top", "middle", "bottom"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          nodeTextAlign: {
+            default: null,
+            parseHTML: (element) => {
+              var _a;
+              const styleAlign = (_a = element.style) == null ? void 0 : _a.textAlign;
+              if (styleAlign && this.options.textAlignValues.includes(styleAlign)) {
+                return styleAlign;
+              }
+              const dataAlign = element.getAttribute("data-node-text-align");
+              if (dataAlign && this.options.textAlignValues.includes(dataAlign)) {
+                return dataAlign;
+              }
+              return null;
+            },
+            renderHTML: (attributes) => {
+              const align = attributes.nodeTextAlign;
+              if (!align || !this.options.textAlignValues.includes(align))
+                return {};
+              if (this.options.useStyle) {
+                return { style: `text-align: ${align}` };
+              } else {
+                return { "data-node-text-align": align };
+              }
+            }
+          },
+          nodeVerticalAlign: {
+            default: null,
+            parseHTML: (element) => {
+              var _a;
+              const styleVAlign = (_a = element.style) == null ? void 0 : _a.verticalAlign;
+              if (styleVAlign && this.options.verticalAlignValues.includes(styleVAlign)) {
+                return styleVAlign;
+              }
+              const dataVAlign = element.getAttribute(
+                "data-node-vertical-align"
+              );
+              if (dataVAlign && this.options.verticalAlignValues.includes(dataVAlign)) {
+                return dataVAlign;
+              }
+              return null;
+            },
+            renderHTML: (attributes) => {
+              const vAlign = attributes.nodeVerticalAlign;
+              if (!vAlign || !this.options.verticalAlignValues.includes(vAlign))
+                return {};
+              if (this.options.useStyle) {
+                return { style: `vertical-align: ${vAlign}` };
+              } else {
+                return { "data-node-vertical-align": vAlign };
+              }
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    const executeAlignmentCommand = (attributeName, getTargetValue) => {
+      return (inputValue) => ({ state, tr }) => {
+        const targets = (0, import_editor_utils3.getSelectedNodesOfType)(
+          state.selection,
+          this.options.types
+        );
+        if (targets.length === 0) return false;
+        const targetValue = getTargetValue(targets, inputValue);
+        return (0, import_editor_utils3.updateNodesAttr)(tr, targets, attributeName, targetValue);
+      };
+    };
+    return {
+      // TEXT ALIGN
+      setNodeTextAlign: executeAlignmentCommand(
+        "nodeTextAlign",
+        (_, inputValue) => {
+          if (!inputValue || !this.options.textAlignValues.includes(inputValue))
+            return null;
+          return inputValue;
+        }
+      ),
+      unsetNodeTextAlign: executeAlignmentCommand("nodeTextAlign", () => null),
+      toggleNodeTextAlign: executeAlignmentCommand(
+        "nodeTextAlign",
+        (targets, inputValue) => {
+          if (!inputValue || !this.options.textAlignValues.includes(inputValue))
+            return null;
+          return getToggleValue(targets, "nodeTextAlign", inputValue);
+        }
+      ),
+      // VERTICAL ALIGN
+      setNodeVAlign: executeAlignmentCommand(
+        "nodeVerticalAlign",
+        (_, inputValue) => {
+          if (!inputValue || !this.options.verticalAlignValues.includes(inputValue))
+            return null;
+          return inputValue;
+        }
+      ),
+      unsetNodeVAlign: executeAlignmentCommand("nodeVerticalAlign", () => null),
+      toggleNodeVAlign: executeAlignmentCommand(
+        "nodeVerticalAlign",
+        (targets, inputValue) => {
+          if (!inputValue || !this.options.verticalAlignValues.includes(inputValue))
+            return null;
+          return getToggleValue(targets, "nodeVerticalAlign", inputValue);
+        }
+      ),
+      // BOTH
+      setNodeAlignment: (textAlign, verticalAlign) => ({ state, tr }) => {
+        const targets = (0, import_editor_utils3.getSelectedNodesOfType)(
+          state.selection,
+          this.options.types
+        );
+        if (targets.length === 0) return false;
+        let hasChanges = false;
+        for (const { node, pos } of targets) {
+          const newAttrs = { ...node.attrs };
+          if (textAlign && this.options.textAlignValues.includes(textAlign)) {
+            newAttrs.nodeTextAlign = textAlign;
+            hasChanges = true;
+          }
+          if (verticalAlign && this.options.verticalAlignValues.includes(verticalAlign)) {
+            newAttrs.nodeVerticalAlign = verticalAlign;
+            hasChanges = true;
+          }
+          if (hasChanges) tr.setNodeMarkup(pos, void 0, newAttrs);
+        }
+        return hasChanges;
+      },
+      unsetNodeAlignment: () => ({ state, tr }) => {
+        var _a, _b, _c, _d;
+        const targets = (0, import_editor_utils3.getSelectedNodesOfType)(
+          state.selection,
+          this.options.types
+        );
+        if (targets.length === 0) return false;
+        let hasChanges = false;
+        for (const { node, pos } of targets) {
+          const hasText = (_b = (_a = node.attrs) == null ? void 0 : _a.nodeTextAlign) != null ? _b : null;
+          const hasV = (_d = (_c = node.attrs) == null ? void 0 : _c.nodeVerticalAlign) != null ? _d : null;
+          if (hasText || hasV) {
+            const newAttrs = {
+              ...node.attrs,
+              nodeTextAlign: null,
+              nodeVerticalAlign: null
+            };
+            tr.setNodeMarkup(pos, void 0, newAttrs);
+            hasChanges = true;
+          }
+        }
+        return hasChanges;
+      }
+    };
+  }
+});
+
+// src/extensions/node-background/index.ts
+var import_editor_utils4 = require("@kopexa/editor-utils");
+var import_core8 = require("@tiptap/core");
+function getToggleColor(targets, inputColor) {
+  var _a, _b;
+  if (targets.length === 0) return null;
+  for (const target of targets) {
+    const currentColor = (_b = (_a = target.node.attrs) == null ? void 0 : _a.backgroundColor) != null ? _b : null;
+    if (currentColor !== inputColor) {
+      return inputColor;
+    }
+  }
+  return null;
+}
+var NodeBackground = import_core8.Extension.create({
+  name: "nodeBackground",
+  addOptions() {
+    return {
+      types: [
+        "paragraph",
+        "heading",
+        "blockquote",
+        "taskList",
+        "bulletList",
+        "orderedList",
+        "tableCell",
+        "tableHeader"
+      ],
+      useStyle: true
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          backgroundColor: {
+            default: null,
+            parseHTML: (element) => {
+              var _a;
+              const styleColor = (_a = element.style) == null ? void 0 : _a.backgroundColor;
+              if (styleColor) return styleColor;
+              const dataColor = element.getAttribute("data-background-color");
+              return dataColor || null;
+            },
+            renderHTML: (attributes) => {
+              const color = attributes.backgroundColor;
+              if (!color) return {};
+              if (this.options.useStyle) {
+                return {
+                  style: `background-color: ${color}`
+                };
+              } else {
+                return {
+                  "data-background-color": color
+                };
+              }
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    const executeBackgroundCommand = (getTargetColor) => {
+      return (inputColor) => ({ state, tr }) => {
+        const targets = (0, import_editor_utils4.getSelectedNodesOfType)(
+          state.selection,
+          this.options.types
+        );
+        if (targets.length === 0) return false;
+        const targetColor = getTargetColor(targets, inputColor);
+        return (0, import_editor_utils4.updateNodesAttr)(tr, targets, "backgroundColor", targetColor);
+      };
+    };
+    return {
+      /**
+       * Set background color to specific value
+       */
+      setNodeBackgroundColor: executeBackgroundCommand(
+        (_, inputColor) => inputColor || null
+      ),
+      /**
+       * Remove background color
+       */
+      unsetNodeBackgroundColor: executeBackgroundCommand(() => null),
+      /**
+       * Toggle background color (set if different/missing, unset if all have it)
+       */
+      toggleNodeBackgroundColor: executeBackgroundCommand(
+        (targets, inputColor) => getToggleColor(targets, inputColor || "")
+      )
+    };
+  }
+});
+
 // src/extensions/selection/index.ts
 var import_state4 = require("@tiptap/pm/state");
 var import_view = require("@tiptap/pm/view");
-var import_react32 = require("@tiptap/react");
-var Selection = import_react32.Extension.create({
+var import_react30 = require("@tiptap/react");
+var Selection = import_react30.Extension.create({
   name: "selection",
   addProseMirrorPlugins() {
     const { editor } = this;
@@ -3455,7 +3706,7 @@ var Selection = import_react32.Extension.create({
             if (editor.isFocused === true || !editor.isEditable) {
               return null;
             }
-            if ((0, import_react32.isNodeSelection)(state.selection)) {
+            if ((0, import_react30.isNodeSelection)(state.selection)) {
               return null;
             }
             return import_view.DecorationSet.create(state.doc, [
@@ -3472,7 +3723,7 @@ var Selection = import_react32.Extension.create({
 
 // src/extensions/trailing-node/index.ts
 var import_state5 = require("@tiptap/pm/state");
-var import_react33 = require("@tiptap/react");
+var import_react31 = require("@tiptap/react");
 function nodeEqualsType({
   types,
   node
@@ -3483,7 +3734,7 @@ function nodeEqualsType({
   }
   return node.type === types;
 }
-var TrailingNode = import_react33.Extension.create({
+var TrailingNode = import_react31.Extension.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -3529,7 +3780,7 @@ var TrailingNode = import_react33.Extension.create({
 });
 
 // src/extensions/ui-state/index.ts
-var import_core7 = require("@tiptap/core");
+var import_core9 = require("@tiptap/core");
 var defaultUiState = {
   aiGenerationIsSelection: false,
   aiGenerationIsLoading: false,
@@ -3539,7 +3790,7 @@ var defaultUiState = {
   lockDragHandle: false,
   isDragging: false
 };
-var UiState = import_core7.Extension.create({
+var UiState = import_core9.Extension.create({
   name: "uiState",
   addStorage() {
     return {
@@ -3764,7 +4015,7 @@ var useCreateEditor = ({
   const fileHandlerFromContext = useEditorFile();
   const fileHandler = fileHandlerProp != null ? fileHandlerProp : fileHandlerFromContext;
   const collaboration = useCollaboration();
-  const [extensions] = (0, import_react35.useState)(
+  const [extensions] = (0, import_react33.useState)(
     () => getExtensions({
       editable,
       placeholder,
@@ -3778,7 +4029,7 @@ var useCreateEditor = ({
       disabled
     })
   );
-  const editor = (0, import_react34.useEditor)({
+  const editor = (0, import_react32.useEditor)({
     editorProps: {
       attributes: {
         autocomplete: "off",
@@ -3797,7 +4048,7 @@ var useCreateEditor = ({
     content: safeParseContent(content),
     ...options
   });
-  (0, import_react35.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (editor && editor.isEditable !== editable) {
       editor.setEditable(editable);
     }
@@ -3864,6 +4115,8 @@ function getExtensions({
     }),
     UiState,
     import_extension_table.TableKit,
+    NodeAlignment,
+    NodeBackground,
     TocNode,
     CalloutNode,
     MathBlock,
@@ -4012,19 +4265,20 @@ async function handleFileUpload(editor, file, fileHandler, pos) {
 }
 
 // src/presets/basic/index.tsx
+var import_extension_table2 = require("@kopexa/extension-table");
 var import_theme9 = require("@kopexa/theme");
-var import_react59 = require("@tiptap/react");
-var import_react60 = require("react");
+var import_react57 = require("@tiptap/react");
+var import_react58 = 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_react36 = require("@tiptap/react");
+var import_react34 = require("@tiptap/react");
 function useUiEditorState(editor) {
   var _a;
-  return (_a = (0, import_react36.useEditorState)({
+  return (_a = (0, import_react34.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => {
       if (!editor2) return defaultUiState;
@@ -4046,14 +4300,15 @@ var import_menus = require("@tiptap/react/menus");
 
 // src/ui/link-popover/link-popover.tsx
 var import_button8 = require("@kopexa/button");
+var import_editor_utils6 = require("@kopexa/editor-utils");
 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_react37 = require("react");
+var import_react35 = require("react");
 
 // src/ui/link-popover/use-link-popover.ts
-var import_editor_utils2 = require("@kopexa/editor-utils");
+var import_editor_utils5 = require("@kopexa/editor-utils");
 var import_icons8 = require("@kopexa/icons");
 var React7 = __toESM(require("react"));
 
@@ -4160,7 +4415,7 @@ function isLinkActive(editor) {
 }
 function shouldShowLinkButton(props) {
   const { editor, hideWhenUnavailable } = props;
-  const linkInSchema = (0, import_editor_utils2.isMarkInSchema)("link", editor);
+  const linkInSchema = (0, import_editor_utils5.isMarkInSchema)("link", editor);
   if (!linkInSchema || !editor) {
     return false;
   }
@@ -4259,7 +4514,7 @@ function useLinkPopover(config) {
     hideWhenUnavailable = false,
     onSetLink
   } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils5.useTiptapEditor)(providedEditor);
   const { isVisible, canSet, isActive } = useLinkState({
     editor,
     hideWhenUnavailable
@@ -4306,8 +4561,8 @@ var LinkMain = ({
   isActive,
   onSave
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react37.useState)(!isActive || !url);
-  (0, import_react37.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react35.useState)(!isActive || !url);
+  (0, import_react35.useEffect)(() => {
     setIsEditing(!isActive || !url);
   }, [isActive, url]);
   const handleKeyDown = (event) => {
@@ -4422,8 +4677,8 @@ function LinkPopover({
   children,
   ...buttonProps
 }) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react37.useState)(false);
+  const { editor } = (0, import_editor_utils6.useTiptapEditor)(providedEditor);
+  const [isOpen, setIsOpen] = (0, import_react35.useState)(false);
   const {
     isVisible,
     canSet,
@@ -4439,18 +4694,18 @@ function LinkPopover({
     hideWhenUnavailable,
     onSetLink
   });
-  const handleOnOpenChange = (0, import_react37.useCallback)(
+  const handleOnOpenChange = (0, import_react35.useCallback)(
     (nextIsOpen) => {
       setIsOpen(nextIsOpen);
       onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
     },
     [onOpenChange]
   );
-  const handleSetLink = (0, import_react37.useCallback)(() => {
+  const handleSetLink = (0, import_react35.useCallback)(() => {
     setLink();
     setIsOpen(false);
   }, [setLink]);
-  const handleClick = (0, import_react37.useCallback)(
+  const handleClick = (0, import_react35.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4458,7 +4713,7 @@ function LinkPopover({
     },
     [onClick, isOpen]
   );
-  (0, import_react37.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (autoOpenOnLinkActive && isActive) {
       setIsOpen(true);
     }
@@ -4509,11 +4764,11 @@ function LinkPopover({
 LinkButton.displayName = "LinkButton";
 
 // src/ui/mark-button/index.tsx
-var import_editor_utils3 = require("@kopexa/editor-utils");
+var import_editor_utils7 = require("@kopexa/editor-utils");
 var import_icons10 = require("@kopexa/icons");
 var import_toolbar2 = require("@kopexa/toolbar");
-var import_react38 = require("@tiptap/react");
-var import_react39 = require("react");
+var import_react36 = require("@tiptap/react");
+var import_react37 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var markIcons = {
   bold: import_icons10.BoldIcon,
@@ -4535,7 +4790,7 @@ var markShortcutKeys = {
 };
 function canToggleMark(editor, type) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils3.isMarkInSchema)(type, editor) || (0, import_editor_utils3.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils7.isMarkInSchema)(type, editor) || (0, import_editor_utils7.isNodeTypeSelected)(editor, ["image"]))
     return false;
   return editor.can().toggleMark(type);
 }
@@ -4560,7 +4815,7 @@ function shouldShowMarkButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react38.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
+    if ((0, import_react36.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
       return false;
     }
   }
@@ -4570,7 +4825,7 @@ function getFormattedMarkName(type) {
   return type.charAt(0).toUpperCase() + type.slice(1);
 }
 function useMarkState(editor, type, disabled = false) {
-  const markInSchema = (0, import_editor_utils3.isMarkInSchema)(type, editor);
+  const markInSchema = (0, import_editor_utils7.isMarkInSchema)(type, editor);
   const isDisabled = isMarkButtonDisabled(editor, type, disabled);
   const isActive = isMarkActive(editor, type);
   const Icon = markIcons[type];
@@ -4596,7 +4851,7 @@ var MarkButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils7.useTiptapEditor)(providedEditor);
   const {
     markInSchema,
     isDisabled,
@@ -4605,7 +4860,7 @@ var MarkButton = ({
     shortcutKey,
     formattedName
   } = useMarkState(editor, type, disabled);
-  const handleClick = (0, import_react39.useCallback)(
+  const handleClick = (0, import_react37.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && !isDisabled && editor) {
@@ -4614,7 +4869,7 @@ var MarkButton = ({
     },
     [onClick, isDisabled, editor, type]
   );
-  const show = (0, import_react39.useMemo)(() => {
+  const show = (0, import_react37.useMemo)(() => {
     return shouldShowMarkButton({
       editor,
       type,
@@ -4689,12 +4944,12 @@ function BubbleMenu({ editor }) {
 }
 
 // src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
-var import_editor_utils4 = require("@kopexa/editor-utils");
+var import_editor_utils8 = require("@kopexa/editor-utils");
 var React9 = __toESM(require("react"));
 
 // src/hooks/use-floating-toolbar-visibility.ts
 var import_state6 = require("@tiptap/pm/state");
-var import_react40 = require("@tiptap/react");
+var import_react38 = require("@tiptap/react");
 var React8 = __toESM(require("react"));
 var HIDE_FLOATING_META = "hideFloatingToolbar";
 var selectNodeAndHideFloating = (editor, pos) => {
@@ -4714,12 +4969,12 @@ function useScrollToHash(config = {}) {
     onTargetNotFound = () => {
     }
   } = config;
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils8.useTiptapEditor)(providedEditor);
   const scrollToNode = React9.useCallback(
     (id) => {
       var _a, _b, _c;
       if (!editor) return false;
-      const attributeName = (_c = (_b = (_a = (0, import_editor_utils4.getEditorExtension)(editor, "uniqueID")) == null ? void 0 : _a.options) == null ? void 0 : _b.attributeName) != null ? _c : "data-id";
+      const attributeName = (_c = (_b = (_a = (0, import_editor_utils8.getEditorExtension)(editor, "uniqueID")) == null ? void 0 : _a.options) == null ? void 0 : _b.attributeName) != null ? _c : "data-id";
       let position = null;
       editor.state.doc.descendants((node, pos) => {
         var _a2;
@@ -4796,37 +5051,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_react41 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function LinkBubble({ editor }) {
-  const [isEditing, setIsEditing] = (0, import_react41.useState)(false);
-  const [url, setUrl] = (0, import_react41.useState)("");
-  const getCurrentUrl = (0, import_react41.useCallback)(() => {
+  const [isEditing, setIsEditing] = (0, import_react39.useState)(false);
+  const [url, setUrl] = (0, import_react39.useState)("");
+  const getCurrentUrl = (0, import_react39.useCallback)(() => {
     if (!editor) return "";
     const attrs = editor.getAttributes("link");
     return attrs.href || "";
   }, [editor]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
     if (isLinkActive2) {
       setUrl(getCurrentUrl());
       setIsEditing(false);
     }
   }, [editor, getCurrentUrl]);
-  const handleOpenLink = (0, import_react41.useCallback)(() => {
+  const handleOpenLink = (0, import_react39.useCallback)(() => {
     const href = getCurrentUrl();
     if (href) {
       window.open(href, "_blank", "noopener,noreferrer");
     }
   }, [getCurrentUrl]);
-  const handleRemoveLink = (0, import_react41.useCallback)(() => {
+  const handleRemoveLink = (0, import_react39.useCallback)(() => {
     editor == null ? void 0 : editor.chain().focus().unsetLink().run();
   }, [editor]);
-  const handleEdit = (0, import_react41.useCallback)(() => {
+  const handleEdit = (0, import_react39.useCallback)(() => {
     setUrl(getCurrentUrl());
     setIsEditing(true);
   }, [getCurrentUrl]);
-  const handleSave = (0, import_react41.useCallback)(() => {
+  const handleSave = (0, import_react39.useCallback)(() => {
     if (url) {
       editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     } else {
@@ -4834,7 +5089,7 @@ function LinkBubble({ editor }) {
     }
     setIsEditing(false);
   }, [editor, url]);
-  const handleKeyDown = (0, import_react41.useCallback)(
+  const handleKeyDown = (0, import_react39.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -4945,24 +5200,24 @@ function LinkBubble({ editor }) {
 
 // src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
 var import_button10 = require("@kopexa/button");
-var import_editor_utils7 = require("@kopexa/editor-utils");
+var import_editor_utils11 = require("@kopexa/editor-utils");
 var import_separator = require("@kopexa/separator");
 var import_theme7 = require("@kopexa/theme");
 var React11 = __toESM(require("react"));
 
 // src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
-var import_editor_utils6 = require("@kopexa/editor-utils");
+var import_editor_utils10 = require("@kopexa/editor-utils");
 var import_icons13 = require("@kopexa/icons");
 var React10 = __toESM(require("react"));
 
 // src/ui/table-button/use-table.ts
-var import_editor_utils5 = require("@kopexa/editor-utils");
+var import_editor_utils9 = require("@kopexa/editor-utils");
 var import_icons12 = require("@kopexa/icons");
-var import_react42 = require("@tiptap/react");
-var import_react43 = require("react");
+var import_react40 = require("@tiptap/react");
+var import_react41 = 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"])) {
+  if (!(0, import_editor_utils9.isNodeInSchema)("table", editor) || (0, import_editor_utils9.isNodeTypeSelected)(editor, ["image"])) {
     return false;
   }
   try {
@@ -4988,9 +5243,9 @@ function toggleTable(editor, config) {
 function shouldShowButton(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils5.isNodeInSchema)("table", editor)) return false;
+  if (!(0, import_editor_utils9.isNodeInSchema)("table", editor)) return false;
   if (hideWhenUnavailable) {
-    if ((0, import_react42.isNodeSelection)(editor.state.selection) || !canToggle) {
+    if ((0, import_react40.isNodeSelection)(editor.state.selection) || !canToggle) {
       return false;
     }
   }
@@ -5002,11 +5257,11 @@ function useTableBlock(config) {
     hideWhenUnavailable = false,
     onToggled
   } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react43.useState)(true);
+  const { editor } = (0, import_editor_utils9.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = (0, import_react41.useState)(true);
   const canToggleState = canToggle(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
-  (0, import_react43.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
@@ -5017,7 +5272,7 @@ function useTableBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react43.useCallback)(() => {
+  const handleToggle = (0, import_react41.useCallback)(() => {
     if (!editor) return false;
     const success = toggleTable(editor);
     if (success) {
@@ -5203,8 +5458,8 @@ var getItemImplementations = () => {
     // AI
     continue_writing: {
       check: (editor) => {
-        const { hasContent } = (0, import_editor_utils6.hasContentAbove)(editor);
-        const extensionsReady = (0, import_editor_utils6.isExtensionAvailable)(editor, [
+        const { hasContent } = (0, import_editor_utils10.hasContentAbove)(editor);
+        const extensionsReady = (0, import_editor_utils10.isExtensionAvailable)(editor, [
           "ai",
           "aiAdvanced"
         ]);
@@ -5212,14 +5467,14 @@ var getItemImplementations = () => {
       },
       action: ({ editor }) => {
         const editorChain = editor.chain().focus();
-        const nodeSelectionPosition = (0, import_editor_utils6.findSelectionPosition)({ editor });
+        const nodeSelectionPosition = (0, import_editor_utils10.findSelectionPosition)({ editor });
         if (nodeSelectionPosition !== null) {
           editorChain.setNodeSelection(nodeSelectionPosition);
         }
         editorChain.run();
         editor.chain().focus().aiGenerationShow().run();
         requestAnimationFrame(() => {
-          const { hasContent, content } = (0, import_editor_utils6.hasContentAbove)(editor);
+          const { hasContent, content } = (0, import_editor_utils10.hasContentAbove)(editor);
           const snippet = content.length > 500 ? `...${content.slice(-500)}` : content;
           const prompt = hasContent ? `Context: ${snippet}
 
@@ -5233,10 +5488,10 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
       }
     },
     ai_ask_button: {
-      check: (editor) => (0, import_editor_utils6.isExtensionAvailable)(editor, ["ai", "aiAdvanced"]),
+      check: (editor) => (0, import_editor_utils10.isExtensionAvailable)(editor, ["ai", "aiAdvanced"]),
       action: ({ editor }) => {
         const editorChain = editor.chain().focus();
-        const nodeSelectionPosition = (0, import_editor_utils6.findSelectionPosition)({ editor });
+        const nodeSelectionPosition = (0, import_editor_utils10.findSelectionPosition)({ editor });
         if (nodeSelectionPosition !== null) {
           editorChain.setNodeSelection(nodeSelectionPosition);
         }
@@ -5246,55 +5501,55 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
     },
     // Style
     text: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("paragraph", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("paragraph", editor),
       action: ({ editor }) => {
         editor.chain().focus().setParagraph().run();
       }
     },
     heading_1: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("heading", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("heading", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleHeading({ level: 1 }).run();
       }
     },
     heading_2: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("heading", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("heading", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleHeading({ level: 2 }).run();
       }
     },
     heading_3: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("heading", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("heading", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleHeading({ level: 3 }).run();
       }
     },
     bullet_list: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("bulletList", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("bulletList", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleBulletList().run();
       }
     },
     ordered_list: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("orderedList", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("orderedList", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleOrderedList().run();
       }
     },
     task_list: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("taskList", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("taskList", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleTaskList().run();
       }
     },
     quote: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("blockquote", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("blockquote", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleBlockquote().run();
       }
     },
     code_block: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("codeBlock", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("codeBlock", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleNode("codeBlock", "paragraph").run();
       }
@@ -5311,17 +5566,17 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
     //   action: ({ editor }: { editor: Editor }) => addEmojiTrigger(editor),
     // },
     divider: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("horizontalRule", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("horizontalRule", editor),
       action: ({ editor }) => {
         editor.chain().focus().setHorizontalRule().run();
       }
     },
     table: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("table", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("table", editor),
       action: ({ editor }) => toggleTable(editor, { rows: 3, cols: 3, withHeaderRow: true })
     },
     control: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("controlBlock", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("controlBlock", editor),
       action: ({ editor }) => {
         try {
           return editor.chain().focus().insertControlBlock().run();
@@ -5331,32 +5586,32 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
       }
     },
     table_of_contents: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("tableOfContentsNode", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("tableOfContentsNode", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertTableOfContents().run();
       }
     },
     callout: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("calloutNode", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("calloutNode", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertCallout("info").run();
       }
     },
     callout_warning: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("calloutNode", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("calloutNode", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertCallout("warning").run();
       }
     },
     math: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("mathBlock", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("mathBlock", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertMathBlock().run();
       }
     },
     // Upload
     image: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("imageUpload", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("imageUpload", editor),
       action: ({ editor }) => {
         editor.chain().focus().setImageUpload().run();
       }
@@ -5445,7 +5700,7 @@ var Item = (props) => {
       '[data-selector="tiptap-slash-dropdown-menu"]'
     );
     if (!itemRef.current || !isSelected || !selector) return;
-    const overflow = (0, import_editor_utils7.getElementOverflowPosition)(itemRef.current, selector);
+    const overflow = (0, import_editor_utils11.getElementOverflowPosition)(itemRef.current, selector);
     if (overflow === "top") {
       itemRef.current.scrollIntoView(true);
     } else if (overflow === "bottom") {
@@ -5563,11 +5818,12 @@ var List = ({
 };
 
 // src/presets/basic/editor-header.tsx
+var import_editor_utils28 = require("@kopexa/editor-utils");
 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_react58 = require("react");
+var import_react56 = require("react");
 
 // src/hooks/use-cursor-visibility.ts
 var React13 = __toESM(require("react"));
@@ -5672,11 +5928,12 @@ function useCursorVisibility({
 }
 
 // src/ui/blockquote-button/blockquote-button.tsx
+var import_editor_utils13 = require("@kopexa/editor-utils");
 var import_toolbar4 = require("@kopexa/toolbar");
 var React15 = __toESM(require("react"));
 
 // src/ui/blockquote-button/use-blockquote.ts
-var import_editor_utils8 = require("@kopexa/editor-utils");
+var import_editor_utils12 = require("@kopexa/editor-utils");
 var import_icons14 = require("@kopexa/icons");
 var import_state7 = require("@tiptap/pm/state");
 var React14 = __toESM(require("react"));
@@ -5684,7 +5941,7 @@ var BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
 function canToggleBlockquote(editor, turnInto = true) {
   var _a;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils8.isNodeInSchema)("blockquote", editor) || (0, import_editor_utils8.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils12.isNodeInSchema)("blockquote", editor) || (0, import_editor_utils12.isNodeTypeSelected)(editor, ["image"]))
     return false;
   if (!turnInto) {
     return editor.can().toggleWrap("blockquote");
@@ -5694,11 +5951,11 @@ function canToggleBlockquote(editor, turnInto = true) {
     const state = view.state;
     const selection = state.selection;
     if (selection.empty || selection instanceof import_state7.TextSelection) {
-      const pos = (_a = (0, import_editor_utils8.findNodePosition)({
+      const pos = (_a = (0, import_editor_utils12.findNodePosition)({
         editor,
         node: state.selection.$anchor.node(1)
       })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils8.isValidPosition)(pos)) return false;
+      if (!(0, import_editor_utils12.isValidPosition)(pos)) return false;
     }
     return true;
   } catch {
@@ -5714,11 +5971,11 @@ function toggleBlockquote(editor) {
     let state = view.state;
     let tr = state.tr;
     if (state.selection.empty || state.selection instanceof import_state7.TextSelection) {
-      const pos = (_a = (0, import_editor_utils8.findNodePosition)({
+      const pos = (_a = (0, import_editor_utils12.findNodePosition)({
         editor,
         node: state.selection.$anchor.node(1)
       })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils8.isValidPosition)(pos)) return false;
+      if (!(0, import_editor_utils12.isValidPosition)(pos)) return false;
       tr = tr.setSelection(import_state7.NodeSelection.create(state.doc, pos));
       view.dispatch(tr);
       state = view.state;
@@ -5743,7 +6000,7 @@ function toggleBlockquote(editor) {
 function shouldShowButton2(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils8.isNodeInSchema)("blockquote", editor)) return false;
+  if (!(0, import_editor_utils12.isNodeInSchema)("blockquote", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
     return canToggleBlockquote(editor);
   }
@@ -5755,7 +6012,7 @@ function useBlockquote(config) {
     hideWhenUnavailable = false,
     onToggled
   } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils12.useTiptapEditor)(providedEditor);
   const [isVisible, setIsVisible] = React14.useState(true);
   const canToggle3 = canToggleBlockquote(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("blockquote")) || false;
@@ -5801,7 +6058,7 @@ var BlockquoteButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils13.useTiptapEditor)(providedEditor);
   const {
     isVisible,
     canToggle: canToggle3,
@@ -5852,12 +6109,13 @@ var BlockquoteButton = ({
 };
 
 // src/ui/codeblock-button/code-block-button.tsx
+var import_editor_utils15 = require("@kopexa/editor-utils");
 var import_icons16 = require("@kopexa/icons");
 var import_toolbar5 = require("@kopexa/toolbar");
-var import_react44 = require("react");
+var import_react42 = require("react");
 
 // src/ui/codeblock-button/use-code-block.ts
-var import_editor_utils9 = require("@kopexa/editor-utils");
+var import_editor_utils14 = require("@kopexa/editor-utils");
 var import_icons15 = require("@kopexa/icons");
 var import_state8 = require("@tiptap/pm/state");
 var React16 = __toESM(require("react"));
@@ -5865,7 +6123,7 @@ var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
 function canToggle2(editor, turnInto = true) {
   var _a;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils9.isNodeInSchema)("codeBlock", editor) || (0, import_editor_utils9.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils14.isNodeInSchema)("codeBlock", editor) || (0, import_editor_utils14.isNodeTypeSelected)(editor, ["image"]))
     return false;
   if (!turnInto) {
     return editor.can().toggleNode("codeBlock", "paragraph");
@@ -5875,11 +6133,11 @@ function canToggle2(editor, turnInto = true) {
     const state = view.state;
     const selection = state.selection;
     if (selection.empty || selection instanceof import_state8.TextSelection) {
-      const pos = (_a = (0, import_editor_utils9.findNodePosition)({
+      const pos = (_a = (0, import_editor_utils14.findNodePosition)({
         editor,
         node: state.selection.$anchor.node(1)
       })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils9.isValidPosition)(pos)) return false;
+      if (!(0, import_editor_utils14.isValidPosition)(pos)) return false;
     }
     return true;
   } catch {
@@ -5895,11 +6153,11 @@ function toggleCodeBlock(editor) {
     let state = view.state;
     let tr = state.tr;
     if (state.selection.empty || state.selection instanceof import_state8.TextSelection) {
-      const pos = (_a = (0, import_editor_utils9.findNodePosition)({
+      const pos = (_a = (0, import_editor_utils14.findNodePosition)({
         editor,
         node: state.selection.$anchor.node(1)
       })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils9.isValidPosition)(pos)) return false;
+      if (!(0, import_editor_utils14.isValidPosition)(pos)) return false;
       tr = tr.setSelection(import_state8.NodeSelection.create(state.doc, pos));
       view.dispatch(tr);
       state = view.state;
@@ -5924,7 +6182,7 @@ function toggleCodeBlock(editor) {
 function shouldShowButton3(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils9.isNodeInSchema)("codeBlock", editor)) return false;
+  if (!(0, import_editor_utils14.isNodeInSchema)("codeBlock", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
     return canToggle2(editor);
   }
@@ -5936,7 +6194,7 @@ function useCodeBlock(config) {
     hideWhenUnavailable = false,
     onToggled
   } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils14.useTiptapEditor)(providedEditor);
   const [isVisible, setIsVisible] = React16.useState(true);
   const canToggleState = canToggle2(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("codeBlock")) || false;
@@ -5982,13 +6240,13 @@ var CodeBlockButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils15.useTiptapEditor)(providedEditor);
   const { isVisible, canToggle: canToggle3, isActive, handleToggle, label, shortcutKeys } = useCodeBlock({
     editor,
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react44.useCallback)(
+  const handleClick = (0, import_react42.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -6023,18 +6281,20 @@ var CodeBlockButton = ({
 
 // src/ui/color-highlight-popover/color-highlight-popover.tsx
 var import_button11 = require("@kopexa/button");
+var import_editor_utils18 = require("@kopexa/editor-utils");
 var import_icons18 = require("@kopexa/icons");
 var import_popover2 = require("@kopexa/popover");
 var import_toolbar7 = require("@kopexa/toolbar");
-var import_react46 = require("react");
+var import_react44 = require("react");
 
 // src/ui/color-highlight-button/color-highlight-button.tsx
+var import_editor_utils17 = require("@kopexa/editor-utils");
 var import_theme8 = require("@kopexa/theme");
 var import_toolbar6 = require("@kopexa/toolbar");
-var import_react45 = require("react");
+var import_react43 = require("react");
 
 // src/ui/color-highlight-button/use-color-highlight.ts
-var import_editor_utils10 = require("@kopexa/editor-utils");
+var import_editor_utils16 = require("@kopexa/editor-utils");
 var import_icons17 = require("@kopexa/icons");
 var import_use_is_mobile = require("@kopexa/use-is-mobile");
 var React17 = __toESM(require("react"));
@@ -6100,7 +6360,7 @@ function pickHighlightColorsByValue(values) {
 }
 function canColorHighlight(editor) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils10.isMarkInSchema)("highlight", editor) || (0, import_editor_utils10.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils16.isMarkInSchema)("highlight", editor) || (0, import_editor_utils16.isNodeTypeSelected)(editor, ["image"]))
     return false;
   return editor.can().setMark("highlight");
 }
@@ -6116,7 +6376,7 @@ function removeHighlight(editor) {
 function shouldShowButton4(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils10.isMarkInSchema)("highlight", editor)) return false;
+  if (!(0, import_editor_utils16.isMarkInSchema)("highlight", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
     return canColorHighlight(editor);
   }
@@ -6130,7 +6390,7 @@ function useColorHighlight(config) {
     hideWhenUnavailable = false,
     onApplied
   } = config;
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils16.useTiptapEditor)(providedEditor);
   const isMobile = (0, import_use_is_mobile.useIsMobile)();
   const [isVisible, setIsVisible] = React17.useState(true);
   const canColorHighlightState = canColorHighlight(editor);
@@ -6211,7 +6471,7 @@ var ColorHighlightButton = ({
   className,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils17.useTiptapEditor)(providedEditor);
   const {
     isVisible,
     canColorHighlight: canColorHighlight2,
@@ -6226,7 +6486,7 @@ var ColorHighlightButton = ({
     hideWhenUnavailable,
     onApplied
   });
-  const handleClick = (0, import_react45.useCallback)(
+  const handleClick = (0, import_react43.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -6234,7 +6494,7 @@ var ColorHighlightButton = ({
     },
     [handleColorHighlight, onClick]
   );
-  const buttonStyle = (0, import_react45.useMemo)(
+  const buttonStyle = (0, import_react43.useMemo)(
     () => ({
       ...style,
       "--highlight-color": highlightColor
@@ -6317,8 +6577,8 @@ function ColorHighlightPopoverContent({
   ])
 }) {
   const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = (0, import_react46.useRef)(null);
-  const menuItems = (0, import_react46.useMemo)(
+  const containerRef = (0, import_react44.useRef)(null);
+  const menuItems = (0, import_react44.useMemo)(
     () => [...colors, { label: "Remove highlight", value: "none" }],
     [colors]
   );
@@ -6385,8 +6645,8 @@ function ColorHighlightPopover({
   onApplied,
   ...props
 }) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react46.useState)(false);
+  const { editor } = (0, import_editor_utils18.useTiptapEditor)(providedEditor);
+  const [isOpen, setIsOpen] = (0, import_react44.useState)(false);
   const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
     editor,
     hideWhenUnavailable,
@@ -6418,19 +6678,19 @@ function ColorHighlightPopover({
 // src/ui/heading-dropdown-menu/index.tsx
 var import_button13 = require("@kopexa/button");
 var import_dropdown_menu = require("@kopexa/dropdown-menu");
-var import_editor_utils12 = require("@kopexa/editor-utils");
+var import_editor_utils20 = require("@kopexa/editor-utils");
 var import_icons20 = require("@kopexa/icons");
-var import_react48 = require("@tiptap/react");
+var import_react46 = require("@tiptap/react");
 var React19 = __toESM(require("react"));
 
 // src/ui/heading-button/index.tsx
 var import_button12 = require("@kopexa/button");
-var import_editor_utils11 = require("@kopexa/editor-utils");
+var import_editor_utils19 = require("@kopexa/editor-utils");
 var import_icons19 = require("@kopexa/icons");
 var React18 = __toESM(require("react"));
 
 // src/ui/heading-button/utils.ts
-var import_react47 = require("@tiptap/react");
+var import_react45 = require("@tiptap/react");
 var headingShortcutKeys = {
   1: "Ctrl-Alt-1",
   2: "Ctrl-Alt-2",
@@ -6471,7 +6731,7 @@ function shouldShowHeadingButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react47.isNodeSelection)(editor.state.selection)) {
+    if ((0, import_react45.isNodeSelection)(editor.state.selection)) {
       return false;
     }
   }
@@ -6492,7 +6752,7 @@ var headingIcons = {
   6: import_icons19.HeadingSixIcon
 };
 function useHeadingState(editor, level, disabled = false) {
-  const headingInSchema = (0, import_editor_utils11.isNodeInSchema)("heading", editor);
+  const headingInSchema = (0, import_editor_utils19.isNodeInSchema)("heading", editor);
   const isDisabled = isHeadingButtonDisabled(editor, level, disabled);
   const isActive = isHeadingActive(editor, level);
   const Icon = headingIcons[level];
@@ -6519,7 +6779,7 @@ var HeadingButton = ({
   ref,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils19.useTiptapEditor)(providedEditor);
   const {
     headingInSchema,
     isDisabled,
@@ -6583,8 +6843,8 @@ function HeadingDropdownMenu({
 }) {
   var _a;
   const [isOpen, setIsOpen] = React19.useState(false);
-  const { editor } = useTiptapEditor(providedEditor);
-  const headingInSchema = (0, import_editor_utils12.isNodeInSchema)("heading", editor);
+  const { editor } = (0, import_editor_utils20.useTiptapEditor)(providedEditor);
+  const headingInSchema = (0, import_editor_utils20.isNodeInSchema)("heading", editor);
   const handleOnOpenChange = React19.useCallback(
     (open) => {
       setIsOpen(open);
@@ -6614,7 +6874,7 @@ function HeadingDropdownMenu({
       return false;
     }
     if (hideWhenUnavailable) {
-      if ((0, import_react48.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
+      if ((0, import_react46.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
         return false;
       }
     }
@@ -6659,17 +6919,17 @@ function HeadingDropdownMenu({
 // src/ui/list-dropdown-menu/index.tsx
 var import_button15 = require("@kopexa/button");
 var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
-var import_editor_utils14 = require("@kopexa/editor-utils");
+var import_editor_utils22 = require("@kopexa/editor-utils");
 var import_icons22 = require("@kopexa/icons");
-var import_react51 = require("@tiptap/react");
-var import_react52 = require("react");
+var import_react49 = require("@tiptap/react");
+var import_react50 = require("react");
 
 // src/ui/list-button/index.tsx
 var import_button14 = require("@kopexa/button");
-var import_editor_utils13 = require("@kopexa/editor-utils");
+var import_editor_utils21 = require("@kopexa/editor-utils");
 var import_icons21 = require("@kopexa/icons");
-var import_react49 = require("@tiptap/react");
-var import_react50 = require("react");
+var import_react47 = require("@tiptap/react");
+var import_react48 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var listOptions = [
   {
@@ -6744,14 +7004,14 @@ function shouldShowListButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react49.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
+    if ((0, import_react47.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
       return false;
     }
   }
   return true;
 }
 function useListState(editor, type) {
-  const listInSchema = (0, import_editor_utils13.isNodeInSchema)(type, editor);
+  const listInSchema = (0, import_editor_utils21.isNodeInSchema)(type, editor);
   const listOption = getListOption(type);
   const isActive = isListActive(editor, type);
   const shortcutKey = listShortcutKeys[type];
@@ -6773,13 +7033,13 @@ var ListButton = ({
   ref,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils21.useTiptapEditor)(providedEditor);
   const { listInSchema, listOption, isActive, shortcutKey } = useListState(
     editor,
     type
   );
   const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons21.ListIcon;
-  const handleClick = (0, import_react50.useCallback)(
+  const handleClick = (0, import_react48.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && editor) {
@@ -6788,7 +7048,7 @@ var ListButton = ({
     },
     [onClick, editor, type]
   );
-  const show = (0, import_react50.useMemo)(() => {
+  const show = (0, import_react48.useMemo)(() => {
     return shouldShowListButton({
       editor,
       type,
@@ -6842,24 +7102,24 @@ function shouldShowListDropdown(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react51.isNodeSelection)(editor.state.selection) || !canToggleAny) {
+    if ((0, import_react49.isNodeSelection)(editor.state.selection) || !canToggleAny) {
       return false;
     }
   }
   return true;
 }
 function useListDropdownState(editor, availableTypes) {
-  const [isOpen, setIsOpen] = (0, import_react52.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react50.useState)(false);
   const listInSchema = availableTypes.some(
-    (type) => (0, import_editor_utils14.isNodeInSchema)(type, editor)
+    (type) => (0, import_editor_utils22.isNodeInSchema)(type, editor)
   );
-  const filteredLists = (0, import_react52.useMemo)(
+  const filteredLists = (0, import_react50.useMemo)(
     () => getFilteredListOptions(availableTypes),
     [availableTypes]
   );
   const canToggleAny = canToggleAnyList(editor, availableTypes);
   const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = (0, import_react52.useCallback)(
+  const handleOpenChange = (0, import_react50.useCallback)(
     (open, callback) => {
       setIsOpen(open);
       callback == null ? void 0 : callback(open);
@@ -6877,7 +7137,7 @@ function useListDropdownState(editor, availableTypes) {
   };
 }
 function useActiveListIcon(editor, filteredLists) {
-  return (0, import_react52.useCallback)(() => {
+  return (0, import_react50.useCallback)(() => {
     const activeOption = filteredLists.find(
       (option) => isListActive(editor, option.type)
     );
@@ -6891,7 +7151,7 @@ function ListDropdownMenu({
   onOpenChange,
   ...props
 }) {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils22.useTiptapEditor)(providedEditor);
   const {
     isOpen,
     listInSchema,
@@ -6901,7 +7161,7 @@ function ListDropdownMenu({
     handleOpenChange
   } = useListDropdownState(editor, types);
   const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = (0, import_react52.useMemo)(() => {
+  const show = (0, import_react50.useMemo)(() => {
     return shouldShowListDropdown({
       editor,
       listTypes: types,
@@ -6910,7 +7170,7 @@ function ListDropdownMenu({
       canToggleAny
     });
   }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = (0, import_react52.useCallback)(
+  const handleOnOpenChange = (0, import_react50.useCallback)(
     (open) => handleOpenChange(open, onOpenChange),
     [handleOpenChange, onOpenChange]
   );
@@ -6949,8 +7209,9 @@ function ListDropdownMenu({
 }
 
 // src/ui/table-button/index.tsx
+var import_editor_utils23 = require("@kopexa/editor-utils");
 var import_toolbar8 = require("@kopexa/toolbar");
-var import_react53 = require("react");
+var import_react51 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var TableButton = ({
   editor: providedEditor,
@@ -6961,7 +7222,7 @@ var TableButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils23.useTiptapEditor)(providedEditor);
   const {
     isVisible,
     canToggle: canToggle3,
@@ -6975,7 +7236,7 @@ var TableButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react53.useCallback)(
+  const handleClick = (0, import_react51.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -7012,12 +7273,13 @@ var TableButton = ({
 
 // src/ui/text-align-button/text-align-button.tsx
 var import_button16 = require("@kopexa/button");
-var import_react55 = require("react");
+var import_editor_utils25 = require("@kopexa/editor-utils");
+var import_react53 = require("react");
 
 // src/ui/text-align-button/use-text-align.ts
-var import_editor_utils15 = require("@kopexa/editor-utils");
+var import_editor_utils24 = require("@kopexa/editor-utils");
 var import_icons23 = require("@kopexa/icons");
-var import_react54 = require("react");
+var import_react52 = require("react");
 var TEXT_ALIGN_SHORTCUT_KEYS = {
   left: "mod+shift+l",
   center: "mod+shift+e",
@@ -7038,7 +7300,7 @@ var textAlignLabels = {
 };
 function canSetTextAlign(editor, align) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils15.isExtensionAvailable)(editor, "textAlign") || (0, import_editor_utils15.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils24.isExtensionAvailable)(editor, "textAlign") || (0, import_editor_utils24.isNodeTypeSelected)(editor, ["image"]))
     return false;
   return editor.can().setTextAlign(align);
 }
@@ -7061,7 +7323,7 @@ function setTextAlign(editor, align) {
 function shouldShowButton5(props) {
   const { editor, hideWhenUnavailable, align } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils15.isExtensionAvailable)(editor, "textAlign")) return false;
+  if (!(0, import_editor_utils24.isExtensionAvailable)(editor, "textAlign")) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
     return canSetTextAlign(editor, align);
   }
@@ -7074,11 +7336,11 @@ function useTextAlign(config) {
     hideWhenUnavailable = false,
     onAligned
   } = config;
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react54.useState)(true);
+  const { editor } = (0, import_editor_utils24.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = (0, import_react52.useState)(true);
   const canAlign = canSetTextAlign(editor, align);
   const isActive = isTextAlignActive(editor, align);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton5({ editor, align, hideWhenUnavailable }));
@@ -7089,7 +7351,7 @@ function useTextAlign(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable, align]);
-  const handleTextAlign = (0, import_react54.useCallback)(() => {
+  const handleTextAlign = (0, import_react52.useCallback)(() => {
     if (!editor) return false;
     const success = setTextAlign(editor, align);
     if (success) {
@@ -7121,7 +7383,7 @@ var TextAlignButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils25.useTiptapEditor)(providedEditor);
   const {
     isVisible,
     handleTextAlign,
@@ -7136,7 +7398,7 @@ var TextAlignButton = ({
     hideWhenUnavailable,
     onAligned
   });
-  const handleClick = (0, import_react55.useCallback)(
+  const handleClick = (0, import_react53.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (e.defaultPrevented) return;
@@ -7169,13 +7431,14 @@ var TextAlignButton = ({
 };
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
+var import_editor_utils27 = require("@kopexa/editor-utils");
 var import_toolbar9 = require("@kopexa/toolbar");
-var import_react57 = require("react");
+var import_react55 = require("react");
 
 // src/ui/undo-redo-button/use-undo-redo.ts
-var import_editor_utils16 = require("@kopexa/editor-utils");
+var import_editor_utils26 = require("@kopexa/editor-utils");
 var import_icons24 = require("@kopexa/icons");
-var import_react56 = require("react");
+var import_react54 = require("react");
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
   redo: "mod+shift+z"
@@ -7190,7 +7453,7 @@ var historyIcons = {
 };
 function canExecuteUndoRedoAction(editor, action) {
   if (!editor || !editor.isEditable) return false;
-  if ((0, import_editor_utils16.isNodeTypeSelected)(editor, ["image"])) return false;
+  if ((0, import_editor_utils26.isNodeTypeSelected)(editor, ["image"])) return false;
   return action === "undo" ? editor.can().undo() : editor.can().redo();
 }
 function executeUndoRedoAction(editor, action) {
@@ -7214,10 +7477,10 @@ function useUndoRedo(config) {
     hideWhenUnavailable = false,
     onExecuted
   } = config;
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react56.useState)(true);
+  const { editor } = (0, import_editor_utils26.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = (0, import_react54.useState)(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!editor) return;
     const handleUpdate = () => {
       setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable, action }));
@@ -7228,7 +7491,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = (0, import_react56.useCallback)(() => {
+  const handleAction = (0, import_react54.useCallback)(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -7259,14 +7522,14 @@ var UndoRedoButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils27.useTiptapEditor)(providedEditor);
   const { isVisible, handleAction, label, canExecute, Icon, shortcutKeys } = useUndoRedo({
     editor,
     action,
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = (0, import_react57.useCallback)(
+  const handleClick = (0, import_react55.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -7304,11 +7567,11 @@ var EditorHeader = ({
   variant
 }) => {
   var _a, _b;
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils28.useTiptapEditor)(providedEditor);
   const isMobile = (0, import_use_is_mobile2.useIsMobile)();
   const windowSize = useWindowSize();
   const { styles } = useEditorUIContext();
-  const toolbarRef = (0, import_react58.useRef)(null);
+  const toolbarRef = (0, import_react56.useRef)(null);
   const bodyRect = useCursorVisibility({
     editor,
     overlayHeight: (_b = (_a = toolbarRef.current) == null ? void 0 : _a.getBoundingClientRect().height) != null ? _b : 0
@@ -7381,9 +7644,9 @@ function MoreOptions({
   hideWhenUnavailable = false,
   ...props
 }) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [show, setShow] = (0, import_react58.useState)(false);
-  (0, import_react58.useEffect)(() => {
+  const { editor } = (0, import_editor_utils28.useTiptapEditor)(providedEditor);
+  const [show, setShow] = (0, import_react56.useState)(false);
+  (0, import_react56.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setShow(
@@ -7492,7 +7755,7 @@ var BasicEditor = ({
     ...options
   });
   const styles = (0, import_theme9.editorBasic)({ variant, bordered });
-  const resolveVariable = (0, import_react60.useCallback)(
+  const resolveVariable = (0, import_react58.useCallback)(
     (name) => variableValues == null ? void 0 : variableValues[name],
     [variableValues]
   );
@@ -7502,7 +7765,7 @@ var BasicEditor = ({
   const isBottomToolbar = variant === "field";
   const hasVariables = variables && variables.length > 0;
   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: [
+  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_react57.EditorContext.Provider, { value: { editor }, children: [
     showToolbar && !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EditorHeader, { editor, variant }),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       EditorContentArea,
@@ -7525,10 +7788,10 @@ var EditorContentArea = ({
   hasPagination
 }) => {
   const styles = (0, import_theme9.editorBasic)({ variant });
-  const { editor } = (0, import_react60.useContext)(import_react59.EditorContext);
+  const { editor } = (0, import_react58.useContext)(import_react57.EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
-  const handleKeyDown = (0, import_react60.useCallback)(
+  const handleKeyDown = (0, import_react58.useCallback)(
     (e) => {
       if (!(editor == null ? void 0 : editor.isFocused)) return;
       const isMod = e.metaKey || e.ctrlKey;
@@ -7572,7 +7835,7 @@ var EditorContentArea = ({
     // biome-ignore lint/a11y/noStaticElementInteractions: Wrapper intercepts keyboard shortcuts to prevent propagation
     /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: styles.wrapper(), onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        import_react59.EditorContent,
+        import_react57.EditorContent,
         {
           editor,
           role: "presentation",
@@ -7587,7 +7850,23 @@ var EditorContentArea = ({
         }
       ),
       isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(BubbleMenu, { editor }),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinkBubble, { editor })
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinkBubble, { editor }),
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_extension_table2.TableHandle, { editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          import_extension_table2.TableSelectionOverlay,
+          {
+            showResizeHandles: true,
+            cellMenu: (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              import_extension_table2.TableCellHandleMenu,
+              {
+                editor: props.editor,
+                onOpenChange: props.onOpenChange
+              }
+            )
+          }
+        )
+      ] })
     ] })
   );
 };