@kopexa/tiptap 17.7.0 → 17.7.2

package/dist/index.mjs

@@ -2743,6 +2743,7 @@ import * as React6 from "react";
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
 import { FloatingPortal, flip, offset, shift, size } from "@floating-ui/react";
+import { useTiptapEditor } from "@kopexa/editor-utils";
 import { PluginKey } from "@tiptap/pm/state";
 import {
   Suggestion,
@@ -2928,35 +2929,6 @@ function useMenuNavigation({
   };
 }
 
-// src/hooks/use-tiptap-editor.ts
-import { useCurrentEditor, useEditorState as useEditorState7 } from "@tiptap/react";
-import { useMemo as useMemo12 } from "react";
-function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = useCurrentEditor();
-  const mainEditor = useMemo12(
-    () => providedEditor || coreEditor,
-    [providedEditor, coreEditor]
-  );
-  const editorState = useEditorState7({
-    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) {
@@ -3434,11 +3406,290 @@ var Link = TiptapLink.extend({
   }
 });
 
+// src/extensions/node-alignment/index.ts
+import { getSelectedNodesOfType, updateNodesAttr } from "@kopexa/editor-utils";
+import { Extension } from "@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 = 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 = getSelectedNodesOfType(
+          state.selection,
+          this.options.types
+        );
+        if (targets.length === 0) return false;
+        const targetValue = getTargetValue(targets, inputValue);
+        return 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 = 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 = 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
+import { getSelectedNodesOfType as getSelectedNodesOfType2, updateNodesAttr as updateNodesAttr2 } from "@kopexa/editor-utils";
+import { Extension as Extension2 } from "@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 = Extension2.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 = getSelectedNodesOfType2(
+          state.selection,
+          this.options.types
+        );
+        if (targets.length === 0) return false;
+        const targetColor = getTargetColor(targets, inputColor);
+        return updateNodesAttr2(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
 import { Plugin as Plugin2, PluginKey as PluginKey4 } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import { Extension, isNodeSelection } from "@tiptap/react";
-var Selection = Extension.create({
+import { Extension as Extension3, isNodeSelection } from "@tiptap/react";
+var Selection = Extension3.create({
   name: "selection",
   addProseMirrorPlugins() {
     const { editor } = this;
@@ -3470,7 +3721,7 @@ var Selection = Extension.create({
 
 // src/extensions/trailing-node/index.ts
 import { Plugin as Plugin3, PluginKey as PluginKey5 } from "@tiptap/pm/state";
-import { Extension as Extension2 } from "@tiptap/react";
+import { Extension as Extension4 } from "@tiptap/react";
 function nodeEqualsType({
   types,
   node
@@ -3481,7 +3732,7 @@ function nodeEqualsType({
   }
   return node.type === types;
 }
-var TrailingNode = Extension2.create({
+var TrailingNode = Extension4.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -3527,7 +3778,7 @@ var TrailingNode = Extension2.create({
 });
 
 // src/extensions/ui-state/index.ts
-import { Extension as Extension3 } from "@tiptap/core";
+import { Extension as Extension5 } from "@tiptap/core";
 var defaultUiState = {
   aiGenerationIsSelection: false,
   aiGenerationIsLoading: false,
@@ -3537,7 +3788,7 @@ var defaultUiState = {
   lockDragHandle: false,
   isDragging: false
 };
-var UiState = Extension3.create({
+var UiState = Extension5.create({
   name: "uiState",
   addStorage() {
     return {
@@ -3862,6 +4113,8 @@ function getExtensions({
     }),
     UiState,
     TableKit,
+    NodeAlignment,
+    NodeBackground,
     TocNode,
     CalloutNode,
     MathBlock,
@@ -4010,6 +4263,11 @@ async function handleFileUpload(editor, file, fileHandler, pos) {
 }
 
 // src/presets/basic/index.tsx
+import {
+  TableCellHandleMenu,
+  TableHandle,
+  TableSelectionOverlay
+} from "@kopexa/extension-table";
 import {
   editorBasic,
   editorSpinner
@@ -4025,10 +4283,10 @@ import { createContext as createContext4 } from "@kopexa/react-utils";
 var [EditorUIProvider, useEditorUIContext] = createContext4();
 
 // src/hooks/use-ui-editor-state.ts
-import { useEditorState as useEditorState8 } from "@tiptap/react";
+import { useEditorState as useEditorState7 } from "@tiptap/react";
 function useUiEditorState(editor) {
   var _a;
-  return (_a = useEditorState8({
+  return (_a = useEditorState7({
     editor,
     selector: ({ editor: editor2 }) => {
       if (!editor2) return defaultUiState;
@@ -4050,6 +4308,7 @@ import { BubbleMenu as TiptapBubbleMenu } from "@tiptap/react/menus";
 
 // src/ui/link-popover/link-popover.tsx
 import { IconButton as IconButton6 } from "@kopexa/button";
+import { useTiptapEditor as useTiptapEditor3 } from "@kopexa/editor-utils";
 import {
   CheckIcon,
   EditIcon as EditIcon2,
@@ -4063,7 +4322,7 @@ import { ToolbarButton } from "@kopexa/toolbar";
 import { useCallback as useCallback14, useEffect as useEffect16, useState as useState15 } from "react";
 
 // src/ui/link-popover/use-link-popover.ts
-import { isMarkInSchema } from "@kopexa/editor-utils";
+import { isMarkInSchema, useTiptapEditor as useTiptapEditor2 } from "@kopexa/editor-utils";
 import { LinkIcon } from "@kopexa/icons";
 import * as React7 from "react";
 
@@ -4269,7 +4528,7 @@ function useLinkPopover(config) {
     hideWhenUnavailable = false,
     onSetLink
   } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor2(providedEditor);
   const { isVisible, canSet, isActive } = useLinkState({
     editor,
     hideWhenUnavailable
@@ -4432,7 +4691,7 @@ function LinkPopover({
   children,
   ...buttonProps
 }) {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor3(providedEditor);
   const [isOpen, setIsOpen] = useState15(false);
   const {
     isVisible,
@@ -4519,7 +4778,11 @@ function LinkPopover({
 LinkButton.displayName = "LinkButton";
 
 // src/ui/mark-button/index.tsx
-import { isMarkInSchema as isMarkInSchema2, isNodeTypeSelected } from "@kopexa/editor-utils";
+import {
+  isMarkInSchema as isMarkInSchema2,
+  isNodeTypeSelected,
+  useTiptapEditor as useTiptapEditor4
+} from "@kopexa/editor-utils";
 import {
   BoldIcon,
   CodeIcon,
@@ -4531,7 +4794,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 useMemo14 } from "react";
+import { useCallback as useCallback15, useMemo as useMemo13 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var markIcons = {
   bold: BoldIcon,
@@ -4614,7 +4877,7 @@ var MarkButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor4(providedEditor);
   const {
     markInSchema,
     isDisabled,
@@ -4632,7 +4895,7 @@ var MarkButton = ({
     },
     [onClick, isDisabled, editor, type]
   );
-  const show = useMemo14(() => {
+  const show = useMemo13(() => {
     return shouldShowMarkButton({
       editor,
       type,
@@ -4707,7 +4970,7 @@ function BubbleMenu({ editor }) {
 }
 
 // src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
-import { getEditorExtension } from "@kopexa/editor-utils";
+import { getEditorExtension, useTiptapEditor as useTiptapEditor5 } from "@kopexa/editor-utils";
 import * as React9 from "react";
 
 // src/hooks/use-floating-toolbar-visibility.ts
@@ -4732,7 +4995,7 @@ function useScrollToHash(config = {}) {
     onTargetNotFound = () => {
     }
   } = config;
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor5(providedEditor);
   const scrollToNode = React9.useCallback(
     (id) => {
       var _a, _b, _c;
@@ -4997,7 +5260,11 @@ import {
 import * as React10 from "react";
 
 // src/ui/table-button/use-table.ts
-import { isNodeInSchema, isNodeTypeSelected as isNodeTypeSelected2 } from "@kopexa/editor-utils";
+import {
+  isNodeInSchema,
+  isNodeTypeSelected as isNodeTypeSelected2,
+  useTiptapEditor as useTiptapEditor6
+} 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";
@@ -5043,7 +5310,7 @@ function useTableBlock(config) {
     hideWhenUnavailable = false,
     onToggled
   } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor6(providedEditor);
   const [isVisible, setIsVisible] = useState18(true);
   const canToggleState = canToggle(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
@@ -5604,6 +5871,7 @@ var List = ({
 };
 
 // src/presets/basic/editor-header.tsx
+import { useTiptapEditor as useTiptapEditor23 } from "@kopexa/editor-utils";
 import { MoreVerticalIcon } from "@kopexa/icons";
 import { Popover as Popover3 } from "@kopexa/popover";
 import {
@@ -5718,6 +5986,7 @@ function useCursorVisibility({
 }
 
 // src/ui/blockquote-button/blockquote-button.tsx
+import { useTiptapEditor as useTiptapEditor8 } from "@kopexa/editor-utils";
 import { ToolbarButton as ToolbarButton3 } from "@kopexa/toolbar";
 import * as React15 from "react";
 
@@ -5726,7 +5995,8 @@ import {
   findNodePosition,
   isNodeInSchema as isNodeInSchema3,
   isNodeTypeSelected as isNodeTypeSelected3,
-  isValidPosition
+  isValidPosition,
+  useTiptapEditor as useTiptapEditor7
 } from "@kopexa/editor-utils";
 import { BlockquoteIcon as BlockquoteIcon2 } from "@kopexa/icons";
 import { NodeSelection as NodeSelection2, TextSelection as TextSelection2 } from "@tiptap/pm/state";
@@ -5806,7 +6076,7 @@ function useBlockquote(config) {
     hideWhenUnavailable = false,
     onToggled
   } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor7(providedEditor);
   const [isVisible, setIsVisible] = React14.useState(true);
   const canToggle3 = canToggleBlockquote(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("blockquote")) || false;
@@ -5852,7 +6122,7 @@ var BlockquoteButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor8(providedEditor);
   const {
     isVisible,
     canToggle: canToggle3,
@@ -5903,6 +6173,7 @@ var BlockquoteButton = ({
 };
 
 // src/ui/codeblock-button/code-block-button.tsx
+import { useTiptapEditor as useTiptapEditor10 } from "@kopexa/editor-utils";
 import { CodeblockIcon as CodeblockIcon2 } from "@kopexa/icons";
 import { ToolbarButton as ToolbarButton4 } from "@kopexa/toolbar";
 import { useCallback as useCallback24 } from "react";
@@ -5912,7 +6183,8 @@ import {
   findNodePosition as findNodePosition2,
   isNodeInSchema as isNodeInSchema4,
   isNodeTypeSelected as isNodeTypeSelected4,
-  isValidPosition as isValidPosition2
+  isValidPosition as isValidPosition2,
+  useTiptapEditor as useTiptapEditor9
 } from "@kopexa/editor-utils";
 import { CodeblockIcon } from "@kopexa/icons";
 import { NodeSelection as NodeSelection3, TextSelection as TextSelection3 } from "@tiptap/pm/state";
@@ -5992,7 +6264,7 @@ function useCodeBlock(config) {
     hideWhenUnavailable = false,
     onToggled
   } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor9(providedEditor);
   const [isVisible, setIsVisible] = React16.useState(true);
   const canToggleState = canToggle2(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("codeBlock")) || false;
@@ -6038,7 +6310,7 @@ var CodeBlockButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor10(providedEditor);
   const { isVisible, canToggle: canToggle3, isActive, handleToggle, label, shortcutKeys } = useCodeBlock({
     editor,
     hideWhenUnavailable,
@@ -6079,18 +6351,24 @@ var CodeBlockButton = ({
 
 // src/ui/color-highlight-popover/color-highlight-popover.tsx
 import { IconButton as IconButton8 } from "@kopexa/button";
+import { useTiptapEditor as useTiptapEditor13 } from "@kopexa/editor-utils";
 import { BanIcon, HighlighterIcon as HighlighterIcon2 } from "@kopexa/icons";
 import { Popover as Popover2 } from "@kopexa/popover";
 import { ToolbarSeparator as ToolbarSeparator2 } from "@kopexa/toolbar";
-import { useMemo as useMemo17, useRef as useRef10, useState as useState24 } from "react";
+import { useMemo as useMemo16, useRef as useRef10, useState as useState24 } from "react";
 
 // src/ui/color-highlight-button/color-highlight-button.tsx
+import { useTiptapEditor as useTiptapEditor12 } from "@kopexa/editor-utils";
 import { colorHighlightButton } from "@kopexa/theme";
 import { ToolbarButton as ToolbarButton5 } from "@kopexa/toolbar";
-import { useCallback as useCallback26, useMemo as useMemo16 } from "react";
+import { useCallback as useCallback26, useMemo as useMemo15 } from "react";
 
 // src/ui/color-highlight-button/use-color-highlight.ts
-import { isMarkInSchema as isMarkInSchema3, isNodeTypeSelected as isNodeTypeSelected5 } from "@kopexa/editor-utils";
+import {
+  isMarkInSchema as isMarkInSchema3,
+  isNodeTypeSelected as isNodeTypeSelected5,
+  useTiptapEditor as useTiptapEditor11
+} from "@kopexa/editor-utils";
 import { HighlighterIcon } from "@kopexa/icons";
 import { useIsMobile } from "@kopexa/use-is-mobile";
 import * as React17 from "react";
@@ -6186,7 +6464,7 @@ function useColorHighlight(config) {
     hideWhenUnavailable = false,
     onApplied
   } = config;
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor11(providedEditor);
   const isMobile = useIsMobile();
   const [isVisible, setIsVisible] = React17.useState(true);
   const canColorHighlightState = canColorHighlight(editor);
@@ -6267,7 +6545,7 @@ var ColorHighlightButton = ({
   className,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor12(providedEditor);
   const {
     isVisible,
     canColorHighlight: canColorHighlight2,
@@ -6290,7 +6568,7 @@ var ColorHighlightButton = ({
     },
     [handleColorHighlight, onClick]
   );
-  const buttonStyle = useMemo16(
+  const buttonStyle = useMemo15(
     () => ({
       ...style,
       "--highlight-color": highlightColor
@@ -6374,7 +6652,7 @@ function ColorHighlightPopoverContent({
 }) {
   const { handleRemoveHighlight } = useColorHighlight({ editor });
   const containerRef = useRef10(null);
-  const menuItems = useMemo17(
+  const menuItems = useMemo16(
     () => [...colors, { label: "Remove highlight", value: "none" }],
     [colors]
   );
@@ -6441,7 +6719,7 @@ function ColorHighlightPopover({
   onApplied,
   ...props
 }) {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor13(providedEditor);
   const [isOpen, setIsOpen] = useState24(false);
   const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
     editor,
@@ -6474,14 +6752,14 @@ function ColorHighlightPopover({
 // src/ui/heading-dropdown-menu/index.tsx
 import { Button as Button8 } from "@kopexa/button";
 import { DropdownMenu } from "@kopexa/dropdown-menu";
-import { isNodeInSchema as isNodeInSchema6 } from "@kopexa/editor-utils";
+import { isNodeInSchema as isNodeInSchema6, useTiptapEditor as useTiptapEditor15 } from "@kopexa/editor-utils";
 import { ChevronDownIcon, HeadingIcon } from "@kopexa/icons";
 import { isNodeSelection as isNodeSelection6 } from "@tiptap/react";
 import * as React19 from "react";
 
 // src/ui/heading-button/index.tsx
 import { Button as Button7 } from "@kopexa/button";
-import { isNodeInSchema as isNodeInSchema5 } from "@kopexa/editor-utils";
+import { isNodeInSchema as isNodeInSchema5, useTiptapEditor as useTiptapEditor14 } from "@kopexa/editor-utils";
 import {
   HeadingFiveIcon,
   HeadingFourIcon,
@@ -6582,7 +6860,7 @@ var HeadingButton = ({
   ref,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor14(providedEditor);
   const {
     headingInSchema,
     isDisabled,
@@ -6646,7 +6924,7 @@ function HeadingDropdownMenu({
 }) {
   var _a;
   const [isOpen, setIsOpen] = React19.useState(false);
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor15(providedEditor);
   const headingInSchema = isNodeInSchema6("heading", editor);
   const handleOnOpenChange = React19.useCallback(
     (open) => {
@@ -6722,17 +7000,17 @@ function HeadingDropdownMenu({
 // src/ui/list-dropdown-menu/index.tsx
 import { Button as Button10 } from "@kopexa/button";
 import { DropdownMenu as DropdownMenu2 } from "@kopexa/dropdown-menu";
-import { isNodeInSchema as isNodeInSchema8 } from "@kopexa/editor-utils";
+import { isNodeInSchema as isNodeInSchema8, useTiptapEditor as useTiptapEditor17 } from "@kopexa/editor-utils";
 import { ChevronDownIcon as ChevronDownIcon2, ListIcon as ListIcon4 } from "@kopexa/icons";
 import { isNodeSelection as isNodeSelection8 } from "@tiptap/react";
-import { useCallback as useCallback30, useMemo as useMemo21, useState as useState26 } from "react";
+import { useCallback as useCallback30, useMemo as useMemo20, useState as useState26 } from "react";
 
 // src/ui/list-button/index.tsx
 import { Button as Button9 } from "@kopexa/button";
-import { isNodeInSchema as isNodeInSchema7 } from "@kopexa/editor-utils";
+import { isNodeInSchema as isNodeInSchema7, useTiptapEditor as useTiptapEditor16 } from "@kopexa/editor-utils";
 import { ListIcon as ListIcon3, ListOrderedIcon as ListOrderedIcon2, ListTodoIcon as ListTodoIcon2 } from "@kopexa/icons";
 import { isNodeSelection as isNodeSelection7 } from "@tiptap/react";
-import { useCallback as useCallback29, useMemo as useMemo20 } from "react";
+import { useCallback as useCallback29, useMemo as useMemo19 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var listOptions = [
   {
@@ -6836,7 +7114,7 @@ var ListButton = ({
   ref,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor16(providedEditor);
   const { listInSchema, listOption, isActive, shortcutKey } = useListState(
     editor,
     type
@@ -6851,7 +7129,7 @@ var ListButton = ({
     },
     [onClick, editor, type]
   );
-  const show = useMemo20(() => {
+  const show = useMemo19(() => {
     return shouldShowListButton({
       editor,
       type,
@@ -6916,7 +7194,7 @@ function useListDropdownState(editor, availableTypes) {
   const listInSchema = availableTypes.some(
     (type) => isNodeInSchema8(type, editor)
   );
-  const filteredLists = useMemo21(
+  const filteredLists = useMemo20(
     () => getFilteredListOptions(availableTypes),
     [availableTypes]
   );
@@ -6954,7 +7232,7 @@ function ListDropdownMenu({
   onOpenChange,
   ...props
 }) {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor17(providedEditor);
   const {
     isOpen,
     listInSchema,
@@ -6964,7 +7242,7 @@ function ListDropdownMenu({
     handleOpenChange
   } = useListDropdownState(editor, types);
   const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = useMemo21(() => {
+  const show = useMemo20(() => {
     return shouldShowListDropdown({
       editor,
       listTypes: types,
@@ -7012,6 +7290,7 @@ function ListDropdownMenu({
 }
 
 // src/ui/table-button/index.tsx
+import { useTiptapEditor as useTiptapEditor18 } from "@kopexa/editor-utils";
 import { ToolbarButton as ToolbarButton6 } from "@kopexa/toolbar";
 import { useCallback as useCallback31 } from "react";
 import { Fragment as Fragment6, jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -7024,7 +7303,7 @@ var TableButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor18(providedEditor);
   const {
     isVisible,
     canToggle: canToggle3,
@@ -7075,10 +7354,15 @@ var TableButton = ({
 
 // src/ui/text-align-button/text-align-button.tsx
 import { IconButton as IconButton9 } from "@kopexa/button";
+import { useTiptapEditor as useTiptapEditor20 } from "@kopexa/editor-utils";
 import { useCallback as useCallback33 } from "react";
 
 // src/ui/text-align-button/use-text-align.ts
-import { isExtensionAvailable as isExtensionAvailable2, isNodeTypeSelected as isNodeTypeSelected6 } from "@kopexa/editor-utils";
+import {
+  isExtensionAvailable as isExtensionAvailable2,
+  isNodeTypeSelected as isNodeTypeSelected6,
+  useTiptapEditor as useTiptapEditor19
+} from "@kopexa/editor-utils";
 import {
   AlignCenterIcon,
   AlignJustifyIcon,
@@ -7142,7 +7426,7 @@ function useTextAlign(config) {
     hideWhenUnavailable = false,
     onAligned
   } = config;
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor19(providedEditor);
   const [isVisible, setIsVisible] = useState27(true);
   const canAlign = canSetTextAlign(editor, align);
   const isActive = isTextAlignActive(editor, align);
@@ -7189,7 +7473,7 @@ var TextAlignButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor20(providedEditor);
   const {
     isVisible,
     handleTextAlign,
@@ -7237,11 +7521,12 @@ var TextAlignButton = ({
 };
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
+import { useTiptapEditor as useTiptapEditor22 } from "@kopexa/editor-utils";
 import { ToolbarButton as ToolbarButton7 } from "@kopexa/toolbar";
 import { useCallback as useCallback35 } from "react";
 
 // src/ui/undo-redo-button/use-undo-redo.ts
-import { isNodeTypeSelected as isNodeTypeSelected7 } from "@kopexa/editor-utils";
+import { isNodeTypeSelected as isNodeTypeSelected7, useTiptapEditor as useTiptapEditor21 } from "@kopexa/editor-utils";
 import { RedoIcon, UndoIcon } from "@kopexa/icons";
 import { useCallback as useCallback34, useEffect as useEffect28, useState as useState28 } from "react";
 var UNDO_REDO_SHORTCUT_KEYS = {
@@ -7282,7 +7567,7 @@ function useUndoRedo(config) {
     hideWhenUnavailable = false,
     onExecuted
   } = config;
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor21(providedEditor);
   const [isVisible, setIsVisible] = useState28(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
   useEffect28(() => {
@@ -7327,7 +7612,7 @@ var UndoRedoButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor22(providedEditor);
   const { isVisible, handleAction, label, canExecute, Icon, shortcutKeys } = useUndoRedo({
     editor,
     action,
@@ -7372,7 +7657,7 @@ var EditorHeader = ({
   variant
 }) => {
   var _a, _b;
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor23(providedEditor);
   const isMobile = useIsMobile2();
   const windowSize = useWindowSize();
   const { styles } = useEditorUIContext();
@@ -7449,7 +7734,7 @@ function MoreOptions({
   hideWhenUnavailable = false,
   ...props
 }) {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor23(providedEditor);
   const [show, setShow] = useState29(false);
   useEffect29(() => {
     if (!editor) return;
@@ -7542,7 +7827,7 @@ function shouldShowMoreOptions(params) {
 }
 
 // src/presets/basic/index.tsx
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var BasicEditor = ({
   variant,
   bordered,
@@ -7655,7 +7940,23 @@ var EditorContentArea = ({
         }
       ),
       isEditable && /* @__PURE__ */ jsx33(BubbleMenu, { editor }),
-      isEditable && /* @__PURE__ */ jsx33(LinkBubble, { editor })
+      isEditable && /* @__PURE__ */ jsx33(LinkBubble, { editor }),
+      isEditable && /* @__PURE__ */ jsxs23(Fragment8, { children: [
+        /* @__PURE__ */ jsx33(TableHandle, { editor }),
+        /* @__PURE__ */ jsx33(
+          TableSelectionOverlay,
+          {
+            showResizeHandles: true,
+            cellMenu: (props) => /* @__PURE__ */ jsx33(
+              TableCellHandleMenu,
+              {
+                editor: props.editor,
+                onOpenChange: props.onOpenChange
+              }
+            )
+          }
+        )
+      ] })
     ] })
   );
 };