phx-react 1.3.1576 → 1.3.1579

package/dist/esm/components/TextEditorV2/plugins/TableActionMenuPlugin/index.js

@@ -9,7 +9,7 @@ import useModal from '../../hooks/useModal';
 import invariant from '../../shared/invariant';
 import ColorPicker from '../../ui/ColorPicker';
 function computeSelectionCount(selection) {
-    var selectionShape = selection.getShape();
+    const selectionShape = selection.getShape();
     return {
         columns: selectionShape.toX - selectionShape.fromX + 1,
         rows: selectionShape.toY - selectionShape.fromY + 1,
@@ -18,15 +18,15 @@ function computeSelectionCount(selection) {
 // 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 isGridSelectionRectangular(selection) {
-    var nodes = selection.getNodes();
-    var currentRows = [];
-    var currentRow = null;
-    var expectedColumns = null;
-    var currentColumns = 0;
-    for (var i = 0; i < nodes.length; i++) {
-        var node = nodes[i];
+    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)) {
-            var row = node.getParentOrThrow();
+            const row = node.getParentOrThrow();
             invariant($isTableRowNode(row), 'Expected CellNode to have a RowNode parent');
             if (currentRow !== row) {
                 if (expectedColumns !== null && currentColumns !== expectedColumns) {
@@ -38,8 +38,8 @@ function isGridSelectionRectangular(selection) {
                 currentRow = row;
                 currentColumns = 0;
             }
-            var colSpan = node.__colSpan;
-            for (var j = 0; j < colSpan; j++) {
+            const colSpan = node.__colSpan;
+            for (let j = 0; j < colSpan; j++) {
                 if (currentRows[currentColumns + j] === undefined) {
                     currentRows[currentColumns + j] = 0;
                 }
@@ -48,30 +48,30 @@ function isGridSelectionRectangular(selection) {
             currentColumns += colSpan;
         }
     }
-    return ((expectedColumns === null || currentColumns === expectedColumns) && currentRows.every(function (v) { return v === currentRows[0]; }));
+    return ((expectedColumns === null || currentColumns === expectedColumns) && currentRows.every((v) => v === currentRows[0]));
 }
 function $canUnmerge() {
-    var selection = $getSelection();
+    const selection = $getSelection();
     if (($isRangeSelection(selection) && !selection.isCollapsed()) ||
         (DEPRECATED_$isGridSelection(selection) && !selection.anchor.is(selection.focus)) ||
         (!$isRangeSelection(selection) && !DEPRECATED_$isGridSelection(selection))) {
         return false;
     }
-    var cell = DEPRECATED_$getNodeTriplet(selection.anchor)[0];
+    const [cell] = DEPRECATED_$getNodeTriplet(selection.anchor);
     return cell.__colSpan > 1 || cell.__rowSpan > 1;
 }
 function $cellContainsEmptyParagraph(cell) {
     if (cell.getChildrenSize() !== 1) {
         return false;
     }
-    var firstChild = cell.getFirstChildOrThrow();
+    const firstChild = cell.getFirstChildOrThrow();
     if (!$isParagraphNode(firstChild) || !firstChild.isEmpty()) {
         return false;
     }
     return true;
 }
 function $selectLastDescendant(node) {
-    var lastDescendant = node.getLastDescendant();
+    const lastDescendant = node.getLastDescendant();
     if ($isTextNode(lastDescendant)) {
         lastDescendant.select();
     }
@@ -83,10 +83,10 @@ function $selectLastDescendant(node) {
     }
 }
 function currentCellBackgroundColor(editor) {
-    return editor.getEditorState().read(function () {
-        var selection = $getSelection();
+    return editor.getEditorState().read(() => {
+        const selection = $getSelection();
         if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
-            var cell = DEPRECATED_$getNodeTriplet(selection.anchor)[0];
+            const [cell] = DEPRECATED_$getNodeTriplet(selection.anchor);
             if ($isTableCellNode(cell)) {
                 return cell.getBackgroundColor();
             }
@@ -94,35 +94,32 @@ function currentCellBackgroundColor(editor) {
         return null;
     });
 }
-function TableActionMenu(_a) {
-    var cellMerge = _a.cellMerge, contextRef = _a.contextRef, onClose = _a.onClose, setIsMenuOpen = _a.setIsMenuOpen, showColorPickerModal = _a.showColorPickerModal, _tableCellNode = _a.tableCellNode;
-    var editor = useLexicalComposerContext()[0];
-    var dropDownRef = useRef(null);
-    var _b = useState(_tableCellNode), tableCellNode = _b[0], updateTableCellNode = _b[1];
-    var _c = useState({
+function TableActionMenu({ cellMerge, contextRef, onClose, setIsMenuOpen, showColorPickerModal, tableCellNode: _tableCellNode, }) {
+    const [editor] = useLexicalComposerContext();
+    const dropDownRef = useRef(null);
+    const [tableCellNode, updateTableCellNode] = useState(_tableCellNode);
+    const [selectionCounts, updateSelectionCounts] = useState({
         columns: 1,
         rows: 1,
-    }), selectionCounts = _c[0], updateSelectionCounts = _c[1];
-    var _d = useState(false), canMergeCells = _d[0], setCanMergeCells = _d[1];
-    var _e = useState(false), canUnmergeCell = _e[0], setCanUnmergeCell = _e[1];
-    var _f = useState(function () { return currentCellBackgroundColor(editor) || ''; }), backgroundColor = _f[0], setBackgroundColor = _f[1];
-    useEffect(function () {
-        return editor.registerMutationListener(TableCellNode, function (nodeMutations) {
-            var nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === 'updated';
-            if (nodeUpdated) {
-                editor.getEditorState().read(function () {
-                    updateTableCellNode(tableCellNode.getLatest());
-                });
-                setBackgroundColor(currentCellBackgroundColor(editor) || '');
-            }
-        });
-    }, [editor, tableCellNode]);
-    useEffect(function () {
-        editor.getEditorState().read(function () {
-            var selection = $getSelection();
+    });
+    const [canMergeCells, setCanMergeCells] = useState(false);
+    const [canUnmergeCell, setCanUnmergeCell] = useState(false);
+    const [backgroundColor, setBackgroundColor] = useState(() => currentCellBackgroundColor(editor) || '');
+    useEffect(() => editor.registerMutationListener(TableCellNode, (nodeMutations) => {
+        const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === 'updated';
+        if (nodeUpdated) {
+            editor.getEditorState().read(() => {
+                updateTableCellNode(tableCellNode.getLatest());
+            });
+            setBackgroundColor(currentCellBackgroundColor(editor) || '');
+        }
+    }), [editor, tableCellNode]);
+    useEffect(() => {
+        editor.getEditorState().read(() => {
+            const selection = $getSelection();
             // Merge cells
             if (DEPRECATED_$isGridSelection(selection)) {
-                var currentSelectionCounts = computeSelectionCount(selection);
+                const currentSelectionCounts = computeSelectionCount(selection);
                 updateSelectionCounts(computeSelectionCount(selection));
                 setCanMergeCells(isGridSelectionRectangular(selection) &&
                     (currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1));
@@ -131,32 +128,32 @@ function TableActionMenu(_a) {
             setCanUnmergeCell($canUnmerge());
         });
     }, [editor]);
-    useEffect(function () {
-        var menuButtonElement = contextRef.current;
-        var dropDownElement = dropDownRef.current;
-        var rootElement = editor.getRootElement();
+    useEffect(() => {
+        const menuButtonElement = contextRef.current;
+        const dropDownElement = dropDownRef.current;
+        const rootElement = editor.getRootElement();
         if (menuButtonElement != null && dropDownElement != null && rootElement != null) {
-            var rootEleRect = rootElement.getBoundingClientRect();
-            var menuButtonRect = menuButtonElement.getBoundingClientRect();
+            const rootEleRect = rootElement.getBoundingClientRect();
+            const menuButtonRect = menuButtonElement.getBoundingClientRect();
             dropDownElement.style.opacity = '1';
-            var dropDownElementRect = dropDownElement.getBoundingClientRect();
-            var margin = 5;
-            var leftPosition = menuButtonRect.right + margin;
+            const dropDownElementRect = dropDownElement.getBoundingClientRect();
+            const margin = 5;
+            let leftPosition = menuButtonRect.right + margin;
             if (leftPosition + dropDownElementRect.width > window.innerWidth ||
                 leftPosition + dropDownElementRect.width > rootEleRect.right) {
-                var position = menuButtonRect.left - dropDownElementRect.width - margin;
+                const position = menuButtonRect.left - dropDownElementRect.width - margin;
                 leftPosition = (position < 0 ? margin : position) + window.pageXOffset;
             }
-            dropDownElement.style.left = "".concat(leftPosition + window.pageXOffset, "px");
-            var topPosition = menuButtonRect.top;
+            dropDownElement.style.left = `${leftPosition + window.pageXOffset}px`;
+            let topPosition = menuButtonRect.top;
             if (topPosition + dropDownElementRect.height > window.innerHeight) {
-                var position = menuButtonRect.bottom - dropDownElementRect.height;
+                const position = menuButtonRect.bottom - dropDownElementRect.height;
                 topPosition = (position < 0 ? margin : position) + window.pageYOffset;
             }
-            dropDownElement.style.top = "".concat(topPosition + +window.pageYOffset, "px");
+            dropDownElement.style.top = `${topPosition + +window.pageYOffset}px`;
         }
     }, [contextRef, dropDownRef, editor]);
-    useEffect(function () {
+    useEffect(() => {
         function handleClickOutside(event) {
             if (dropDownRef.current != null &&
                 contextRef.current != null &&
@@ -166,50 +163,50 @@ function TableActionMenu(_a) {
             }
         }
         window.addEventListener('click', handleClickOutside);
-        return function () { return window.removeEventListener('click', handleClickOutside); };
+        return () => window.removeEventListener('click', handleClickOutside);
     }, [setIsMenuOpen, contextRef]);
-    var clearTableSelection = useCallback(function () {
-        editor.update(function () {
+    const clearTableSelection = useCallback(() => {
+        editor.update(() => {
             if (tableCellNode.isAttached()) {
-                var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-                var tableElement = editor.getElementByKey(tableNode.getKey());
+                const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+                const tableElement = editor.getElementByKey(tableNode.getKey());
                 if (!tableElement) {
                     throw new Error('Expected to find tableElement in DOM');
                 }
-                var tableSelection = getTableSelectionFromTableElement(tableElement);
+                const tableSelection = getTableSelectionFromTableElement(tableElement);
                 if (tableSelection !== null) {
                     tableSelection.clearHighlight();
                 }
                 tableNode.markDirty();
                 updateTableCellNode(tableCellNode.getLatest());
             }
-            var rootNode = $getRoot();
+            const rootNode = $getRoot();
             rootNode.selectStart();
         });
     }, [editor, tableCellNode]);
-    var mergeTableCellsAtSelection = function () {
-        editor.update(function () {
-            var selection = $getSelection();
+    const mergeTableCellsAtSelection = () => {
+        editor.update(() => {
+            const selection = $getSelection();
             if (DEPRECATED_$isGridSelection(selection)) {
-                var _a = computeSelectionCount(selection), columns = _a.columns, rows = _a.rows;
-                var nodes = selection.getNodes();
-                var firstCell = null;
-                for (var i = 0; i < nodes.length; i++) {
-                    var node = nodes[i];
+                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 (DEPRECATED_$isGridCellNode(node)) {
                         if (firstCell === null) {
                             node.setColSpan(columns).setRowSpan(rows);
                             firstCell = node;
-                            var isEmpty = $cellContainsEmptyParagraph(node);
-                            var firstChild = void 0;
+                            const isEmpty = $cellContainsEmptyParagraph(node);
+                            let firstChild;
                             if (isEmpty && $isParagraphNode((firstChild = node.getFirstChild()))) {
                                 firstChild.remove();
                             }
                         }
                         else if (DEPRECATED_$isGridCellNode(firstCell)) {
-                            var isEmpty = $cellContainsEmptyParagraph(node);
+                            const isEmpty = $cellContainsEmptyParagraph(node);
                             if (!isEmpty) {
-                                firstCell.append.apply(firstCell, node.getChildren());
+                                firstCell.append(...node.getChildren());
                             }
                             node.remove();
                         }
@@ -225,58 +222,58 @@ function TableActionMenu(_a) {
             }
         });
     };
-    var unmergeTableCellsAtSelection = function () {
-        editor.update(function () {
+    const unmergeTableCellsAtSelection = () => {
+        editor.update(() => {
             $unmergeCell();
         });
     };
-    var insertTableRowAtSelection = useCallback(function (shouldInsertAfter) {
-        editor.update(function () {
+    const insertTableRowAtSelection = useCallback((shouldInsertAfter) => {
+        editor.update(() => {
             $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
             onClose();
         });
     }, [editor, onClose]);
-    var insertTableColumnAtSelection = useCallback(function (shouldInsertAfter) {
-        editor.update(function () {
-            for (var i = 0; i < selectionCounts.columns; i++) {
+    const insertTableColumnAtSelection = useCallback((shouldInsertAfter) => {
+        editor.update(() => {
+            for (let i = 0; i < selectionCounts.columns; i++) {
                 $insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
             }
             onClose();
         });
     }, [editor, onClose, selectionCounts.columns]);
-    var deleteTableRowAtSelection = useCallback(function () {
-        editor.update(function () {
+    const deleteTableRowAtSelection = useCallback(() => {
+        editor.update(() => {
             $deleteTableRow__EXPERIMENTAL();
             onClose();
         });
     }, [editor, onClose]);
-    var deleteTableAtSelection = useCallback(function () {
-        editor.update(function () {
-            var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+    const deleteTableAtSelection = useCallback(() => {
+        editor.update(() => {
+            const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
             tableNode.remove();
             clearTableSelection();
             onClose();
         });
     }, [editor, tableCellNode, clearTableSelection, onClose]);
-    var deleteTableColumnAtSelection = useCallback(function () {
-        editor.update(function () {
+    const deleteTableColumnAtSelection = useCallback(() => {
+        editor.update(() => {
             $deleteTableColumn__EXPERIMENTAL();
             onClose();
         });
     }, [editor, onClose]);
-    var toggleTableRowIsHeader = useCallback(function () {
-        editor.update(function () {
-            var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-            var tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
-            var tableRows = tableNode.getChildren();
+    const toggleTableRowIsHeader = useCallback(() => {
+        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.');
             }
-            var tableRow = tableRows[tableRowIndex];
+            const tableRow = tableRows[tableRowIndex];
             if (!$isTableRowNode(tableRow)) {
                 throw new Error('Expected table row');
             }
-            tableRow.getChildren().forEach(function (tableCell) {
+            tableRow.getChildren().forEach((tableCell) => {
                 if (!$isTableCellNode(tableCell)) {
                     throw new Error('Expected table cell');
                 }
@@ -286,26 +283,26 @@ function TableActionMenu(_a) {
             onClose();
         });
     }, [editor, tableCellNode, clearTableSelection, onClose]);
-    var toggleTableColumnIsHeader = useCallback(function () {
-        editor.update(function () {
-            var tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-            var tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
-            var tableRows = tableNode.getChildren();
-            var maxRowsLength = Math.max.apply(Math, tableRows.map(function (row) { return row.getChildren().length; }));
+    const toggleTableColumnIsHeader = useCallback(() => {
+        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 (var r = 0; r < tableRows.length; r++) {
-                var tableRow = tableRows[r];
+            for (let r = 0; r < tableRows.length; r++) {
+                const tableRow = tableRows[r];
                 if (!$isTableRowNode(tableRow)) {
                     throw new Error('Expected table row');
                 }
-                var tableCells = tableRow.getChildren();
+                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
                     continue;
                 }
-                var tableCell = tableCells[tableColumnIndex];
+                const tableCell = tableCells[tableColumnIndex];
                 if (!$isTableCellNode(tableCell)) {
                     throw new Error('Expected table cell');
                 }
@@ -315,18 +312,18 @@ function TableActionMenu(_a) {
             onClose();
         });
     }, [editor, tableCellNode, clearTableSelection, onClose]);
-    var handleCellBackgroundColor = useCallback(function (value) {
-        editor.update(function () {
-            var selection = $getSelection();
+    const handleCellBackgroundColor = useCallback((value) => {
+        editor.update(() => {
+            const selection = $getSelection();
             if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
-                var cell = DEPRECATED_$getNodeTriplet(selection.anchor)[0];
+                const [cell] = DEPRECATED_$getNodeTriplet(selection.anchor);
                 if ($isTableCellNode(cell)) {
                     cell.setBackgroundColor(value);
                 }
                 if (DEPRECATED_$isGridSelection(selection)) {
-                    var nodes = selection.getNodes();
-                    for (var i = 0; i < nodes.length; i++) {
-                        var node = nodes[i];
+                    const nodes = selection.getNodes();
+                    for (let i = 0; i < nodes.length; i++) {
+                        const node = nodes[i];
                         if (DEPRECATED_$isGridCellNode(node)) {
                             node.setBackgroundColor(value);
                         }
@@ -335,59 +332,57 @@ function TableActionMenu(_a) {
             }
         });
     }, [editor]);
-    var mergeCellButton = null;
+    let mergeCellButton = null;
     if (cellMerge) {
         if (canMergeCells) {
-            mergeCellButton = (React.createElement("button", { className: 'item', "data-test-id": 'table-merge-cells', onClick: function () { return mergeTableCellsAtSelection(); }, type: 'button' }, "Merge cells"));
+            mergeCellButton = (React.createElement("button", { className: 'item', "data-test-id": 'table-merge-cells', onClick: () => mergeTableCellsAtSelection(), type: 'button' }, "Merge cells"));
         }
         else if (canUnmergeCell) {
-            mergeCellButton = (React.createElement("button", { className: 'item', "data-test-id": 'table-unmerge-cells', onClick: function () { return unmergeTableCellsAtSelection(); }, type: 'button' }, "Unmerge cells"));
+            mergeCellButton = (React.createElement("button", { className: 'item', "data-test-id": 'table-unmerge-cells', onClick: () => unmergeTableCellsAtSelection(), type: 'button' }, "Unmerge cells"));
         }
     }
-    return createPortal(React.createElement("div", { ref: dropDownRef, className: 'dropdown', onClick: function (e) {
+    return createPortal(React.createElement("div", { ref: dropDownRef, className: 'dropdown', onClick: (e) => {
             e.stopPropagation();
         } },
         mergeCellButton,
-        React.createElement("button", { className: 'item', "data-test-id": 'table-background-color', onClick: function () {
-                return showColorPickerModal('Cell background color', function () { return (React.createElement(ColorPicker, { color: backgroundColor, onChange: handleCellBackgroundColor })); });
-            }, type: 'button' },
+        React.createElement("button", { className: 'item', "data-test-id": 'table-background-color', onClick: () => showColorPickerModal('Cell background color', () => (React.createElement(ColorPicker, { color: backgroundColor, onChange: handleCellBackgroundColor }))), type: 'button' },
             React.createElement("span", { className: 'text' }, "Background color")),
         React.createElement("hr", null),
-        React.createElement("button", { className: 'item', "data-test-id": 'table-insert-row-above', onClick: function () { return insertTableRowAtSelection(false); }, type: 'button' },
+        React.createElement("button", { className: 'item', "data-test-id": 'table-insert-row-above', onClick: () => insertTableRowAtSelection(false), type: 'button' },
             React.createElement("span", { className: 'text' },
                 "Insert ",
-                selectionCounts.rows === 1 ? 'row' : "".concat(selectionCounts.rows, " rows"),
+                selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`,
                 " above")),
-        React.createElement("button", { className: 'item', "data-test-id": 'table-insert-row-below', onClick: function () { return insertTableRowAtSelection(true); }, type: 'button' },
+        React.createElement("button", { className: 'item', "data-test-id": 'table-insert-row-below', onClick: () => insertTableRowAtSelection(true), type: 'button' },
             React.createElement("span", { className: 'text' },
                 "Insert ",
-                selectionCounts.rows === 1 ? 'row' : "".concat(selectionCounts.rows, " rows"),
+                selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`,
                 " below")),
         React.createElement("hr", null),
-        React.createElement("button", { className: 'item', "data-test-id": 'table-insert-column-before', onClick: function () { return insertTableColumnAtSelection(false); }, type: 'button' },
+        React.createElement("button", { className: 'item', "data-test-id": 'table-insert-column-before', onClick: () => insertTableColumnAtSelection(false), type: 'button' },
             React.createElement("span", { className: 'text' },
                 "Insert ",
-                selectionCounts.columns === 1 ? 'column' : "".concat(selectionCounts.columns, " columns"),
+                selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`,
                 " left")),
-        React.createElement("button", { className: 'item', "data-test-id": 'table-insert-column-after', onClick: function () { return insertTableColumnAtSelection(true); }, type: 'button' },
+        React.createElement("button", { className: 'item', "data-test-id": 'table-insert-column-after', onClick: () => insertTableColumnAtSelection(true), type: 'button' },
             React.createElement("span", { className: 'text' },
                 "Insert ",
-                selectionCounts.columns === 1 ? 'column' : "".concat(selectionCounts.columns, " columns"),
+                selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`,
                 " right")),
         React.createElement("hr", null),
-        React.createElement("button", { className: 'item', "data-test-id": 'table-delete-columns', onClick: function () { return deleteTableColumnAtSelection(); }, type: 'button' },
+        React.createElement("button", { className: 'item', "data-test-id": 'table-delete-columns', onClick: () => deleteTableColumnAtSelection(), type: 'button' },
             React.createElement("span", { className: 'text' }, "Delete column")),
-        React.createElement("button", { className: 'item', "data-test-id": 'table-delete-rows', onClick: function () { return deleteTableRowAtSelection(); }, type: 'button' },
+        React.createElement("button", { className: 'item', "data-test-id": 'table-delete-rows', onClick: () => deleteTableRowAtSelection(), type: 'button' },
             React.createElement("span", { className: 'text' }, "Delete row")),
-        React.createElement("button", { className: 'item', "data-test-id": 'table-delete', onClick: function () { return deleteTableAtSelection(); }, type: 'button' },
+        React.createElement("button", { className: 'item', "data-test-id": 'table-delete', onClick: () => deleteTableAtSelection(), type: 'button' },
             React.createElement("span", { className: 'text' }, "Delete table")),
         React.createElement("hr", null),
-        React.createElement("button", { className: 'item', onClick: function () { return toggleTableRowIsHeader(); }, type: 'button' },
+        React.createElement("button", { className: 'item', onClick: () => toggleTableRowIsHeader(), type: 'button' },
             React.createElement("span", { className: 'text' },
                 (tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? 'Remove' : 'Add',
                 ' ',
                 "row header")),
-        React.createElement("button", { className: 'item', "data-test-id": 'table-column-header', onClick: function () { return toggleTableColumnIsHeader(); }, type: 'button' },
+        React.createElement("button", { className: 'item', "data-test-id": 'table-column-header', onClick: () => toggleTableColumnIsHeader(), type: 'button' },
             React.createElement("span", { className: 'text' },
                 (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN
                     ? 'Remove'
@@ -395,34 +390,33 @@ function TableActionMenu(_a) {
                 ' ',
                 "column header"))), document.body);
 }
-function TableCellActionMenuContainer(_a) {
-    var anchorElem = _a.anchorElem, cellMerge = _a.cellMerge;
-    var editor = useLexicalComposerContext()[0];
-    var menuButtonRef = useRef(null);
-    var menuRootRef = useRef(null);
-    var _b = useState(false), isMenuOpen = _b[0], setIsMenuOpen = _b[1];
-    var _c = useState(null), tableCellNode = _c[0], setTableMenuCellNode = _c[1];
-    var _d = useModal(), colorPickerModal = _d[0], showColorPickerModal = _d[1];
-    var moveMenu = useCallback(function () {
-        var menu = menuButtonRef.current;
-        var selection = $getSelection();
-        var nativeSelection = window.getSelection();
-        var activeElement = document.activeElement;
+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 moveMenu = useCallback(() => {
+        const menu = menuButtonRef.current;
+        const selection = $getSelection();
+        const nativeSelection = window.getSelection();
+        const activeElement = document.activeElement;
         if (selection == null || menu == null) {
             setTableMenuCellNode(null);
             return;
         }
-        var rootElement = editor.getRootElement();
+        const rootElement = editor.getRootElement();
         if ($isRangeSelection(selection) &&
             rootElement !== null &&
             nativeSelection !== null &&
             rootElement.contains(nativeSelection.anchorNode)) {
-            var tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
+            const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
             if (tableCellNodeFromSelection == null) {
                 setTableMenuCellNode(null);
                 return;
             }
-            var tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
+            const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
             if (tableCellParentNodeDOM == null) {
                 setTableMenuCellNode(null);
                 return;
@@ -433,25 +427,23 @@ function TableCellActionMenuContainer(_a) {
             setTableMenuCellNode(null);
         }
     }, [editor]);
-    useEffect(function () {
-        return editor.registerUpdateListener(function () {
-            editor.getEditorState().read(function () {
-                moveMenu();
-            });
+    useEffect(() => editor.registerUpdateListener(() => {
+        editor.getEditorState().read(() => {
+            moveMenu();
         });
-    });
-    useEffect(function () {
-        var menuButtonDOM = menuButtonRef.current;
+    }));
+    useEffect(() => {
+        const menuButtonDOM = menuButtonRef.current;
         if (menuButtonDOM != null && tableCellNode != null) {
-            var tableCellNodeDOM = editor.getElementByKey(tableCellNode.getKey());
+            const tableCellNodeDOM = editor.getElementByKey(tableCellNode.getKey());
             if (tableCellNodeDOM != null) {
-                var tableCellRect = tableCellNodeDOM.getBoundingClientRect();
-                var menuRect = menuButtonDOM.getBoundingClientRect();
-                var anchorRect = anchorElem.getBoundingClientRect();
-                var top_1 = tableCellRect.top - anchorRect.top + 4;
-                var left = tableCellRect.right - menuRect.width - 10 - anchorRect.left;
+                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(".concat(left, "px, ").concat(top_1, "px)");
+                menuButtonDOM.style.transform = `translate(${left}px, ${top}px)`;
             }
             else {
                 menuButtonDOM.style.opacity = '0';
@@ -459,25 +451,24 @@ function TableCellActionMenuContainer(_a) {
             }
         }
     }, [menuButtonRef, tableCellNode, editor, anchorElem]);
-    var prevTableCellDOM = useRef(tableCellNode);
-    useEffect(function () {
+    const prevTableCellDOM = useRef(tableCellNode);
+    useEffect(() => {
         if (prevTableCellDOM.current !== tableCellNode) {
             setIsMenuOpen(false);
         }
         prevTableCellDOM.current = tableCellNode;
     }, [prevTableCellDOM, tableCellNode]);
     return (React.createElement("div", { ref: menuButtonRef, className: 'table-cell-action-button-container' }, tableCellNode != null && (React.createElement(React.Fragment, null,
-        React.createElement("button", { ref: menuRootRef, className: 'table-cell-action-button chevron-down', onClick: function (e) {
+        React.createElement("button", { ref: menuRootRef, className: 'table-cell-action-button chevron-down', onClick: (e) => {
                 e.stopPropagation();
                 setIsMenuOpen(!isMenuOpen);
             }, type: 'button' },
             React.createElement("i", { className: 'chevron-down' })),
         colorPickerModal,
-        isMenuOpen && (React.createElement(TableActionMenu, { cellMerge: cellMerge, contextRef: menuRootRef, onClose: function () { return setIsMenuOpen(false); }, setIsMenuOpen: setIsMenuOpen, showColorPickerModal: showColorPickerModal, tableCellNode: tableCellNode }))))));
+        isMenuOpen && (React.createElement(TableActionMenu, { cellMerge: cellMerge, contextRef: menuRootRef, onClose: () => setIsMenuOpen(false), setIsMenuOpen: setIsMenuOpen, showColorPickerModal: showColorPickerModal, tableCellNode: tableCellNode }))))));
 }
-export default function TableActionMenuPlugin(_a) {
-    var _b = _a.anchorElem, anchorElem = _b === void 0 ? document.body : _b, _c = _a.cellMerge, cellMerge = _c === void 0 ? false : _c;
-    var isEditable = useLexicalEditable();
+export default function TableActionMenuPlugin({ anchorElem = document.body, cellMerge = false, }) {
+    const isEditable = useLexicalEditable();
     return createPortal(isEditable ? React.createElement(TableCellActionMenuContainer, { anchorElem: anchorElem, cellMerge: cellMerge }) : null, anchorElem);
 }
 //# sourceMappingURL=index.js.map