@lobehub/editor 1.8.2 → 1.8.4

package/es/plugins/math/react/{component → components}/MathEditor.js

@@ -8,10 +8,11 @@ import { mergeRegister } from '@lexical/utils';
 import { $getSelection, $isElementNode, $isNodeSelection, $isRangeSelection, $isTextNode } from 'lexical';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useLexicalComposerContext, useLexicalEditor } from "../../../../editor-kernel/react";
+import PortalAnchor from "../../../../editor-kernel/react/PortalAnchor";
 import { SELECT_MATH_SIDE_COMMAND, UPDATE_MATH_COMMAND } from "../../command";
 import { $isMathNode, MathBlockNode } from "../../node";
-import { MathEditorContainer } from "./MathEditorContainer";
-import { MathEditorContent } from "./MathEditorContent";
+import MathEditorContainer from "./MathEditorContainer";
+import MathEditorContent from "./MathEditorContent";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var MathEdit = /*#__PURE__*/memo(function (_ref) {
@@ -294,12 +295,14 @@ var MathEdit = /*#__PURE__*/memo(function (_ref) {
   }
 
   // 否则使用默认的 MathEditorContainer
-  return /*#__PURE__*/_jsx(MathEditorContainer, {
-    isBlockMode: isBlockMode,
-    mathDOM: mathDOM,
-    onFocus: handleFocus,
-    prev: prev,
-    children: mathEditorContent
+  return /*#__PURE__*/_jsx(PortalAnchor, {
+    children: /*#__PURE__*/_jsx(MathEditorContainer, {
+      isBlockMode: isBlockMode,
+      mathDOM: mathDOM,
+      onFocus: handleFocus,
+      prev: prev,
+      children: mathEditorContent
+    })
   });
 });
 export default MathEdit;

package/es/plugins/math/react/{component → components}/MathEditorContainer.d.ts

@@ -11,4 +11,5 @@ export interface MathEditorContainerProps {
     /** 是否从前一个位置进入 */
     prev: boolean;
 }
-export declare const MathEditorContainer: import("react").NamedExoticComponent<MathEditorContainerProps>;
+declare const MathEditorContainer: import("react").NamedExoticComponent<MathEditorContainerProps>;
+export default MathEditorContainer;

package/es/plugins/math/react/{component → components}/MathEditorContainer.js

@@ -1,9 +1,9 @@
-import { computePosition, flip, offset, shift } from '@floating-ui/dom';
 import { Block } from '@lobehub/ui';
 import { memo, useEffect, useRef } from 'react';
+import { cleanPosition, updatePosition } from "../../../../utils/updatePosition";
 import { useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
+var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     isBlockMode = _ref.isBlockMode,
     mathDOM = _ref.mathDOM,
@@ -12,34 +12,31 @@ export var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
   var divRef = useRef(null);
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
+  var updateMathPosition = function updateMathPosition() {
+    return updatePosition({
+      callback: function callback() {
+        if (!divRef.current || !mathDOM) return;
+        if (!isBlockMode) {
+          divRef.current.style.width = '';
+          return;
+        }
+        var editorContainer = mathDOM.closest('[contenteditable="true"]');
+        if (editorContainer) {
+          var containerRect = editorContainer.getBoundingClientRect();
+          divRef.current.style.width = "".concat(containerRect.width, "px");
+        }
+      },
+      floating: divRef.current,
+      reference: mathDOM
+    });
+  };
   useEffect(function () {
     if (!mathDOM || !divRef.current) return;
     var floating = divRef.current;
-    var updatePosition = function updatePosition() {
-      if (!mathDOM || !floating) return;
-      computePosition(mathDOM, floating, {
-        middleware: [offset(8), flip(), shift()],
-        placement: 'bottom-start'
-      }).then(function (_ref2) {
-        var x = _ref2.x,
-          y = _ref2.y;
-        if (!floating) return;
-        floating.style.left = "".concat(x, "px");
-        floating.style.top = "".concat(y, "px");
-        floating.style.width = '';
-        if (isBlockMode) {
-          var _editorContainer = mathDOM.closest('[contenteditable="true"]');
-          if (_editorContainer) {
-            var containerRect = _editorContainer.getBoundingClientRect();
-            floating.style.width = "".concat(containerRect.width, "px");
-          }
-        }
-      });
-    };
 
     // 监听尺寸变化，随内容变化重新定位
     var resizeObserver = new ResizeObserver(function () {
-      return updatePosition();
+      return updateMathPosition();
     });
     resizeObserver.observe(mathDOM);
     resizeObserver.observe(floating);
@@ -50,19 +47,17 @@ export var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
     }
 
     // 窗口尺寸变化时也重新定位
-    window.addEventListener('resize', updatePosition);
+    window.addEventListener('resize', updateMathPosition);
     return function () {
       resizeObserver.disconnect();
-      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('resize', updateMathPosition);
     };
   }, [mathDOM, prev, isBlockMode, onFocus]);
 
   // 当没有 mathDOM 时，隐藏容器
   useEffect(function () {
-    if (!mathDOM && divRef.current) {
-      divRef.current.style.left = "-9999px";
-      divRef.current.style.top = "-9999px";
-    }
+    if (mathDOM || !divRef.current) return;
+    cleanPosition(divRef.current);
   }, [mathDOM]);
   return /*#__PURE__*/_jsx(Block, {
     className: styles.mathEditor,
@@ -76,4 +71,5 @@ export var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
     children: children
   });
 });
-MathEditorContainer.displayName = 'MathEditorContainer';
+MathEditorContainer.displayName = 'MathEditorContainer';
+export default MathEditorContainer;

package/es/plugins/math/react/{component → components}/MathEditorContent.d.ts

@@ -25,4 +25,5 @@ export interface MathEditorContentProps {
     /** 当前输入值 */
     value: string;
 }
-export declare const MathEditorContent: import("react").NamedExoticComponent<MathEditorContentProps>;
+declare const MathEditorContent: import("react").NamedExoticComponent<MathEditorContentProps>;
+export default MathEditorContent;

package/es/plugins/math/react/{component → components}/MathEditorContent.js

@@ -15,7 +15,7 @@ import { useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-export var MathEditorContent = /*#__PURE__*/memo(function (_ref) {
+var MathEditorContent = /*#__PURE__*/memo(function (_ref) {
   var focusRef = _ref.focusRef,
     mathNode = _ref.mathNode,
     onArrowLeft = _ref.onArrowLeft,
@@ -164,4 +164,5 @@ export var MathEditorContent = /*#__PURE__*/memo(function (_ref) {
     })]
   });
 });
-MathEditorContent.displayName = 'MathEditorContent';
+MathEditorContent.displayName = 'MathEditorContent';
+export default MathEditorContent;

package/es/plugins/math/react/index.js

@@ -10,8 +10,8 @@ import { useLayoutEffect } from 'react';
 import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context";
 import { MarkdownPlugin } from "../../markdown";
 import { MathPlugin } from "../plugin";
-import MathEdit from "./component/MathEditor";
-import MathInline from "./component/MathInline";
+import MathEdit from "./components/MathEditor";
+import MathInline from "./components/MathInline";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var ReactMathPlugin = function ReactMathPlugin(_ref) {

package/es/plugins/math/react/style.js

@@ -10,7 +10,7 @@ export var useStyles = createStyles(function (_ref) {
   return {
     mathInline: cx(latex, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        display: inline-block;\n        border-radius: calc(var(--lobe-markdown-border-radius) * 0.5px);\n      "])))),
     mathBlock: cx(latex, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: auto hidden;\n        display: block;\n        border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n        white-space: nowrap;\n      "])))),
-    mathEditor: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: 999;\n      inset-block-start: -9999px;\n      inset-inline-start: -9999px;\n\n      width: 320px;\n\n      background: ", ";\n\n      textarea {\n        width: 100%;\n\n        font-family: ", ";\n        font-size: 13px;\n\n        background: transparent !important;\n\n        transition: none !important;\n      }\n    "])), token.colorBgElevated, token.fontFamilyCode),
+    mathEditor: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: 999;\n      width: 320px;\n      background: ", ";\n\n      textarea {\n        width: 100%;\n\n        font-family: ", ";\n        font-size: 13px;\n\n        background: transparent !important;\n\n        transition: none !important;\n      }\n    "])), token.colorBgElevated, token.fontFamilyCode),
     mathEditorFooter: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      border-block-start: 1px solid ", ";\n      background: ", ";\n    "])), token.colorBorderSecondary, token.colorFillQuaternary)
   };
 });

package/es/plugins/slash/react/components/DefaultSlashMenu.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { SlashMenuProps } from '../type';
+type DefaultSlashMenuProps = Omit<SlashMenuProps, 'customRender' | 'onActiveKeyChange' | 'editor'>;
+declare const DefaultSlashMenu: import("react").NamedExoticComponent<DefaultSlashMenuProps>;
+export default DefaultSlashMenu;

package/es/plugins/slash/react/components/DefaultSlashMenu.js

@@ -0,0 +1,48 @@
+'use client';
+
+import { Dropdown } from '@lobehub/ui';
+import { memo, useCallback } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DefaultSlashMenu = /*#__PURE__*/memo(function (_ref) {
+  var activeKey = _ref.activeKey,
+    anchorClassName = _ref.anchorClassName,
+    loading = _ref.loading,
+    onSelect = _ref.onSelect,
+    open = _ref.open,
+    options = _ref.options,
+    position = _ref.position,
+    _onClose = _ref.onClose;
+  var handleMenuClick = useCallback(function (_ref2) {
+    var key = _ref2.key;
+    var option = options.find(function (item) {
+      return 'key' in item && item.key === key;
+    });
+    if (option) onSelect(option);
+  }, [options, onSelect]);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      left: position.x,
+      position: 'fixed',
+      top: position.y,
+      zIndex: 9999
+    },
+    children: /*#__PURE__*/_jsx(Dropdown, {
+      menu: {
+        // @ts-ignore
+        activeKey: activeKey,
+        items: loading ? [{
+          disabled: true,
+          key: 'loading',
+          label: 'Loading...'
+        }] : options,
+        onClick: handleMenuClick
+      },
+      open: open,
+      children: /*#__PURE__*/_jsx("span", {
+        className: anchorClassName
+      })
+    })
+  });
+});
+DefaultSlashMenu.displayName = 'DefaultSlashMenu';
+export default DefaultSlashMenu;

package/es/plugins/slash/react/components/SlashMenu.d.ts

@@ -1,8 +1,8 @@
-import { type FC } from 'react';
+/// <reference types="react" />
 import type { SlashMenuProps } from '../type';
 /**
  * SlashMenu component - Only responsible for rendering the menu UI
  * All state management and plugin registration is handled by ReactSlashPlugin
  */
-declare const SlashMenu: FC<SlashMenuProps>;
+declare const SlashMenu: import("react").NamedExoticComponent<SlashMenuProps>;
 export default SlashMenu;

package/es/plugins/slash/react/components/SlashMenu.js

@@ -1,13 +1,14 @@
 'use client';
 
-import { Dropdown } from '@lobehub/ui';
-import { useCallback } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import DefaultSlashMenu from "./DefaultSlashMenu";
+
 /**
  * SlashMenu component - Only responsible for rendering the menu UI
  * All state management and plugin registration is handled by ReactSlashPlugin
  */
-var SlashMenu = function SlashMenu(_ref) {
+import { jsx as _jsx } from "react/jsx-runtime";
+var SlashMenu = /*#__PURE__*/memo(function (_ref) {
   var activeKey = _ref.activeKey,
     anchorClassName = _ref.anchorClassName,
     CustomRender = _ref.customRender,
@@ -17,18 +18,11 @@ var SlashMenu = function SlashMenu(_ref) {
     open = _ref.open,
     options = _ref.options,
     position = _ref.position,
-    _onClose = _ref.onClose;
+    onClose = _ref.onClose;
   // Adapter for custom render component onSelect
   var customRenderOnSelect = useCallback(function (option) {
     onSelect(option);
   }, [onSelect]);
-  var handleMenuClick = useCallback(function (_ref2) {
-    var key = _ref2.key;
-    var option = options.find(function (item) {
-      return 'key' in item && item.key === key;
-    });
-    if (option) onSelect(option);
-  }, [options, onSelect]);
 
   /**
    * Render the custom component if it exists
@@ -43,30 +37,16 @@ var SlashMenu = function SlashMenu(_ref) {
       setActiveKey: onActiveKeyChange
     });
   }
-  return /*#__PURE__*/_jsx("div", {
-    style: {
-      left: position.x,
-      position: 'fixed',
-      top: position.y,
-      zIndex: 1050
-    },
-    children: /*#__PURE__*/_jsx(Dropdown, {
-      menu: {
-        // @ts-ignore
-        activeKey: activeKey,
-        items: loading ? [{
-          disabled: true,
-          key: 'loading',
-          label: 'Loading...'
-        }] : options,
-        onClick: handleMenuClick
-      },
-      open: open,
-      children: /*#__PURE__*/_jsx("span", {
-        className: anchorClassName
-      })
-    })
+  return /*#__PURE__*/_jsx(DefaultSlashMenu, {
+    activeKey: activeKey,
+    anchorClassName: anchorClassName,
+    loading: loading,
+    onClose: onClose,
+    onSelect: onSelect,
+    open: open,
+    options: options,
+    position: position
   });
-};
+});
 SlashMenu.displayName = 'SlashMenu';
 export default SlashMenu;

package/es/plugins/table/react/TableActionMenu/ActionMenu.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { TableCellNode } from '@lexical/table';
+import type { LexicalEditor } from 'lexical';
+import { type ReactNode } from 'react';
+interface TableCellActionMenuProps {
+    cellMerge?: boolean;
+    children: ReactNode;
+    className?: string;
+    editor: LexicalEditor;
+    tableCellNode: TableCellNode;
+}
+declare const TableActionMenu: import("react").NamedExoticComponent<TableCellActionMenuProps>;
+export default TableActionMenu;

package/es/plugins/table/react/TableActionMenu/ActionMenu.js

@@ -0,0 +1,285 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { $computeTableMapSkipCellCheck, $deleteTableColumnAtSelection, $deleteTableRowAtSelection, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isTableCellNode, $isTableSelection, $mergeCells, $unmergeCell, TableCellHeaderStates, TableCellNode, getTableElement, getTableObserverFromTableElement } from '@lexical/table';
+import { Dropdown } from '@lobehub/ui';
+import { $getSelection, $setSelection } from 'lexical';
+import { Grid2X2XIcon, PanelBottomCloseIcon, PanelLeftCloseIcon, PanelRightCloseIcon, PanelTopCloseIcon, TableColumnsSplitIcon, TableRowsSplitIcon } from 'lucide-react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
+import { $canUnmerge, $selectLastDescendant, computeSelectionCount, currentCellBackgroundColor } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+var TableActionMenu = /*#__PURE__*/memo(function (_ref) {
+  var editor = _ref.editor,
+    _tableCellNode = _ref.tableCellNode,
+    cellMerge = _ref.cellMerge,
+    children = _ref.children;
+  var _useState = useState(_tableCellNode),
+    _useState2 = _slicedToArray(_useState, 2),
+    tableCellNode = _useState2[0],
+    updateTableCellNode = _useState2[1];
+  var _useState3 = useState({
+      columns: 1,
+      rows: 1
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectionCounts = _useState4[0],
+    updateSelectionCounts = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    canMergeCells = _useState6[0],
+    setCanMergeCells = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    canUnmergeCell = _useState8[0],
+    setCanUnmergeCell = _useState8[1];
+  var _useState9 = useState(function () {
+      return currentCellBackgroundColor(editor) || '';
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    setBackgroundColor = _useState10[1];
+  var t = useTranslation();
+  useEffect(function () {
+    return editor.registerMutationListener(TableCellNode, function (nodeMutations) {
+      var nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === 'updated';
+      if (nodeUpdated) {
+        editor.getEditorState().read(function () {
+          updateTableCellNode(tableCellNode.getLatest());
+        });
+        setBackgroundColor(currentCellBackgroundColor(editor) || '');
+      }
+    }, {
+      skipInitialization: true
+    });
+  }, [editor, tableCellNode]);
+  useEffect(function () {
+    editor.getEditorState().read(function () {
+      var selection = $getSelection();
+      // Merge cells
+      if ($isTableSelection(selection)) {
+        var currentSelectionCounts = computeSelectionCount(selection);
+        updateSelectionCounts(computeSelectionCount(selection));
+        setCanMergeCells(currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1);
+      }
+      // Unmerge cell
+      setCanUnmergeCell($canUnmerge());
+    });
+  }, [editor]);
+  var clearTableSelection = useCallback(function () {
+    editor.update(function () {
+      if (tableCellNode.isAttached()) {
+        var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+        var tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
+        if (tableElement === null) {
+          throw new Error('TableActionMenu: Expected to find tableElement in DOM');
+        }
+        var tableObserver = getTableObserverFromTableElement(tableElement);
+        if (tableObserver !== null) {
+          tableObserver.$clearHighlight();
+        }
+        tableNode.markDirty();
+        updateTableCellNode(tableCellNode.getLatest());
+      }
+      $setSelection(null);
+    });
+  }, [editor, tableCellNode]);
+  var mergeTableCellsAtSelection = function mergeTableCellsAtSelection() {
+    editor.update(function () {
+      var selection = $getSelection();
+      if (!$isTableSelection(selection)) {
+        return;
+      }
+      var nodes = selection.getNodes();
+      var tableCells = nodes.filter($isTableCellNode);
+      var targetCell = $mergeCells(tableCells);
+      if (targetCell) {
+        $selectLastDescendant(targetCell);
+      }
+    });
+  };
+  var unmergeTableCellsAtSelection = function unmergeTableCellsAtSelection() {
+    editor.update(function () {
+      $unmergeCell();
+    });
+  };
+  var insertTableRowAtSelection = useCallback(function (shouldInsertAfter) {
+    editor.update(function () {
+      for (var i = 0; i < selectionCounts.rows; i++) {
+        $insertTableRowAtSelection(shouldInsertAfter);
+      }
+    });
+  }, [editor, selectionCounts.rows]);
+  var insertTableColumnAtSelection = useCallback(function (shouldInsertAfter) {
+    editor.update(function () {
+      for (var i = 0; i < selectionCounts.columns; i++) {
+        $insertTableColumnAtSelection(shouldInsertAfter);
+      }
+    });
+  }, [editor, selectionCounts.columns]);
+  var deleteTableRowAtSelection = useCallback(function () {
+    editor.update(function () {
+      $deleteTableRowAtSelection();
+    });
+  }, [editor]);
+  var deleteTableAtSelection = useCallback(function () {
+    editor.update(function () {
+      var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+      tableNode.remove();
+      clearTableSelection();
+    });
+  }, [editor, tableCellNode, clearTableSelection]);
+  var deleteTableColumnAtSelection = useCallback(function () {
+    editor.update(function () {
+      $deleteTableColumnAtSelection();
+    });
+  }, [editor]);
+  var toggleTableRowIsHeader = useCallback(function () {
+    editor.update(function () {
+      var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+      var tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+      var _$computeTableMapSkip = $computeTableMapSkipCellCheck(tableNode, null, null),
+        _$computeTableMapSkip2 = _slicedToArray(_$computeTableMapSkip, 1),
+        gridMap = _$computeTableMapSkip2[0];
+      var rowCells = new Set();
+      var newStyle = tableCellNode.getHeaderStyles() ^ TableCellHeaderStates.ROW;
+      for (var col = 0; col < gridMap[tableRowIndex].length; col++) {
+        var mapCell = gridMap[tableRowIndex][col];
+        if (!(mapCell !== null && mapCell !== void 0 && mapCell.cell)) {
+          continue;
+        }
+        if (!rowCells.has(mapCell.cell)) {
+          rowCells.add(mapCell.cell);
+          mapCell.cell.setHeaderStyles(newStyle, TableCellHeaderStates.ROW);
+        }
+      }
+      clearTableSelection();
+    });
+  }, [editor, tableCellNode, clearTableSelection]);
+  var toggleTableColumnIsHeader = useCallback(function () {
+    editor.update(function () {
+      var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+      var tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
+      var _$computeTableMapSkip3 = $computeTableMapSkipCellCheck(tableNode, null, null),
+        _$computeTableMapSkip4 = _slicedToArray(_$computeTableMapSkip3, 1),
+        gridMap = _$computeTableMapSkip4[0];
+      var columnCells = new Set();
+      var newStyle = tableCellNode.getHeaderStyles() ^ TableCellHeaderStates.COLUMN;
+      var _iterator = _createForOfIteratorHelper(gridMap),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var element = _step.value;
+          var mapCell = element[tableColumnIndex];
+          if (!(mapCell !== null && mapCell !== void 0 && mapCell.cell)) {
+            continue;
+          }
+          if (!columnCells.has(mapCell.cell)) {
+            columnCells.add(mapCell.cell);
+            mapCell.cell.setHeaderStyles(newStyle, TableCellHeaderStates.COLUMN);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      clearTableSelection();
+    });
+  }, [editor, tableCellNode, clearTableSelection]);
+
+  // Create menu items array with useMemo for performance
+  var menuItems = useMemo(function () {
+    return [{
+      icon: PanelTopCloseIcon,
+      key: 'table-insert-row-above',
+      label: t("table.insertRowAbove", {
+        count: selectionCounts.rows
+      }),
+      onClick: function onClick() {
+        return insertTableRowAtSelection(false);
+      }
+    }, {
+      icon: PanelBottomCloseIcon,
+      key: 'table-insert-row-below',
+      label: t("table.insertRowBelow", {
+        count: selectionCounts.rows
+      }),
+      onClick: function onClick() {
+        return insertTableRowAtSelection(true);
+      }
+    }, {
+      type: 'divider'
+    },
+    // Column operations
+    {
+      icon: PanelLeftCloseIcon,
+      key: 'table-insert-column-before',
+      // label: `Insert ${selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`} left`,
+      label: t("table.insertColumnLeft", {
+        count: selectionCounts.columns
+      }),
+      onClick: function onClick() {
+        return insertTableColumnAtSelection(false);
+      }
+    }, {
+      icon: PanelRightCloseIcon,
+      key: 'table-insert-column-after',
+      // label: `Insert ${selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`} right`,
+      label: t("table.insertColumnRight", {
+        count: selectionCounts.columns
+      }),
+      onClick: function onClick() {
+        return insertTableColumnAtSelection(true);
+      }
+    }, {
+      type: 'divider'
+    },
+    // Delete operations
+    {
+      icon: TableColumnsSplitIcon,
+      key: 'table-delete-columns',
+      // label: 'Delete column',
+      label: t("table.deleteColumn"),
+      onClick: function onClick() {
+        return deleteTableColumnAtSelection();
+      }
+    }, {
+      icon: TableRowsSplitIcon,
+      key: 'table-delete-rows',
+      // label: 'Delete row',
+      label: t("table.deleteRow"),
+      onClick: function onClick() {
+        return deleteTableRowAtSelection();
+      }
+    }, {
+      type: 'divider'
+    }, {
+      icon: Grid2X2XIcon,
+      key: 'table-delete',
+      // label: 'Delete table',
+      label: t("table.delete"),
+      onClick: function onClick() {
+        return deleteTableAtSelection();
+      }
+    }];
+  }, [cellMerge, canMergeCells, canUnmergeCell, selectionCounts.rows, selectionCounts.columns, tableCellNode.__headerState, mergeTableCellsAtSelection, unmergeTableCellsAtSelection, insertTableRowAtSelection, insertTableColumnAtSelection, deleteTableColumnAtSelection, deleteTableRowAtSelection, deleteTableAtSelection, toggleTableRowIsHeader, toggleTableColumnIsHeader]);
+  return /*#__PURE__*/_jsx(Dropdown, {
+    menu: {
+      items: menuItems
+    },
+    children: children
+  });
+});
+TableActionMenu.displayName = 'TableActionMenu';
+export default TableActionMenu;

package/es/plugins/table/react/TableActionMenu/index.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { LexicalEditor } from 'lexical';
-declare const _default: import("react").NamedExoticComponent<{
-    anchorElem?: HTMLElement | undefined;
+declare const TableActionMenu: import("react").NamedExoticComponent<{
     cellMerge?: boolean | undefined;
     editor: LexicalEditor;
 }>;
-export default _default;
+export default TableActionMenu;