phx-react 1.3.1569 → 1.3.1571

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INSERT_POLL_COMMAND = void 0;
+exports.InsertPollDialog = InsertPollDialog;
+exports.default = PollPlugin;
+var tslib_1 = require("tslib");
+var LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+var utils_1 = require("@lexical/utils");
+var lexical_1 = require("lexical");
+var react_1 = require("react");
+var React = tslib_1.__importStar(require("react"));
+var PollNode_1 = require("../../nodes/PollNode");
+var Button_1 = tslib_1.__importDefault(require("../../ui/Button"));
+var Dialog_1 = require("../../ui/Dialog");
+var TextInput_1 = tslib_1.__importDefault(require("../../ui/TextInput"));
+exports.INSERT_POLL_COMMAND = (0, lexical_1.createCommand)('INSERT_POLL_COMMAND');
+function InsertPollDialog(_a) {
+    var activeEditor = _a.activeEditor, onClose = _a.onClose;
+    var _b = (0, react_1.useState)(''), question = _b[0], setQuestion = _b[1];
+    var onClick = function () {
+        activeEditor.dispatchCommand(exports.INSERT_POLL_COMMAND, question);
+        onClose();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TextInput_1.default, { label: 'Question', onChange: setQuestion, value: question }),
+        React.createElement(Dialog_1.DialogActions, null,
+            React.createElement(Button_1.default, { disabled: question.trim() === '', onClick: onClick }, "Confirm"))));
+}
+function PollPlugin() {
+    var editor = (0, LexicalComposerContext_1.useLexicalComposerContext)()[0];
+    (0, react_1.useEffect)(function () {
+        if (!editor.hasNodes([PollNode_1.PollNode])) {
+            throw new Error('PollPlugin: PollNode not registered on editor');
+        }
+        return editor.registerCommand(exports.INSERT_POLL_COMMAND, function (payload) {
+            var pollNode = (0, PollNode_1.$createPollNode)(payload, [(0, PollNode_1.createPollOption)(), (0, PollNode_1.createPollOption)()]);
+            (0, lexical_1.$insertNodes)([pollNode]);
+            if ((0, lexical_1.$isRootOrShadowRoot)(pollNode.getParentOrThrow())) {
+                (0, utils_1.$wrapNodeInElement)(pollNode, lexical_1.$createParagraphNode).selectEnd();
+            }
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/TextEditorV2/plugins/PollPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/TextEditorV2/plugins/PollPlugin/index.tsx"],"names":[],"mappings":";;;AAoBA,4CAwBC;AAED,6BAsBC;;AApED,gFAAiF;AACjF,wCAAmD;AACnD,mCAQgB;AAChB,+BAA2C;AAC3C,mDAA8B;AAC9B,iDAAkF;AAClF,mEAAoC;AACpC,0CAA+C;AAC/C,yEAA0C;AAE7B,QAAA,mBAAmB,GAA2B,IAAA,uBAAa,EAAC,qBAAqB,CAAC,CAAA;AAE/F,SAAgB,gBAAgB,CAAC,EAMhC;QALC,YAAY,kBAAA,EACZ,OAAO,aAAA;IAKD,IAAA,KAA0B,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAArC,QAAQ,QAAA,EAAE,WAAW,QAAgB,CAAA;IAE5C,IAAM,OAAO,GAAG;QACd,YAAY,CAAC,eAAe,CAAC,2BAAmB,EAAE,QAAQ,CAAC,CAAA;QAC3D,OAAO,EAAE,CAAA;IACX,CAAC,CAAA;IAED,OAAO,CACL;QACE,oBAAC,mBAAS,IAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,GAAI;QACtE,oBAAC,sBAAa;YACZ,oBAAC,gBAAM,IAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,cAEjD,CACK,CACf,CACJ,CAAA;AACH,CAAC;AAED,SAAwB,UAAU;IACzB,IAAA,MAAM,GAAI,IAAA,kDAAyB,GAAE,GAA/B,CAA+B;IAC5C,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,mBAAQ,CAAC,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAA;QAClE,CAAC;QAED,OAAO,MAAM,CAAC,eAAe,CAC3B,2BAAmB,EACnB,UAAC,OAAO;YACN,IAAM,QAAQ,GAAG,IAAA,0BAAe,EAAC,OAAO,EAAE,CAAC,IAAA,2BAAgB,GAAE,EAAE,IAAA,2BAAgB,GAAE,CAAC,CAAC,CAAA;YACnF,IAAA,sBAAY,EAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;YACxB,IAAI,IAAA,6BAAmB,EAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,EAAE,CAAC;gBACrD,IAAA,0BAAkB,EAAC,QAAQ,EAAE,8BAAoB,CAAC,CAAC,SAAS,EAAE,CAAA;YAChE,CAAC;YAED,OAAO,IAAI,CAAA;QACb,CAAC,EACD,iCAAuB,CACxB,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IACZ,OAAO,IAAI,CAAA;AACb,CAAC"}

package/dist/cjs/components/TextEditorV2/plugins/StickyPlugin/index.d.ts

@@ -0,0 +1 @@
+export default function StickyPlugin(): React.JSX.Element | null;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = StickyPlugin;
+var LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+var react_1 = require("react");
+var StickyNode_1 = require("../../nodes/StickyNode");
+function StickyPlugin() {
+    var editor = (0, LexicalComposerContext_1.useLexicalComposerContext)()[0];
+    (0, react_1.useEffect)(function () {
+        if (!editor.hasNodes([StickyNode_1.StickyNode])) {
+            throw new Error('StickyPlugin: StickyNode not registered on editor');
+        }
+    }, [editor]);
+    return null;
+}
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/TextEditorV2/plugins/StickyPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/TextEditorV2/plugins/StickyPlugin/index.ts"],"names":[],"mappings":";;AAIA,+BAQC;AAZD,gFAAiF;AACjF,+BAAiC;AACjC,qDAAmD;AAEnD,SAAwB,YAAY;IAC3B,IAAA,MAAM,GAAI,IAAA,kDAAyB,GAAE,GAA/B,CAA+B;IAC5C,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,uBAAU,CAAC,CAAC,EAAE,CAAC;YACnC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;QACtE,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IACZ,OAAO,IAAI,CAAA;AACb,CAAC"}

package/dist/cjs/components/TextEditorV2/plugins/TabFocusPlugin/index.d.ts

@@ -0,0 +1 @@
+export default function TabFocusPlugin(): null;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TabFocusPlugin;
+var LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+var lexical_1 = require("lexical");
+var react_1 = require("react");
+var COMMAND_PRIORITY_LOW = 1;
+var TAB_TO_FOCUS_INTERVAL = 100;
+var lastTabKeyDownTimestamp = 0;
+var hasRegisteredKeyDownListener = false;
+function registerKeyTimeStampTracker() {
+    window.addEventListener('keydown', function (event) {
+        // Tab
+        if (event.key === 'Tab') {
+            lastTabKeyDownTimestamp = event.timeStamp;
+        }
+    }, true);
+}
+function TabFocusPlugin() {
+    var editor = (0, LexicalComposerContext_1.useLexicalComposerContext)()[0];
+    (0, react_1.useEffect)(function () {
+        if (!hasRegisteredKeyDownListener) {
+            registerKeyTimeStampTracker();
+            hasRegisteredKeyDownListener = true;
+        }
+        return editor.registerCommand(lexical_1.FOCUS_COMMAND, function (event) {
+            var selection = (0, lexical_1.$getSelection)();
+            if ((0, lexical_1.$isRangeSelection)(selection)) {
+                if (lastTabKeyDownTimestamp + TAB_TO_FOCUS_INTERVAL > event.timeStamp) {
+                    (0, lexical_1.$setSelection)(selection.clone());
+                }
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor]);
+    return null;
+}
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/TextEditorV2/plugins/TabFocusPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/TextEditorV2/plugins/TabFocusPlugin/index.tsx"],"names":[],"mappings":";;AAuBA,iCAyBC;AAhDD,gFAAiF;AACjF,mCAAwF;AACxF,+BAAiC;AAEjC,IAAM,oBAAoB,GAAG,CAAC,CAAA;AAC9B,IAAM,qBAAqB,GAAG,GAAG,CAAA;AAEjC,IAAI,uBAAuB,GAAG,CAAC,CAAA;AAC/B,IAAI,4BAA4B,GAAG,KAAK,CAAA;AAExC,SAAS,2BAA2B;IAClC,MAAM,CAAC,gBAAgB,CACrB,SAAS,EACT,UAAC,KAAoB;QACnB,MAAM;QACN,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YACxB,uBAAuB,GAAG,KAAK,CAAC,SAAS,CAAA;QAC3C,CAAC;IACH,CAAC,EACD,IAAI,CACL,CAAA;AACH,CAAC;AAED,SAAwB,cAAc;IAC7B,IAAA,MAAM,GAAI,IAAA,kDAAyB,GAAE,GAA/B,CAA+B;IAE5C,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,4BAA4B,EAAE,CAAC;YAClC,2BAA2B,EAAE,CAAA;YAC7B,4BAA4B,GAAG,IAAI,CAAA;QACrC,CAAC;QAED,OAAO,MAAM,CAAC,eAAe,CAC3B,uBAAa,EACb,UAAC,KAAiB;YAChB,IAAM,SAAS,GAAG,IAAA,uBAAa,GAAE,CAAA;YACjC,IAAI,IAAA,2BAAiB,EAAC,SAAS,CAAC,EAAE,CAAC;gBACjC,IAAI,uBAAuB,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;oBACtE,IAAA,uBAAa,EAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAA;gBAClC,CAAC;YACH,CAAC;YACD,OAAO,KAAK,CAAA;QACd,CAAC,EACD,oBAAoB,CACrB,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,OAAO,IAAI,CAAA;AACb,CAAC"}

package/dist/cjs/components/TextEditorV2/plugins/TableActionMenuPlugin/index.d.ts

@@ -0,0 +1,5 @@
+import { ReactPortal } from 'react';
+export default function TableActionMenuPlugin({ anchorElem, cellMerge, }: {
+    anchorElem?: HTMLElement;
+    cellMerge?: boolean;
+}): null | ReactPortal;

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

@@ -0,0 +1,487 @@
+"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"));
+function computeSelectionCount(selection) {
+    var selectionShape = selection.getShape();
+    return {
+        columns: selectionShape.toX - selectionShape.fromX + 1,
+        rows: selectionShape.toY - selectionShape.fromY + 1,
+    };
+}
+// This is important when merging cells as there is no good way to re-merge weird shapes (a result
+// of selecting merged cells and non-merged)
+function 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];
+        if ((0, table_1.$isTableCellNode)(node)) {
+            var 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) {
+                    return false;
+                }
+                if (currentRow !== null) {
+                    expectedColumns = currentColumns;
+                }
+                currentRow = row;
+                currentColumns = 0;
+            }
+            var colSpan = node.__colSpan;
+            for (var j = 0; j < colSpan; j++) {
+                if (currentRows[currentColumns + j] === undefined) {
+                    currentRows[currentColumns + j] = 0;
+                }
+                currentRows[currentColumns + j] += node.__rowSpan;
+            }
+            currentColumns += colSpan;
+        }
+    }
+    return ((expectedColumns === null || currentColumns === expectedColumns) && currentRows.every(function (v) { return v === currentRows[0]; }));
+}
+function $canUnmerge() {
+    var 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];
+    return cell.__colSpan > 1 || cell.__rowSpan > 1;
+}
+function $cellContainsEmptyParagraph(cell) {
+    if (cell.getChildrenSize() !== 1) {
+        return false;
+    }
+    var firstChild = cell.getFirstChildOrThrow();
+    if (!(0, lexical_1.$isParagraphNode)(firstChild) || !firstChild.isEmpty()) {
+        return false;
+    }
+    return true;
+}
+function $selectLastDescendant(node) {
+    var lastDescendant = node.getLastDescendant();
+    if ((0, lexical_1.$isTextNode)(lastDescendant)) {
+        lastDescendant.select();
+    }
+    else if ((0, lexical_1.$isElementNode)(lastDescendant)) {
+        lastDescendant.selectEnd();
+    }
+    else if (lastDescendant !== null) {
+        lastDescendant.selectNext();
+    }
+}
+function currentCellBackgroundColor(editor) {
+    return editor.getEditorState().read(function () {
+        var 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];
+            if ((0, table_1.$isTableCellNode)(cell)) {
+                return cell.getBackgroundColor();
+            }
+        }
+        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)({
+        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)();
+            // Merge cells
+            if ((0, lexical_1.DEPRECATED_$isGridSelection)(selection)) {
+                var currentSelectionCounts = computeSelectionCount(selection);
+                updateSelectionCounts(computeSelectionCount(selection));
+                setCanMergeCells(isGridSelectionRectangular(selection) &&
+                    (currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1));
+            }
+            // Unmerge cell
+            setCanUnmergeCell($canUnmerge());
+        });
+    }, [editor]);
+    (0, react_1.useEffect)(function () {
+        var menuButtonElement = contextRef.current;
+        var dropDownElement = dropDownRef.current;
+        var rootElement = editor.getRootElement();
+        if (menuButtonElement != null && dropDownElement != null && rootElement != null) {
+            var rootEleRect = rootElement.getBoundingClientRect();
+            var menuButtonRect = menuButtonElement.getBoundingClientRect();
+            dropDownElement.style.opacity = '1';
+            var dropDownElementRect = dropDownElement.getBoundingClientRect();
+            var margin = 5;
+            var leftPosition = menuButtonRect.right + margin;
+            if (leftPosition + dropDownElementRect.width > window.innerWidth ||
+                leftPosition + dropDownElementRect.width > rootEleRect.right) {
+                var 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;
+            if (topPosition + dropDownElementRect.height > window.innerHeight) {
+                var position = menuButtonRect.bottom - dropDownElementRect.height;
+                topPosition = (position < 0 ? margin : position) + window.pageYOffset;
+            }
+            dropDownElement.style.top = "".concat(topPosition + +window.pageYOffset, "px");
+        }
+    }, [contextRef, dropDownRef, editor]);
+    (0, react_1.useEffect)(function () {
+        function handleClickOutside(event) {
+            if (dropDownRef.current != null &&
+                contextRef.current != null &&
+                !dropDownRef.current.contains(event.target) &&
+                !contextRef.current.contains(event.target)) {
+                setIsMenuOpen(false);
+            }
+        }
+        window.addEventListener('click', handleClickOutside);
+        return function () { return window.removeEventListener('click', handleClickOutside); };
+    }, [setIsMenuOpen, contextRef]);
+    var clearTableSelection = (0, react_1.useCallback)(function () {
+        editor.update(function () {
+            if (tableCellNode.isAttached()) {
+                var tableNode = (0, table_1.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
+                var tableElement = editor.getElementByKey(tableNode.getKey());
+                if (!tableElement) {
+                    throw new Error('Expected to find tableElement in DOM');
+                }
+                var tableSelection = (0, table_1.getTableSelectionFromTableElement)(tableElement);
+                if (tableSelection !== null) {
+                    tableSelection.clearHighlight();
+                }
+                tableNode.markDirty();
+                updateTableCellNode(tableCellNode.getLatest());
+            }
+            var rootNode = (0, lexical_1.$getRoot)();
+            rootNode.selectStart();
+        });
+    }, [editor, tableCellNode]);
+    var mergeTableCellsAtSelection = function () {
+        editor.update(function () {
+            var 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];
+                    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;
+                            if (isEmpty && (0, lexical_1.$isParagraphNode)((firstChild = node.getFirstChild()))) {
+                                firstChild.remove();
+                            }
+                        }
+                        else if ((0, lexical_1.DEPRECATED_$isGridCellNode)(firstCell)) {
+                            var isEmpty = $cellContainsEmptyParagraph(node);
+                            if (!isEmpty) {
+                                firstCell.append.apply(firstCell, node.getChildren());
+                            }
+                            node.remove();
+                        }
+                    }
+                }
+                if (firstCell !== null) {
+                    if (firstCell.getChildrenSize() === 0) {
+                        firstCell.append((0, lexical_1.$createParagraphNode)());
+                    }
+                    $selectLastDescendant(firstCell);
+                }
+                onClose();
+            }
+        });
+    };
+    var unmergeTableCellsAtSelection = function () {
+        editor.update(function () {
+            (0, table_1.$unmergeCell)();
+        });
+    };
+    var insertTableRowAtSelection = (0, react_1.useCallback)(function (shouldInsertAfter) {
+        editor.update(function () {
+            (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++) {
+                (0, table_1.$insertTableColumn__EXPERIMENTAL)(shouldInsertAfter);
+            }
+            onClose();
+        });
+    }, [editor, onClose, selectionCounts.columns]);
+    var deleteTableRowAtSelection = (0, react_1.useCallback)(function () {
+        editor.update(function () {
+            (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);
+            tableNode.remove();
+            clearTableSelection();
+            onClose();
+        });
+    }, [editor, tableCellNode, clearTableSelection, onClose]);
+    var deleteTableColumnAtSelection = (0, react_1.useCallback)(function () {
+        editor.update(function () {
+            (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();
+            if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
+                throw new Error('Expected table cell to be inside of table row.');
+            }
+            var tableRow = tableRows[tableRowIndex];
+            if (!(0, table_1.$isTableRowNode)(tableRow)) {
+                throw new Error('Expected table row');
+            }
+            tableRow.getChildren().forEach(function (tableCell) {
+                if (!(0, table_1.$isTableCellNode)(tableCell)) {
+                    throw new Error('Expected table cell');
+                }
+                tableCell.toggleHeaderStyle(table_1.TableCellHeaderStates.ROW);
+            });
+            clearTableSelection();
+            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; }));
+            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];
+                if (!(0, table_1.$isTableRowNode)(tableRow)) {
+                    throw new Error('Expected table row');
+                }
+                var 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];
+                if (!(0, table_1.$isTableCellNode)(tableCell)) {
+                    throw new Error('Expected table cell');
+                }
+                tableCell.toggleHeaderStyle(table_1.TableCellHeaderStates.COLUMN);
+            }
+            clearTableSelection();
+            onClose();
+        });
+    }, [editor, tableCellNode, clearTableSelection, onClose]);
+    var handleCellBackgroundColor = (0, react_1.useCallback)(function (value) {
+        editor.update(function () {
+            var 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];
+                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];
+                        if ((0, lexical_1.DEPRECATED_$isGridCellNode)(node)) {
+                            node.setBackgroundColor(value);
+                        }
+                    }
+                }
+            }
+        });
+    }, [editor]);
+    var 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"));
+        }
+        else if (canUnmergeCell) {
+            mergeCellButton = (React.createElement("button", { className: 'item', "data-test-id": 'table-unmerge-cells', onClick: function () { return unmergeTableCellsAtSelection(); }, type: 'button' }, "Unmerge cells"));
+        }
+    }
+    return (0, react_dom_1.createPortal)(React.createElement("div", { ref: dropDownRef, className: 'dropdown', onClick: function (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("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("span", { className: 'text' },
+                "Insert ",
+                selectionCounts.rows === 1 ? 'row' : "".concat(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("span", { className: 'text' },
+                "Insert ",
+                selectionCounts.rows === 1 ? 'row' : "".concat(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("span", { className: 'text' },
+                "Insert ",
+                selectionCounts.columns === 1 ? 'column' : "".concat(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("span", { className: 'text' },
+                "Insert ",
+                selectionCounts.columns === 1 ? 'column' : "".concat(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("span", { className: 'text' }, "Delete column")),
+        React.createElement("button", { className: 'item', "data-test-id": 'table-delete-rows', onClick: function () { return 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("span", { className: 'text' }, "Delete table")),
+        React.createElement("hr", null),
+        React.createElement("button", { className: 'item', onClick: function () { return 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("span", { className: 'text' },
+                (tableCellNode.__headerState & table_1.TableCellHeaderStates.COLUMN) === table_1.TableCellHeaderStates.COLUMN
+                    ? 'Remove'
+                    : 'Add',
+                ' ',
+                "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;
+        if (selection == null || menu == null) {
+            setTableMenuCellNode(null);
+            return;
+        }
+        var 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());
+            if (tableCellNodeFromSelection == null) {
+                setTableMenuCellNode(null);
+                return;
+            }
+            var tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
+            if (tableCellParentNodeDOM == null) {
+                setTableMenuCellNode(null);
+                return;
+            }
+            setTableMenuCellNode(tableCellNodeFromSelection);
+        }
+        else if (!activeElement) {
+            setTableMenuCellNode(null);
+        }
+    }, [editor]);
+    (0, react_1.useEffect)(function () {
+        return editor.registerUpdateListener(function () {
+            editor.getEditorState().read(function () {
+                moveMenu();
+            });
+        });
+    });
+    (0, react_1.useEffect)(function () {
+        var menuButtonDOM = menuButtonRef.current;
+        if (menuButtonDOM != null && tableCellNode != null) {
+            var 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;
+                menuButtonDOM.style.opacity = '1';
+                menuButtonDOM.style.transform = "translate(".concat(left, "px, ").concat(top_1, "px)");
+            }
+            else {
+                menuButtonDOM.style.opacity = '0';
+                menuButtonDOM.style.transform = 'translate(-10000px, -10000px)';
+            }
+        }
+    }, [menuButtonRef, tableCellNode, editor, anchorElem]);
+    var prevTableCellDOM = (0, react_1.useRef)(tableCellNode);
+    (0, react_1.useEffect)(function () {
+        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) {
+                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 }))))));
+}
+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)();
+    return (0, react_dom_1.createPortal)(isEditable ? React.createElement(TableCellActionMenuContainer, { anchorElem: anchorElem, cellMerge: cellMerge }) : null, anchorElem);
+}
+//# sourceMappingURL=index.js.map