@blocklet/editor-lite 2.6.0

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

@@ -0,0 +1,486 @@
+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 { $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 { Box } from '@mui/material';
+import useModal from '../../hooks/useModal';
+function computeSelectionCount(selection) {
+    const selectionShape = selection.getShape();
+    return {
+        columns: selectionShape.toX - selectionShape.fromX + 1,
+        rows: selectionShape.toY - selectionShape.fromY + 1,
+    };
+}
+function $canUnmerge() {
+    const selection = $getSelection();
+    if (($isRangeSelection(selection) && !selection.isCollapsed()) ||
+        ($isTableSelection(selection) && !selection.anchor.is(selection.focus)) ||
+        (!$isRangeSelection(selection) && !$isTableSelection(selection))) {
+        return false;
+    }
+    const [cell] = $getNodeTriplet(selection.anchor);
+    return cell.__colSpan > 1 || cell.__rowSpan > 1;
+}
+function $selectLastDescendant(node) {
+    const lastDescendant = node.getLastDescendant();
+    if ($isTextNode(lastDescendant)) {
+        lastDescendant.select();
+    }
+    else if ($isElementNode(lastDescendant)) {
+        lastDescendant.selectEnd();
+    }
+    else if (lastDescendant !== null) {
+        lastDescendant.selectNext();
+    }
+}
+function currentCellBackgroundColor(editor) {
+    return editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+            const [cell] = $getNodeTriplet(selection.anchor);
+            if ($isTableCellNode(cell)) {
+                return cell.getBackgroundColor();
+            }
+        }
+        return null;
+    });
+}
+function TableActionMenu({ onClose, tableCellNode: _tableCellNode, setIsMenuOpen, contextRef, cellMerge, showColorPickerModal, }) {
+    const [editor] = useLexicalComposerContext();
+    const dropDownRef = useRef(null);
+    const [tableCellNode, updateTableCellNode] = useState(_tableCellNode);
+    const [selectionCounts, updateSelectionCounts] = useState({
+        columns: 1,
+        rows: 1,
+    });
+    const [canMergeCells, setCanMergeCells] = useState(false);
+    const [canUnmergeCell, setCanUnmergeCell] = useState(false);
+    const [backgroundColor, setBackgroundColor] = useState(() => currentCellBackgroundColor(editor) || '');
+    useEffect(() => {
+        return editor.registerMutationListener(TableCellNode, (nodeMutations) => {
+            const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === 'updated';
+            if (nodeUpdated) {
+                editor.getEditorState().read(() => {
+                    updateTableCellNode(tableCellNode.getLatest());
+                });
+                setBackgroundColor(currentCellBackgroundColor(editor) || '');
+            }
+        }, { skipInitialization: true });
+    }, [editor, tableCellNode]);
+    useEffect(() => {
+        editor.getEditorState().read(() => {
+            const selection = $getSelection();
+            // Merge cells
+            if ($isTableSelection(selection)) {
+                const currentSelectionCounts = computeSelectionCount(selection);
+                updateSelectionCounts(computeSelectionCount(selection));
+                setCanMergeCells(currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1);
+            }
+            // Unmerge cell
+            setCanUnmergeCell($canUnmerge());
+        });
+    }, [editor]);
+    useEffect(() => {
+        const menuButtonElement = contextRef.current;
+        const dropDownElement = dropDownRef.current;
+        const rootElement = editor.getRootElement();
+        if (menuButtonElement != null && dropDownElement != null && rootElement != null) {
+            const rootEleRect = rootElement.getBoundingClientRect();
+            const menuButtonRect = menuButtonElement.getBoundingClientRect();
+            dropDownElement.style.opacity = '1';
+            const dropDownElementRect = dropDownElement.getBoundingClientRect();
+            const margin = 5;
+            let leftPosition = menuButtonRect.right + margin;
+            if (leftPosition + dropDownElementRect.width > window.innerWidth ||
+                leftPosition + dropDownElementRect.width > rootEleRect.right) {
+                const position = menuButtonRect.left - dropDownElementRect.width - margin;
+                leftPosition = (position < 0 ? margin : position) + window.pageXOffset;
+            }
+            dropDownElement.style.left = `${leftPosition + window.pageXOffset}px`;
+            let topPosition = menuButtonRect.top;
+            if (topPosition + dropDownElementRect.height > window.innerHeight) {
+                const position = menuButtonRect.bottom - dropDownElementRect.height;
+                topPosition = position < 0 ? margin : position;
+            }
+            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);
+            }
+        }
+        window.addEventListener('click', handleClickOutside);
+        return () => window.removeEventListener('click', handleClickOutside);
+    }, [setIsMenuOpen, contextRef]);
+    const clearTableSelection = useCallback(() => {
+        editor.update(() => {
+            if (tableCellNode.isAttached()) {
+                const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+                const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
+                if (tableElement === null) {
+                    throw new Error('TableActionMenu: Expected to find tableElement in DOM');
+                }
+                const tableObserver = getTableObserverFromTableElement(tableElement);
+                if (tableObserver !== null) {
+                    tableObserver.$clearHighlight();
+                }
+                tableNode.markDirty();
+                updateTableCellNode(tableCellNode.getLatest());
+            }
+            $setSelection(null);
+        });
+    }, [editor, tableCellNode]);
+    const mergeTableCellsAtSelection = () => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if (!$isTableSelection(selection)) {
+                return;
+            }
+            const nodes = selection.getNodes();
+            const tableCells = nodes.filter($isTableCellNode);
+            const targetCell = $mergeCells(tableCells);
+            if (targetCell) {
+                $selectLastDescendant(targetCell);
+                onClose();
+            }
+        });
+    };
+    const unmergeTableCellsAtSelection = () => {
+        editor.update(() => {
+            $unmergeCell();
+        });
+    };
+    const insertTableRowAtSelection = useCallback((shouldInsertAfter) => {
+        editor.update(() => {
+            for (let i = 0; i < selectionCounts.rows; i++) {
+                $insertTableRowAtSelection(shouldInsertAfter);
+            }
+            onClose();
+        });
+    }, [editor, onClose, selectionCounts.rows]);
+    const insertTableColumnAtSelection = useCallback((shouldInsertAfter) => {
+        editor.update(() => {
+            for (let i = 0; i < selectionCounts.columns; i++) {
+                $insertTableColumnAtSelection(shouldInsertAfter);
+            }
+            onClose();
+        });
+    }, [editor, onClose, selectionCounts.columns]);
+    const deleteTableRowAtSelection = useCallback(() => {
+        editor.update(() => {
+            $deleteTableRowAtSelection();
+            onClose();
+        });
+    }, [editor, onClose]);
+    const deleteTableAtSelection = useCallback(() => {
+        editor.update(() => {
+            const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+            tableNode.remove();
+            clearTableSelection();
+            onClose();
+        });
+    }, [editor, tableCellNode, clearTableSelection, onClose]);
+    const deleteTableColumnAtSelection = useCallback(() => {
+        editor.update(() => {
+            $deleteTableColumnAtSelection();
+            onClose();
+        });
+    }, [editor, onClose]);
+    const toggleTableRowIsHeader = useCallback(() => {
+        editor.update(() => {
+            const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+            const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+            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);
+                }
+            }
+            clearTableSelection();
+            onClose();
+        });
+    }, [editor, tableCellNode, clearTableSelection, onClose]);
+    const toggleTableColumnIsHeader = useCallback(() => {
+        editor.update(() => {
+            const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+            const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
+            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;
+                }
+                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);
+                }
+            }
+            clearTableSelection();
+            onClose();
+        });
+    }, [editor, tableCellNode, clearTableSelection, onClose]);
+    const handleCellBackgroundColor = useCallback((value) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+                const [cell] = $getNodeTriplet(selection.anchor);
+                if ($isTableCellNode(cell)) {
+                    cell.setBackgroundColor(value);
+                }
+                if ($isTableSelection(selection)) {
+                    const nodes = selection.getNodes();
+                    for (let i = 0; i < nodes.length; i++) {
+                        const node = nodes[i];
+                        if ($isTableCellNode(node)) {
+                            node.setBackgroundColor(value);
+                        }
+                    }
+                }
+            }
+        });
+    }, [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: _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: _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: () => toggleRowStriping(), "data-test-id": "table-row-striping", children: _jsx("span", { className: "text", children: "Toggle Row Striping" }) }), _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);
+}
+function TableCellActionMenuContainer({ anchorElem, cellMerge, }) {
+    const [editor] = useLexicalComposerContext();
+    const menuButtonRef = useRef(null);
+    const menuRootRef = useRef(null);
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [tableCellNode, setTableMenuCellNode] = useState(null);
+    const [colorPickerModal, showColorPickerModal] = useModal();
+    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 = getDOMSelection(editor._window);
+        const { activeElement } = document;
+        function disable() {
+            if (menu) {
+                menu.classList.remove('table-cell-action-button-container--active');
+                menu.classList.add('table-cell-action-button-container--inactive');
+            }
+            setTableMenuCellNode(null);
+        }
+        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) {
+                return disable();
+            }
+            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) {
+            return disable();
+        }
+        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(() => {
+        // 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);
+            }
+            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);
+            }
+            if (rootElement) {
+                rootElement.addEventListener('pointerup', delayedCallback);
+                delayedCallback();
+            }
+        }), () => clearTimeout(timeoutId));
+    });
+    const prevTableCellDOM = useRef(tableCellNode);
+    useEffect(() => {
+        if (prevTableCellDOM.current !== tableCellNode) {
+            setIsMenuOpen(false);
+        }
+        prevTableCellDOM.current = tableCellNode;
+    }, [prevTableCellDOM, tableCellNode]);
+    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, 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();
+    return createPortal(isEditable ? _jsx(TableCellActionMenuContainer, { anchorElem: anchorElem, cellMerge: cellMerge }) : null, anchorElem);
+}

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

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.TableCellResizer__resizer {
+  position: absolute;
+  touch-action: none;
+}
+
+@media (pointer: coarse) {
+  .TableCellResizer__resizer {
+    background-color: #adf;
+    mix-blend-mode: color;
+  }
+}

package/lib/main/plugins/TableCellResizer/index.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+import { ReactPortal } from 'react';
+export default function TableCellResizerPlugin(): null | ReactPortal;