@blocklet/editor 2.2.46 → 2.3.0

package/lib/main/plugins/TableActionMenuPlugin/index.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import useLexicalEditable from '@lexical/react/useLexicalEditable';
-import { $deleteTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $getNodeTriplet, $getTableCellNodeFromLexicalNode, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumn__EXPERIMENTAL, $insertTableRow__EXPERIMENTAL, $isTableCellNode, $isTableRowNode, $isTableSelection, $unmergeCell, getTableObserverFromTableElement, TableCellHeaderStates, TableCellNode, } from '@lexical/table';
-import { $createParagraphNode, $getRoot, $getSelection, $isElementNode, $isParagraphNode, $isRangeSelection, $isTextNode, } from 'lexical';
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
+import { $computeTableMapSkipCellCheck, $deleteTableColumnAtSelection, $deleteTableRowAtSelection, $getNodeTriplet, $getTableCellNodeFromLexicalNode, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isTableCellNode, $isTableSelection, $mergeCells, $unmergeCell, getTableElement, getTableObserverFromTableElement, TableCellHeaderStates, TableCellNode, } from '@lexical/table';
+import { mergeRegister } from '@lexical/utils';
+import { $getSelection, $isElementNode, $isRangeSelection, $isTextNode, $setSelection, COMMAND_PRIORITY_CRITICAL, getDOMSelection, isDOMNode, SELECTION_CHANGE_COMMAND, } from 'lexical';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import invariant from '../../../shared/invariant';
+import { Box } from '@mui/material';
 import useModal from '../../hooks/useModal';
 import ColorPicker from '../../ui/ColorPicker';
