@datalayer/lexical-loro 0.1.0 → 0.2.1

package/lib/plugins/TableActionMenuPlugin/index.js

@@ -1,492 +0,0 @@
-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 useModal from '../../hooks/useModal';
-import ColorPicker from '../../ui/ColorPicker';
-import DropDown, { DropDownItem } from '../../ui/DropDown';
-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) {
-                    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) {
-                    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: () => showColorPickerModal('Cell background color', () => (_jsx(ColorPicker, { color: backgroundColor, onChange: handleCellBackgroundColor }))), "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);
-}
-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.activeElement;
-        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 = undefined;
-        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("button", { type: "button", className: "table-cell-action-button chevron-down", onClick: (e) => {
-                        e.stopPropagation();
-                        setIsMenuOpen(!isMenuOpen);
-                    }, ref: menuRootRef, children: _jsx("i", { className: "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/plugins/TableCellResizer/index.d.ts

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