phx-react 1.3.1578 → 1.3.1579

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

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = TableActionMenuPlugin;
-var tslib_1 = require("tslib");
-var LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
-var useLexicalEditable_1 = tslib_1.__importDefault(require("@lexical/react/useLexicalEditable"));
-var table_1 = require("@lexical/table");
-var lexical_1 = require("lexical");
-var React = tslib_1.__importStar(require("react"));
-var react_1 = require("react");
-var react_dom_1 = require("react-dom");
-var useModal_1 = tslib_1.__importDefault(require("../../hooks/useModal"));
-var invariant_1 = tslib_1.__importDefault(require("../../shared/invariant"));
-var ColorPicker_1 = tslib_1.__importDefault(require("../../ui/ColorPicker"));
+const tslib_1 = require("tslib");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const useLexicalEditable_1 = tslib_1.__importDefault(require("@lexical/react/useLexicalEditable"));
+const table_1 = require("@lexical/table");
+const lexical_1 = require("lexical");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const useModal_1 = tslib_1.__importDefault(require("../../hooks/useModal"));
+const invariant_1 = tslib_1.__importDefault(require("../../shared/invariant"));
+const ColorPicker_1 = tslib_1.__importDefault(require("../../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,
@@ -22,15 +22,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 ((0, table_1.$isTableCellNode)(node)) {
-            var row = node.getParentOrThrow();
+            const row = node.getParentOrThrow();
             (0, invariant_1.default)((0, table_1.$isTableRowNode)(row), 'Expected CellNode to have a RowNode parent');
             if (currentRow !== row) {
                 if (expectedColumns !== null && currentColumns !== expectedColumns) {
@@ -42,8 +42,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;
                 }
@@ -52,30 +52,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 = (0, lexical_1.$getSelection)();
+    const selection = (0, lexical_1.$getSelection)();
     if (((0, lexical_1.$isRangeSelection)(selection) && !selection.isCollapsed()) ||
         ((0, lexical_1.DEPRECATED_$isGridSelection)(selection) && !selection.anchor.is(selection.focus)) ||
         (!(0, lexical_1.$isRangeSelection)(selection) && !(0, lexical_1.DEPRECATED_$isGridSelection)(selection))) {
         return false;
     }
-    var cell = (0, lexical_1.DEPRECATED_$getNodeTriplet)(selection.anchor)[0];
+    const [cell] = (0, lexical_1.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 (!(0, lexical_1.$isParagraphNode)(firstChild) || !firstChild.isEmpty()) {
         return false;
     }
     return true;
 }
 function $selectLastDescendant(node) {
-    var lastDescendant = node.getLastDescendant();
+    const lastDescendant = node.getLastDescendant();
     if ((0, lexical_1.$isTextNode)(lastDescendant)) {
         lastDescendant.select();
     }
@@ -87,10 +87,10 @@ function $selectLastDescendant(node) {
     }
 }
 function currentCellBackgroundColor(editor) {
-    return editor.getEditorState().read(function () {
-        var selection = (0, lexical_1.$getSelection)();
+    return editor.getEditorState().read(() => {
+        const selection = (0, lexical_1.$getSelection)();
         if ((0, lexical_1.$isRangeSelection)(selection) || (0, lexical_1.DEPRECATED_$isGridSelection)(selection)) {
-            var cell = (0, lexical_1.DEPRECATED_$getNodeTriplet)(selection.anchor)[0];
+            const [cell] = (0, lexical_1.DEPRECATED_$getNodeTriplet)(selection.anchor);
             if ((0, table_1.$isTableCellNode)(cell)) {
                 return cell.getBackgroundColor();
             }
@@ -98,35 +98,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 = (0, LexicalComposerContext_1.useLexicalComposerContext)()[0];
-    var dropDownRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(_tableCellNode), tableCellNode = _b[0], updateTableCellNode = _b[1];
-    var _c = (0, react_1.useState)({
+function TableActionMenu({ cellMerge, contextRef, onClose, setIsMenuOpen, showColorPickerModal, tableCellNode: _tableCellNode, }) {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const dropDownRef = (0, react_1.useRef)(null);
+    const [tableCellNode, updateTableCellNode] = (0, react_1.useState)(_tableCellNode);
+    const [selectionCounts, updateSelectionCounts] = (0, react_1.useState)({
         columns: 1,
         rows: 1,
-    }), selectionCounts = _c[0], updateSelectionCounts = _c[1];
-    var _d = (0, react_1.useState)(false), canMergeCells = _d[0], setCanMergeCells = _d[1];
-    var _e = (0, react_1.useState)(false), canUnmergeCell = _e[0], setCanUnmergeCell = _e[1];
-    var _f = (0, react_1.useState)(function () { return currentCellBackgroundColor(editor) || ''; }), backgroundColor = _f[0], setBackgroundColor = _f[1];
-    (0, react_1.useEffect)(function () {
-        return editor.registerMutationListener(table_1.TableCellNode, function (nodeMutations) {
-            var nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === 'updated';
-            if (nodeUpdated) {
-                editor.getEditorState().read(function () {
-                    updateTableCellNode(tableCellNode.getLatest());
-                });
-                setBackgroundColor(currentCellBackgroundColor(editor) || '');
-            }
-        });
-    }, [editor, tableCellNode]);
-    (0, react_1.useEffect)(function () {
-        editor.getEditorState().read(function () {
-            var selection = (0, lexical_1.$getSelection)();
+    });
+    const [canMergeCells, setCanMergeCells] = (0, react_1.useState)(false);
+    const [canUnmergeCell, setCanUnmergeCell] = (0, react_1.useState)(false);
+    const [backgroundColor, setBackgroundColor] = (0, react_1.useState)(() => currentCellBackgroundColor(editor) || '');
+    (0, react_1.useEffect)(() => editor.registerMutationListener(table_1.TableCellNode, (nodeMutations) => {
+        const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === 'updated';
+        if (nodeUpdated) {
+            editor.getEditorState().read(() => {
+                updateTableCellNode(tableCellNode.getLatest());
+            });
+            setBackgroundColor(currentCellBackgroundColor(editor) || '');
+        }
+    }), [editor, tableCellNode]);
+    (0, react_1.useEffect)(() => {
+        editor.getEditorState().read(() => {
+            const selection = (0, lexical_1.$getSelection)();
             // Merge cells
             if ((0, lexical_1.DEPRECATED_$isGridSelection)(selection)) {
-                var currentSelectionCounts = computeSelectionCount(selection);
+                const currentSelectionCounts = computeSelectionCount(selection);
                 updateSelectionCounts(computeSelectionCount(selection));
                 setCanMergeCells(isGridSelectionRectangular(selection) &&
                     (currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1));
@@ -135,32 +132,32 @@ function TableActionMenu(_a) {
             setCanUnmergeCell($canUnmerge());
         });
     }, [editor]);
-    (0, react_1.useEffect)(function () {
-        var menuButtonElement = contextRef.current;
-        var dropDownElement = dropDownRef.current;
-        var rootElement = editor.getRootElement();
+    (0, react_1.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]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         function handleClickOutside(event) {
             if (dropDownRef.current != null &&
                 contextRef.current != null &&
@@ -170,50 +167,50 @@ function TableActionMenu(_a) {
             }
         }
         window.addEventListener('click', handleClickOutside);
-        return function () { return window.removeEventListener('click', handleClickOutside); };
+        return () => window.removeEventListener('click', handleClickOutside);
     }, [setIsMenuOpen, contextRef]);
-    var clearTableSelection = (0, react_1.useCallback)(function () {
-        editor.update(function () {
+    const clearTableSelection = (0, react_1.useCallback)(() => {
+        editor.update(() => {
             if (tableCellNode.isAttached()) {
-                var tableNode = (0, table_1.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
-                var tableElement = editor.getElementByKey(tableNode.getKey());
+                const tableNode = (0, table_1.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
+                const tableElement = editor.getElementByKey(tableNode.getKey());
                 if (!tableElement) {
                     throw new Error('Expected to find tableElement in DOM');
                 }
-                var tableSelection = (0, table_1.getTableSelectionFromTableElement)(tableElement);
+                const tableSelection = (0, table_1.getTableSelectionFromTableElement)(tableElement);
                 if (tableSelection !== null) {
                     tableSelection.clearHighlight();
                 }
                 tableNode.markDirty();
                 updateTableCellNode(tableCellNode.getLatest());
             }
-            var rootNode = (0, lexical_1.$getRoot)();
+            const rootNode = (0, lexical_1.$getRoot)();
             rootNode.selectStart();
         });
     }, [editor, tableCellNode]);
-    var mergeTableCellsAtSelection = function () {
-        editor.update(function () {
-            var selection = (0, lexical_1.$getSelection)();
+    const mergeTableCellsAtSelection = () => {
+        editor.update(() => {
+            const selection = (0, lexical_1.$getSelection)();
             if ((0, lexical_1.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 ((0, lexical_1.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 && (0, lexical_1.$isParagraphNode)((firstChild = node.getFirstChild()))) {
                                 firstChild.remove();
                             }
                         }
                         else if ((0, lexical_1.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();
                         }
@@ -229,58 +226,58 @@ function TableActionMenu(_a) {
             }
         });
     };
-    var unmergeTableCellsAtSelection = function () {
-        editor.update(function () {
+    const unmergeTableCellsAtSelection = () => {
+        editor.update(() => {
             (0, table_1.$unmergeCell)();
         });
     };
-    var insertTableRowAtSelection = (0, react_1.useCallback)(function (shouldInsertAfter) {
-        editor.update(function () {
+    const insertTableRowAtSelection = (0, react_1.useCallback)((shouldInsertAfter) => {
+        editor.update(() => {
             (0, table_1.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
             onClose();
         });
     }, [editor, onClose]);
-    var insertTableColumnAtSelection = (0, react_1.useCallback)(function (shouldInsertAfter) {
-        editor.update(function () {
-            for (var i = 0; i < selectionCounts.columns; i++) {
+    const insertTableColumnAtSelection = (0, react_1.useCallback)((shouldInsertAfter) => {
+        editor.update(() => {
+            for (let i = 0; i < selectionCounts.columns; i++) {
                 (0, table_1.$insertTableColumn__EXPERIMENTAL)(shouldInsertAfter);
             }
             onClose();
         });
     }, [editor, onClose, selectionCounts.columns]);
-    var deleteTableRowAtSelection = (0, react_1.useCallback)(function () {
-        editor.update(function () {
+    const deleteTableRowAtSelection = (0, react_1.useCallback)(() => {
+        editor.update(() => {
             (0, table_1.$deleteTableRow__EXPERIMENTAL)();
             onClose();
         });
     }, [editor, onClose]);
-    var deleteTableAtSelection = (0, react_1.useCallback)(function () {
-        editor.update(function () {
-            var tableNode = (0, table_1.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
+    const deleteTableAtSelection = (0, react_1.useCallback)(() => {
+        editor.update(() => {
+            const tableNode = (0, table_1.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
             tableNode.remove();
             clearTableSelection();
             onClose();
         });
     }, [editor, tableCellNode, clearTableSelection, onClose]);
-    var deleteTableColumnAtSelection = (0, react_1.useCallback)(function () {
-        editor.update(function () {
+    const deleteTableColumnAtSelection = (0, react_1.useCallback)(() => {
+        editor.update(() => {
             (0, table_1.$deleteTableColumn__EXPERIMENTAL)();
             onClose();
         });
     }, [editor, onClose]);
-    var toggleTableRowIsHeader = (0, react_1.useCallback)(function () {
-        editor.update(function () {
-            var tableNode = (0, table_1.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
-            var tableRowIndex = (0, table_1.$getTableRowIndexFromTableCellNode)(tableCellNode);
-            var tableRows = tableNode.getChildren();
+    const toggleTableRowIsHeader = (0, react_1.useCallback)(() => {
+        editor.update(() => {
+            const tableNode = (0, table_1.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
+            const tableRowIndex = (0, table_1.$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 (!(0, table_1.$isTableRowNode)(tableRow)) {
                 throw new Error('Expected table row');
             }
-            tableRow.getChildren().forEach(function (tableCell) {
+            tableRow.getChildren().forEach((tableCell) => {
                 if (!(0, table_1.$isTableCellNode)(tableCell)) {
                     throw new Error('Expected table cell');
                 }
@@ -290,26 +287,26 @@ function TableActionMenu(_a) {
             onClose();
         });
     }, [editor, tableCellNode, clearTableSelection, onClose]);
-    var toggleTableColumnIsHeader = (0, react_1.useCallback)(function () {
-        editor.update(function () {
-            var tableNode = (0, table_1.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
-            var tableColumnIndex = (0, table_1.$getTableColumnIndexFromTableCellNode)(tableCellNode);
-            var tableRows = tableNode.getChildren();
-            var maxRowsLength = Math.max.apply(Math, tableRows.map(function (row) { return row.getChildren().length; }));
+    const toggleTableColumnIsHeader = (0, react_1.useCallback)(() => {
+        editor.update(() => {
+            const tableNode = (0, table_1.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
+            const tableColumnIndex = (0, table_1.$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 (!(0, table_1.$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 (!(0, table_1.$isTableCellNode)(tableCell)) {
                     throw new Error('Expected table cell');
                 }
@@ -319,18 +316,18 @@ function TableActionMenu(_a) {
             onClose();
         });
     }, [editor, tableCellNode, clearTableSelection, onClose]);
-    var handleCellBackgroundColor = (0, react_1.useCallback)(function (value) {
-        editor.update(function () {
-            var selection = (0, lexical_1.$getSelection)();
+    const handleCellBackgroundColor = (0, react_1.useCallback)((value) => {
+        editor.update(() => {
+            const selection = (0, lexical_1.$getSelection)();
             if ((0, lexical_1.$isRangeSelection)(selection) || (0, lexical_1.DEPRECATED_$isGridSelection)(selection)) {
-                var cell = (0, lexical_1.DEPRECATED_$getNodeTriplet)(selection.anchor)[0];
+                const [cell] = (0, lexical_1.DEPRECATED_$getNodeTriplet)(selection.anchor);
                 if ((0, table_1.$isTableCellNode)(cell)) {
                     cell.setBackgroundColor(value);
                 }
                 if ((0, lexical_1.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 ((0, lexical_1.DEPRECATED_$isGridCellNode)(node)) {
                             node.setBackgroundColor(value);
                         }
@@ -339,59 +336,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 (0, react_dom_1.createPortal)(React.createElement("div", { ref: dropDownRef, className: 'dropdown', onClick: function (e) {
+    return (0, react_dom_1.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_1.default, { 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_1.default, { 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 & table_1.TableCellHeaderStates.ROW) === table_1.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 & table_1.TableCellHeaderStates.COLUMN) === table_1.TableCellHeaderStates.COLUMN
                     ? 'Remove'
@@ -399,34 +394,33 @@ function TableActionMenu(_a) {
                 ' ',
                 "column header"))), document.body);
 }
-function TableCellActionMenuContainer(_a) {
-    var anchorElem = _a.anchorElem, cellMerge = _a.cellMerge;
-    var editor = (0, LexicalComposerContext_1.useLexicalComposerContext)()[0];
-    var menuButtonRef = (0, react_1.useRef)(null);
-    var menuRootRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(false), isMenuOpen = _b[0], setIsMenuOpen = _b[1];
-    var _c = (0, react_1.useState)(null), tableCellNode = _c[0], setTableMenuCellNode = _c[1];
-    var _d = (0, useModal_1.default)(), colorPickerModal = _d[0], showColorPickerModal = _d[1];
-    var moveMenu = (0, react_1.useCallback)(function () {
-        var menu = menuButtonRef.current;
-        var selection = (0, lexical_1.$getSelection)();
-        var nativeSelection = window.getSelection();
-        var activeElement = document.activeElement;
+function TableCellActionMenuContainer({ anchorElem, cellMerge, }) {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const menuButtonRef = (0, react_1.useRef)(null);
+    const menuRootRef = (0, react_1.useRef)(null);
+    const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
+    const [tableCellNode, setTableMenuCellNode] = (0, react_1.useState)(null);
+    const [colorPickerModal, showColorPickerModal] = (0, useModal_1.default)();
+    const moveMenu = (0, react_1.useCallback)(() => {
+        const menu = menuButtonRef.current;
+        const selection = (0, lexical_1.$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 ((0, lexical_1.$isRangeSelection)(selection) &&
             rootElement !== null &&
             nativeSelection !== null &&
             rootElement.contains(nativeSelection.anchorNode)) {
-            var tableCellNodeFromSelection = (0, table_1.$getTableCellNodeFromLexicalNode)(selection.anchor.getNode());
+            const tableCellNodeFromSelection = (0, table_1.$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;
@@ -437,25 +431,23 @@ function TableCellActionMenuContainer(_a) {
             setTableMenuCellNode(null);
         }
     }, [editor]);
-    (0, react_1.useEffect)(function () {
-        return editor.registerUpdateListener(function () {
-            editor.getEditorState().read(function () {
-                moveMenu();
-            });
+    (0, react_1.useEffect)(() => editor.registerUpdateListener(() => {
+        editor.getEditorState().read(() => {
+            moveMenu();
         });
-    });
-    (0, react_1.useEffect)(function () {
-        var menuButtonDOM = menuButtonRef.current;
+    }));
+    (0, react_1.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';
@@ -463,25 +455,24 @@ function TableCellActionMenuContainer(_a) {
             }
         }
     }, [menuButtonRef, tableCellNode, editor, anchorElem]);
-    var prevTableCellDOM = (0, react_1.useRef)(tableCellNode);
-    (0, react_1.useEffect)(function () {
+    const prevTableCellDOM = (0, react_1.useRef)(tableCellNode);
+    (0, react_1.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 }))))));
 }
-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 = (0, useLexicalEditable_1.default)();
+function TableActionMenuPlugin({ anchorElem = document.body, cellMerge = false, }) {
+    const isEditable = (0, useLexicalEditable_1.default)();
     return (0, react_dom_1.createPortal)(isEditable ? React.createElement(TableCellActionMenuContainer, { anchorElem: anchorElem, cellMerge: cellMerge }) : null, anchorElem);
 }
 //# sourceMappingURL=index.js.map