+import DropDown, { DropDownItem } from '../../ui/DropDown';
 function computeSelectionCount(selection) {
     const selectionShape = selection.getShape();
     return {
@@ -15,41 +17,6 @@ function computeSelectionCount(selection) {
         rows: selectionShape.toY - selectionShape.fromY + 1,
     };
 }
-// This is important when merging cells as there is no good way to re-merge weird shapes (a result
-// of selecting merged cells and non-merged)
-function isTableSelectionRectangular(selection) {
-    const nodes = selection.getNodes();
-    const currentRows = [];
-    let currentRow = null;
-    let expectedColumns = null;
-    let currentColumns = 0;
-    for (let i = 0; i < nodes.length; i++) {
-        const node = nodes[i];
-        if ($isTableCellNode(node)) {
-            const row = node.getParentOrThrow();
-            invariant($isTableRowNode(row), 'Expected CellNode to have a RowNode parent');
-            if (currentRow !== row) {
-                if (expectedColumns !== null && currentColumns !== expectedColumns) {
-                    return false;
-                }
-                if (currentRow !== null) {
-                    expectedColumns = currentColumns;
-                }
-                currentRow = row;
-                currentColumns = 0;
-            }
-            const colSpan = node.__colSpan;
-            for (let j = 0; j < colSpan; j++) {
-                if (currentRows[currentColumns + j] === undefined) {
-                    currentRows[currentColumns + j] = 0;
-                }
-                currentRows[currentColumns + j] += node.__rowSpan;
-            }
-            currentColumns += colSpan;
-        }
-    }
-    return ((expectedColumns === null || currentColumns === expectedColumns) && currentRows.every((v) => v === currentRows[0]));
-}
 function $canUnmerge() {
     const selection = $getSelection();
     if (($isRangeSelection(selection) && !selection.isCollapsed()) ||
@@ -60,16 +27,6 @@ function $canUnmerge() {
     const [cell] = $getNodeTriplet(selection.anchor);
     return cell.__colSpan > 1 || cell.__rowSpan > 1;
 }
-function $cellContainsEmptyParagraph(cell) {
-    if (cell.getChildrenSize() !== 1) {
-        return false;
-    }
-    const firstChild = cell.getFirstChildOrThrow();
-    if (!$isParagraphNode(firstChild) || !firstChild.isEmpty()) {
-        return false;
-    }
-    return true;
-}
 function $selectLastDescendant(node) {
     const lastDescendant = node.getLastDescendant();
     if ($isTextNode(lastDescendant)) {
@@ -114,7 +71,7 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, setIsMenuOpen
                 });
                 setBackgroundColor(currentCellBackgroundColor(editor) || '');
             }
-        });
+        }, { skipInitialization: true });
     }, [editor, tableCellNode]);
     useEffect(() => {
         editor.getEditorState().read(() => {
@@ -123,8 +80,7 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, setIsMenuOpen
             if ($isTableSelection(selection)) {
                 const currentSelectionCounts = computeSelectionCount(selection);
                 updateSelectionCounts(computeSelectionCount(selection));
-                setCanMergeCells(isTableSelectionRectangular(selection) &&
-                    (currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1));
+                setCanMergeCells(currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1);
             }
             // Unmerge cell
             setCanUnmergeCell($canUnmerge());
@@ -150,15 +106,16 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, setIsMenuOpen
             let topPosition = menuButtonRect.top;
             if (topPosition + dropDownElementRect.height > window.innerHeight) {
                 const position = menuButtonRect.bottom - dropDownElementRect.height;
-                topPosition = (position < 0 ? margin : position) + window.pageYOffset;
+                topPosition = position < 0 ? margin : position;
             }
-            dropDownElement.style.top = `${topPosition + +window.pageYOffset}px`;
+            dropDownElement.style.top = `${topPosition}px`;
         }
     }, [contextRef, dropDownRef, editor]);
     useEffect(() => {
         function handleClickOutside(event) {
             if (dropDownRef.current != null &&
                 contextRef.current != null &&
+                isDOMNode(event.target) &&
                 !dropDownRef.current.contains(event.target) &&
                 !contextRef.current.contains(event.target)) {
                 setIsMenuOpen(false);
@@ -171,56 +128,31 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, setIsMenuOpen
         editor.update(() => {
             if (tableCellNode.isAttached()) {
                 const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-                const tableElement = editor.getElementByKey(tableNode.getKey());
-                if (!tableElement) {
-                    throw new Error('Expected to find tableElement in DOM');
+                const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
+                if (tableElement === null) {
+                    throw new Error('TableActionMenu: Expected to find tableElement in DOM');
                 }
-                const tableSelection = getTableObserverFromTableElement(tableElement);
-                if (tableSelection !== null) {
-                    tableSelection.clearHighlight();
+                const tableObserver = getTableObserverFromTableElement(tableElement);
+                if (tableObserver !== null) {
+                    tableObserver.$clearHighlight();
                 }
                 tableNode.markDirty();
                 updateTableCellNode(tableCellNode.getLatest());
             }
-            const rootNode = $getRoot();
-            rootNode.selectStart();
+            $setSelection(null);
         });
     }, [editor, tableCellNode]);
     const mergeTableCellsAtSelection = () => {
         editor.update(() => {
             const selection = $getSelection();
-            if ($isTableSelection(selection)) {
-                const { columns, rows } = computeSelectionCount(selection);
-                const nodes = selection.getNodes();
-                let firstCell = null;
-                for (let i = 0; i < nodes.length; i++) {
-                    const node = nodes[i];
-                    if ($isTableCellNode(node)) {
-                        if (firstCell === null) {
-                            node.setColSpan(columns).setRowSpan(rows);
-                            firstCell = node;
-                            const isEmpty = $cellContainsEmptyParagraph(node);
-                            let firstChild;
-                            // eslint-disable-next-line no-cond-assign
-                            if (isEmpty && $isParagraphNode((firstChild = node.getFirstChild()))) {
-                                firstChild.remove();
-                            }
-                        }
-                        else if ($isTableCellNode(firstCell)) {
-                            const isEmpty = $cellContainsEmptyParagraph(node);
-                            if (!isEmpty) {
-                                firstCell.append(...node.getChildren());
-                            }
-                            node.remove();
-                        }
-                    }
-                }
-                if (firstCell !== null) {
-                    if (firstCell.getChildrenSize() === 0) {
-                        firstCell.append($createParagraphNode());
-                    }
-                    $selectLastDescendant(firstCell);
-                }
+            if (!$isTableSelection(selection)) {
+                return;
+            }
+            const nodes = selection.getNodes();
+            const tableCells = nodes.filter($isTableCellNode);
+            const targetCell = $mergeCells(tableCells);
+            if (targetCell) {
+                $selectLastDescendant(targetCell);
                 onClose();
             }
         });
@@ -232,21 +164,23 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, setIsMenuOpen
     };
     const insertTableRowAtSelection = useCallback((shouldInsertAfter) => {
         editor.update(() => {
-            $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
+            for (let i = 0; i < selectionCounts.rows; i++) {
+                $insertTableRowAtSelection(shouldInsertAfter);
+            }
             onClose();
         });
-    }, [editor, onClose]);
+    }, [editor, onClose, selectionCounts.rows]);
     const insertTableColumnAtSelection = useCallback((shouldInsertAfter) => {
         editor.update(() => {
             for (let i = 0; i < selectionCounts.columns; i++) {
-                $insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
+                $insertTableColumnAtSelection(shouldInsertAfter);
             }
             onClose();
         });
     }, [editor, onClose, selectionCounts.columns]);
     const deleteTableRowAtSelection = useCallback(() => {
         editor.update(() => {
-            $deleteTableRow__EXPERIMENTAL();
+            $deleteTableRowAtSelection();
             onClose();
         });
     }, [editor, onClose]);
@@ -260,7 +194,7 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, setIsMenuOpen
     }, [editor, tableCellNode, clearTableSelection, onClose]);
     const deleteTableColumnAtSelection = useCallback(() => {
         editor.update(() => {
-            $deleteTableColumn__EXPERIMENTAL();
+            $deleteTableColumnAtSelection();
             onClose();
         });
     }, [editor, onClose]);
@@ -268,20 +202,20 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, setIsMenuOpen
         editor.update(() => {
             const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
             const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
-            const tableRows = tableNode.getChildren();
-            if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
-                throw new Error('Expected table cell to be inside of table row.');
-            }
-            const tableRow = tableRows[tableRowIndex];
-            if (!$isTableRowNode(tableRow)) {
-                throw new Error('Expected table row');
-            }
-            tableRow.getChildren().forEach((tableCell) => {
-                if (!$isTableCellNode(tableCell)) {
-                    throw new Error('Expected table cell');
+            const [gridMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+            const rowCells = new Set();
+            const newStyle = tableCellNode.getHeaderStyles() ^ TableCellHeaderStates.ROW;
+            for (let col = 0; col < gridMap[tableRowIndex].length; col++) {
+                const mapCell = gridMap[tableRowIndex][col];
+                if (!mapCell?.cell) {
+                    // eslint-disable-next-line no-continue
+                    continue;
+                }
+                if (!rowCells.has(mapCell.cell)) {
+                    rowCells.add(mapCell.cell);
+                    mapCell.cell.setHeaderStyles(newStyle, TableCellHeaderStates.ROW);
                 }
-                tableCell.toggleHeaderStyle(TableCellHeaderStates.ROW);
-            });
+            }
             clearTableSelection();
             onClose();
         });
@@ -290,27 +224,55 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, setIsMenuOpen
         editor.update(() => {
             const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
             const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
-            const tableRows = tableNode.getChildren();
-            const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
-            if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
-                throw new Error('Expected table cell to be inside of table row.');
-            }
-            for (let r = 0; r < tableRows.length; r++) {
-                const tableRow = tableRows[r];
-                if (!$isTableRowNode(tableRow)) {
-                    throw new Error('Expected table row');
-                }
-                const tableCells = tableRow.getChildren();
-                if (tableColumnIndex >= tableCells.length) {
-                    // if cell is outside of bounds for the current row (for example various merge cell cases) we shouldn't highlight it
+            const [gridMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+            const columnCells = new Set();
+            const newStyle = tableCellNode.getHeaderStyles() ^ TableCellHeaderStates.COLUMN;
+            for (let row = 0; row < gridMap.length; row++) {
+                const mapCell = gridMap[row][tableColumnIndex];
+                if (!mapCell?.cell) {
                     // eslint-disable-next-line no-continue
                     continue;
                 }
-                const tableCell = tableCells[tableColumnIndex];
-                if (!$isTableCellNode(tableCell)) {
-                    throw new Error('Expected table cell');
+                if (!columnCells.has(mapCell.cell)) {
+                    columnCells.add(mapCell.cell);
+                    mapCell.cell.setHeaderStyles(newStyle, TableCellHeaderStates.COLUMN);
+                }
+            }
+            clearTableSelection();
+            onClose();
+        });
+    }, [editor, tableCellNode, clearTableSelection, onClose]);
+    const toggleRowStriping = useCallback(() => {
+        editor.update(() => {
+            if (tableCellNode.isAttached()) {
+                const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+                if (tableNode) {
+                    tableNode.setRowStriping(!tableNode.getRowStriping());
+                }
+            }
+            clearTableSelection();
+            onClose();
+        });
+    }, [editor, tableCellNode, clearTableSelection, onClose]);
+    const toggleFirstRowFreeze = useCallback(() => {
+        editor.update(() => {
+            if (tableCellNode.isAttached()) {
+                const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+                if (tableNode) {
+                    tableNode.setFrozenRows(tableNode.getFrozenRows() === 0 ? 1 : 0);
+                }
+            }
+            clearTableSelection();
+            onClose();
+        });
+    }, [editor, tableCellNode, clearTableSelection, onClose]);
+    const toggleFirstColumnFreeze = useCallback(() => {
+        editor.update(() => {
+            if (tableCellNode.isAttached()) {
+                const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+                if (tableNode) {
+                    tableNode.setFrozenColumns(tableNode.getFrozenColumns() === 0 ? 1 : 0);
                 }
-                tableCell.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
             }
             clearTableSelection();
             onClose();
@@ -336,22 +298,46 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, setIsMenuOpen
             }
         });
     }, [editor]);
+    const formatVerticalAlign = (value) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+                const [cell] = $getNodeTriplet(selection.anchor);
+                if ($isTableCellNode(cell)) {
+                    cell.setVerticalAlign(value);
+                }
+                if ($isTableSelection(selection)) {
+                    const nodes = selection.getNodes();
+                    for (let i = 0; i < nodes.length; i++) {
+                        const node = nodes[i];
+                        if ($isTableCellNode(node)) {
+                            node.setVerticalAlign(value);
+                        }
+                    }
+                }
+            }
+        });
+    };
     let mergeCellButton = null;
     if (cellMerge) {
         if (canMergeCells) {
-            mergeCellButton = (_jsx("button", { type: "button", className: "item", onClick: () => mergeTableCellsAtSelection(), "data-test-id": "table-merge-cells", children: "Merge cells" }));
+            mergeCellButton = (_jsx("button", { type: "button", className: "item", onClick: () => mergeTableCellsAtSelection(), "data-test-id": "table-merge-cells", children: _jsx("span", { className: "text", children: "Merge cells" }) }));
         }
         else if (canUnmergeCell) {
-            mergeCellButton = (_jsx("button", { type: "button", className: "item", onClick: () => unmergeTableCellsAtSelection(), "data-test-id": "table-unmerge-cells", children: "Unmerge cells" }));
+            mergeCellButton = (_jsx("button", { type: "button", className: "item", onClick: () => unmergeTableCellsAtSelection(), "data-test-id": "table-unmerge-cells", children: _jsx("span", { className: "text", children: "Unmerge cells" }) }));
         }
     }
     return createPortal(
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     _jsxs("div", { className: "dropdown", ref: dropDownRef, onClick: (e) => {
             e.stopPropagation();
-        }, children: [mergeCellButton, _jsx("button", { type: "button", className: "item", onClick: () => showColorPickerModal('Cell background color', () => (
-                // @ts-ignore
-                _jsx(ColorPicker, { color: backgroundColor, onChange: handleCellBackgroundColor }))), "data-test-id": "table-background-color", children: _jsx("span", { className: "text", children: "Background color" }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => insertTableRowAtSelection(false), "data-test-id": "table-insert-row-above", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`, " above"] }) }), _jsx("button", { type: "button", className: "item", onClick: () => insertTableRowAtSelection(true), "data-test-id": "table-insert-row-below", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`, " below"] }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => insertTableColumnAtSelection(false), "data-test-id": "table-insert-column-before", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`, " left"] }) }), _jsx("button", { type: "button", className: "item", onClick: () => insertTableColumnAtSelection(true), "data-test-id": "table-insert-column-after", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`, " right"] }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => deleteTableColumnAtSelection(), "data-test-id": "table-delete-columns", children: _jsx("span", { className: "text", children: "Delete column" }) }), _jsx("button", { type: "button", className: "item", onClick: () => deleteTableRowAtSelection(), "data-test-id": "table-delete-rows", children: _jsx("span", { className: "text", children: "Delete row" }) }), _jsx("button", { type: "button", className: "item", onClick: () => deleteTableAtSelection(), "data-test-id": "table-delete", children: _jsx("span", { className: "text", children: "Delete table" }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => toggleTableRowIsHeader(), children: _jsxs("span", { className: "text", children: [(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? 'Remove' : 'Add', ' ', "row header"] }) }), _jsx("button", { type: "button", className: "item", onClick: () => toggleTableColumnIsHeader(), "data-test-id": "table-column-header", children: _jsxs("span", { className: "text", children: [(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN
+        }, children: [mergeCellButton, _jsx("button", { type: "button", className: "item", onClick: () => showColorPickerModal('Cell background color', () => (_jsx(ColorPicker, { color: backgroundColor, onChange: handleCellBackgroundColor, buttonClassName: "" }))), "data-test-id": "table-background-color", children: _jsx("span", { className: "text", children: "Background color" }) }), _jsx("button", { type: "button", className: "item", onClick: () => toggleRowStriping(), "data-test-id": "table-row-striping", children: _jsx("span", { className: "text", children: "Toggle Row Striping" }) }), _jsxs(DropDown, { buttonLabel: "Vertical Align", buttonClassName: "item", buttonAriaLabel: "Formatting options for vertical alignment", children: [_jsx(DropDownItem, { onClick: () => {
+                            formatVerticalAlign('top');
+                        }, className: "item wide", children: _jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon vertical-top" }), _jsx("span", { className: "text", children: "Top Align" })] }) }), _jsx(DropDownItem, { onClick: () => {
+                            formatVerticalAlign('middle');
+                        }, className: "item wide", children: _jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon vertical-middle" }), _jsx("span", { className: "text", children: "Middle Align" })] }) }), _jsx(DropDownItem, { onClick: () => {
+                            formatVerticalAlign('bottom');
+                        }, className: "item wide", children: _jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon vertical-bottom" }), _jsx("span", { className: "text", children: "Bottom Align" })] }) })] }), _jsx("button", { type: "button", className: "item", onClick: () => toggleFirstRowFreeze(), "data-test-id": "table-freeze-first-row", children: _jsx("span", { className: "text", children: "Toggle First Row Freeze" }) }), _jsx("button", { type: "button", className: "item", onClick: () => toggleFirstColumnFreeze(), "data-test-id": "table-freeze-first-column", children: _jsx("span", { className: "text", children: "Toggle First Column Freeze" }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => insertTableRowAtSelection(false), "data-test-id": "table-insert-row-above", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`, " above"] }) }), _jsx("button", { type: "button", className: "item", onClick: () => insertTableRowAtSelection(true), "data-test-id": "table-insert-row-below", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`, " below"] }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => insertTableColumnAtSelection(false), "data-test-id": "table-insert-column-before", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`, " left"] }) }), _jsx("button", { type: "button", className: "item", onClick: () => insertTableColumnAtSelection(true), "data-test-id": "table-insert-column-after", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`, " right"] }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => deleteTableColumnAtSelection(), "data-test-id": "table-delete-columns", children: _jsx("span", { className: "text", children: "Delete column" }) }), _jsx("button", { type: "button", className: "item", onClick: () => deleteTableRowAtSelection(), "data-test-id": "table-delete-rows", children: _jsx("span", { className: "text", children: "Delete row" }) }), _jsx("button", { type: "button", className: "item", onClick: () => deleteTableAtSelection(), "data-test-id": "table-delete", children: _jsx("span", { className: "text", children: "Delete table" }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => toggleTableRowIsHeader(), "data-test-id": "table-row-header", children: _jsxs("span", { className: "text", children: [(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? 'Remove' : 'Add', ' ', "row header"] }) }), _jsx("button", { type: "button", className: "item", onClick: () => toggleTableColumnIsHeader(), "data-test-id": "table-column-header", children: _jsxs("span", { className: "text", children: [(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN
                             ? 'Remove'
                             : 'Add', ' ', "column header"] }) })] }), document.body);
 }
@@ -362,62 +348,123 @@ function TableCellActionMenuContainer({ anchorElem, cellMerge, }) {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [tableCellNode, setTableMenuCellNode] = useState(null);
     const [colorPickerModal, showColorPickerModal] = useModal();
-    const moveMenu = useCallback(() => {
+    const checkTableCellOverflow = useCallback((tableCellParentNodeDOM) => {
+        const scrollableContainer = tableCellParentNodeDOM.closest('.PlaygroundEditorTheme__tableScrollableWrapper');
+        if (scrollableContainer) {
+            const containerRect = scrollableContainer.getBoundingClientRect();
+            const cellRect = tableCellParentNodeDOM.getBoundingClientRect();
+            // Calculate where the action button would be positioned (5px from right edge of cell)
+            // Also account for the button width and table cell padding (8px)
+            const actionButtonRight = cellRect.right - 5;
+            const actionButtonLeft = actionButtonRight - 28; // 20px width + 8px padding
+            // Only hide if the action button would overflow the container
+            if (actionButtonRight > containerRect.right || actionButtonLeft < containerRect.left) {
+                return true;
+            }
+        }
+        return false;
+    }, []);
+    const $moveMenu = useCallback(() => {
         const menu = menuButtonRef.current;
         const selection = $getSelection();
-        const nativeSelection = window.getSelection();
+        const nativeSelection = getDOMSelection(editor._window);
         const { activeElement } = document;
-        if (selection == null || menu == null) {
+        function disable() {
+            if (menu) {
+                menu.classList.remove('table-cell-action-button-container--active');
+                menu.classList.add('table-cell-action-button-container--inactive');
+            }
             setTableMenuCellNode(null);
-            return;
+        }
+        if (selection == null || menu == null) {
+            return disable();
         }
         const rootElement = editor.getRootElement();
+        let tableObserver = null;
+        let tableCellParentNodeDOM = null;
         if ($isRangeSelection(selection) &&
             rootElement !== null &&
             nativeSelection !== null &&
             rootElement.contains(nativeSelection.anchorNode)) {
             const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
             if (tableCellNodeFromSelection == null) {
-                setTableMenuCellNode(null);
-                return;
+                return disable();
             }
-            const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
-            if (tableCellParentNodeDOM == null) {
-                setTableMenuCellNode(null);
-                return;
+            tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
+            if (tableCellParentNodeDOM == null || !tableCellNodeFromSelection.isAttached()) {
+                return disable();
+            }
+            if (checkTableCellOverflow(tableCellParentNodeDOM)) {
+                return disable();
+            }
+            const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNodeFromSelection);
+            const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
+            if (tableElement === null) {
+                throw new Error('TableActionMenu: Expected to find tableElement in DOM');
             }
+            tableObserver = getTableObserverFromTableElement(tableElement);
             setTableMenuCellNode(tableCellNodeFromSelection);
         }
+        else if ($isTableSelection(selection)) {
+            const anchorNode = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
+            if (!$isTableCellNode(anchorNode)) {
+                throw new Error('TableSelection anchorNode must be a TableCellNode');
+            }
+            const tableNode = $getTableNodeFromLexicalNodeOrThrow(anchorNode);
+            const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
+            if (tableElement === null) {
+                throw new Error('TableActionMenu: Expected to find tableElement in DOM');
+            }
+            tableObserver = getTableObserverFromTableElement(tableElement);
+            tableCellParentNodeDOM = editor.getElementByKey(anchorNode.getKey());
+            if (tableCellParentNodeDOM === null) {
+                return disable();
+            }
+            if (checkTableCellOverflow(tableCellParentNodeDOM)) {
+                return disable();
+            }
+        }
         else if (!activeElement) {
-            setTableMenuCellNode(null);
+            return disable();
         }
-    }, [editor]);
-    useEffect(() => {
-        return editor.registerUpdateListener(() => {
-            editor.getEditorState().read(() => {
-                moveMenu();
-            });
-        });
-    });
+        if (tableObserver === null || tableCellParentNodeDOM === null) {
+            return disable();
+        }
+        const enabled = !tableObserver || !tableObserver.isSelecting;
+        menu.classList.toggle('table-cell-action-button-container--active', enabled);
+        menu.classList.toggle('table-cell-action-button-container--inactive', !enabled);
+        if (enabled) {
+            const tableCellRect = tableCellParentNodeDOM.getBoundingClientRect();
+            const anchorRect = anchorElem.getBoundingClientRect();
+            const top = tableCellRect.top - anchorRect.top;
+            const left = tableCellRect.right - anchorRect.left;
+            menu.style.transform = `translate(${left}px, ${top}px)`;
+        }
+    }, [editor, anchorElem, checkTableCellOverflow]);
     useEffect(() => {
-        const menuButtonDOM = menuButtonRef.current;
-        if (menuButtonDOM != null && tableCellNode != null) {
-            const tableCellNodeDOM = editor.getElementByKey(tableCellNode.getKey());
-            if (tableCellNodeDOM != null) {
-                const tableCellRect = tableCellNodeDOM.getBoundingClientRect();
-                const menuRect = menuButtonDOM.getBoundingClientRect();
-                const anchorRect = anchorElem.getBoundingClientRect();
-                const top = tableCellRect.top - anchorRect.top + 4;
-                const left = tableCellRect.right - menuRect.width - 10 - anchorRect.left;
-                menuButtonDOM.style.opacity = '1';
-                menuButtonDOM.style.transform = `translate(${left}px, ${top}px)`;
+        // We call the $moveMenu callback every time the selection changes,
+        // once up front, and once after each pointerUp
+        let timeoutId;
+        const callback = () => {
+            timeoutId = undefined;
+            editor.getEditorState().read($moveMenu);
+        };
+        const delayedCallback = () => {
+            if (timeoutId === undefined) {
+                timeoutId = setTimeout(callback, 0);
             }
-            else {
-                menuButtonDOM.style.opacity = '0';
-                menuButtonDOM.style.transform = 'translate(-10000px, -10000px)';
+            return false;
+        };
+        return mergeRegister(editor.registerUpdateListener(delayedCallback), editor.registerCommand(SELECTION_CHANGE_COMMAND, delayedCallback, COMMAND_PRIORITY_CRITICAL), editor.registerRootListener((rootElement, prevRootElement) => {
+            if (prevRootElement) {
+                prevRootElement.removeEventListener('pointerup', delayedCallback);
             }
-        }
-    }, [menuButtonRef, tableCellNode, editor, anchorElem]);
+            if (rootElement) {
+                rootElement.addEventListener('pointerup', delayedCallback);
+                delayedCallback();
+            }
+        }), () => clearTimeout(timeoutId));
+    });
     const prevTableCellDOM = useRef(tableCellNode);
     useEffect(() => {
         if (prevTableCellDOM.current !== tableCellNode) {
@@ -425,10 +472,21 @@ function TableCellActionMenuContainer({ anchorElem, cellMerge, }) {
         }
         prevTableCellDOM.current = tableCellNode;
     }, [prevTableCellDOM, tableCellNode]);
-    return (_jsx("div", { className: "table-cell-action-button-container", ref: menuButtonRef, children: tableCellNode != null && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "table-cell-action-button chevron-down", onClick: (e) => {
+    return (_jsx("div", { className: "table-cell-action-button-container", ref: menuButtonRef, children: tableCellNode != null && (_jsxs(_Fragment, { children: [_jsx(Box, { component: "button", type: "button", className: "table-cell-action-button chevron-down", onClick: (e) => {
                         e.stopPropagation();
                         setIsMenuOpen(!isMenuOpen);
-                    }, ref: menuRootRef, children: _jsx("i", { className: "iconify", "data-icon": "mdi:chevron-down" }) }), colorPickerModal, isMenuOpen && (_jsx(TableActionMenu, { contextRef: menuRootRef, setIsMenuOpen: setIsMenuOpen, onClose: () => setIsMenuOpen(false), tableCellNode: tableCellNode, cellMerge: cellMerge, showColorPickerModal: showColorPickerModal }))] })) }));
+                    }, ref: menuRootRef, sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: 22,
+                        height: 22,
+                        p: 0,
+                        borderRadius: '100%',
+                        '& svg': {
+                            fontSize: 13,
+                        },
+                    }, children: _jsx("i", { className: "iconify", "data-icon": "tabler:chevron-down" }) }), colorPickerModal, isMenuOpen && (_jsx(TableActionMenu, { contextRef: menuRootRef, setIsMenuOpen: setIsMenuOpen, onClose: () => setIsMenuOpen(false), tableCellNode: tableCellNode, cellMerge: cellMerge, showColorPickerModal: showColorPickerModal }))] })) }));
 }
 export default function TableActionMenuPlugin({ anchorElem = document.body, cellMerge = false, }) {
     const isEditable = useLexicalEditable();

package/lib/main/plugins/TableCellResizer/index.css

@@ -9,6 +9,12 @@
 
 .TableCellResizer__resizer {
   position: absolute;
-  /* [!] table cell resizer 无法正常工作 */
-  z-index: 1;
+  touch-action: none;
+}
+
+@media (pointer: coarse) {
+  .TableCellResizer__resizer {
+    background-color: #adf;
+    mix-blend-mode: color;
+  }
 }