@payloadcms/richtext-lexical 3.0.0-beta.9 → 3.0.0-beta.90

package/dist/features/experimental_table/client/plugins/TableActionMenuPlugin/index.js

@@ -0,0 +1,759 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
+import { $deleteTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $getNodeTriplet, $getTableCellNodeFromLexicalNode, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumn__EXPERIMENTAL, $insertTableRow__EXPERIMENTAL, $isTableCellNode, $isTableRowNode, $isTableSelection, $unmergeCell, TableCellHeaderStates, TableCellNode, getTableObserverFromTableElement } from '@lexical/table';
+import { useScrollInfo } from '@payloadcms/ui';
+import { $createParagraphNode, $getRoot, $getSelection, $isElementNode, $isParagraphNode, $isRangeSelection, $isTextNode } from 'lexical';
+import * as React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { MeatballsIcon } from '../../../../../lexical/ui/icons/Meatballs/index.js';
+function computeSelectionCount(selection) {
+  const 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 isTableSelectionRectangular(selection) {
+  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)) {
+      const row = node.getParentOrThrow();
+      if ($isTableRowNode(row)) {
+        throw new Error('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;
+      }
+      const colSpan = node.__colSpan;
+      for (let 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(v => v === currentRows[0]);
+}
+function $canUnmerge() {
+  const selection = $getSelection();
+  if ($isRangeSelection(selection) && !selection.isCollapsed() || $isTableSelection(selection) && !selection.anchor.is(selection.focus) || !$isRangeSelection(selection) && !$isTableSelection(selection)) {
+    return false;
+  }
+  const [cell] = $getNodeTriplet(selection.anchor);
+  return cell.__colSpan > 1 || cell.__rowSpan > 1;
+}
+function $cellContainsEmptyParagraph(cell) {
+  if (cell.getChildrenSize() !== 1) {
+    return false;
+  }
+  const firstChild = cell.getFirstChildOrThrow();
+  if (!$isParagraphNode(firstChild) || !firstChild.isEmpty()) {
+    return false;
+  }
+  return true;
+}
+function $selectLastDescendant(node) {
+  const lastDescendant = node.getLastDescendant();
+  if ($isTextNode(lastDescendant)) {
+    lastDescendant.select();
+  } else if ($isElementNode(lastDescendant)) {
+    lastDescendant.selectEnd();
+  } else if (lastDescendant !== null) {
+    lastDescendant.selectNext();
+  }
+}
+function TableActionMenu(t0) {
+  const $ = _c(69);
+  const {
+    cellMerge,
+    contextRef,
+    onClose,
+    setIsMenuOpen,
+    tableCellNode: _tableCellNode
+  } = t0;
+  const [editor] = useLexicalComposerContext();
+  const dropDownRef = useRef(null);
+  const [tableCellNode, updateTableCellNode] = useState(_tableCellNode);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      columns: 1,
+      rows: 1
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const [selectionCounts, updateSelectionCounts] = useState(t1);
+  const [canMergeCells, setCanMergeCells] = useState(false);
+  const [canUnmergeCell, setCanUnmergeCell] = useState(false);
+  const {
+    y
+  } = useScrollInfo();
+  let t2;
+  let t3;
+  if ($[1] !== editor || $[2] !== tableCellNode) {
+    t2 = () => editor.registerMutationListener(TableCellNode, nodeMutations => {
+      const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
+      if (nodeUpdated) {
+        editor.getEditorState().read(() => {
+          updateTableCellNode(tableCellNode.getLatest());
+        });
+      }
+    }, {
+      skipInitialization: true
+    });
+    t3 = [editor, tableCellNode];
+    $[1] = editor;
+    $[2] = tableCellNode;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t2 = $[3];
+    t3 = $[4];
+  }
+  useEffect(t2, t3);
+  let t4;
+  let t5;
+  if ($[5] !== editor) {
+    t4 = () => {
+      editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if ($isTableSelection(selection)) {
+          const currentSelectionCounts = computeSelectionCount(selection);
+          updateSelectionCounts(computeSelectionCount(selection));
+          setCanMergeCells(isTableSelectionRectangular(selection) && (currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1));
+        }
+        setCanUnmergeCell($canUnmerge());
+      });
+    };
+    t5 = [editor];
+    $[5] = editor;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t4 = $[6];
+    t5 = $[7];
+  }
+  useEffect(t4, t5);
+  useEffect(() => {
+    const menuButtonElement = contextRef.current;
+    const dropDownElement = dropDownRef.current;
+    const rootElement = editor.getRootElement();
+    if (menuButtonElement != null && dropDownElement != null && rootElement != null) {
+      const rootEleRect = rootElement.getBoundingClientRect();
+      const menuButtonRect = menuButtonElement.getBoundingClientRect();
+      dropDownElement.style.opacity = "1";
+      const dropDownElementRect = dropDownElement.getBoundingClientRect();
+      let leftPosition = menuButtonRect.right + 5;
+      if (leftPosition + dropDownElementRect.width > window.innerWidth || leftPosition + dropDownElementRect.width > rootEleRect.right) {
+        const position = menuButtonRect.left - dropDownElementRect.width - 5;
+        leftPosition = (position < 0 ? 5 : position) + window.pageXOffset;
+      }
+      dropDownElement.style.left = `${leftPosition + window.pageXOffset}px`;
+      let topPosition = menuButtonRect.top;
+      if (topPosition + dropDownElementRect.height > window.innerHeight) {
+        const position_0 = menuButtonRect.bottom - dropDownElementRect.height;
+        topPosition = (position_0 < 0 ? 5 : position_0) + window.pageYOffset;
+      }
+      dropDownElement.style.top = `${topPosition}px`;
+    }
+  }, [contextRef, dropDownRef, editor, y]);
+  let t6;
+  if ($[8] !== setIsMenuOpen || $[9] !== contextRef) {
+    t6 = [setIsMenuOpen, contextRef];
+    $[8] = setIsMenuOpen;
+    $[9] = contextRef;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  useEffect(() => {
+    const handleClickOutside = 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 () => window.removeEventListener("click", handleClickOutside);
+  }, t6);
+  let t7;
+  if ($[11] !== editor || $[12] !== tableCellNode) {
+    t7 = () => {
+      editor.update(() => {
+        if (tableCellNode.isAttached()) {
+          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+          const tableElement = editor.getElementByKey(tableNode.getKey());
+          if (!tableElement) {
+            throw new Error("Expected to find tableElement in DOM");
+          }
+          const tableSelection = getTableObserverFromTableElement(tableElement);
+          if (tableSelection !== null) {
+            tableSelection.clearHighlight();
+          }
+          tableNode.markDirty();
+          updateTableCellNode(tableCellNode.getLatest());
+        }
+        const rootNode = $getRoot();
+        rootNode.selectStart();
+      });
+    };
+    $[11] = editor;
+    $[12] = tableCellNode;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  const clearTableSelection = t7;
+  let t8;
+  if ($[14] !== editor || $[15] !== onClose) {
+    t8 = () => {
+      editor.update(() => {
+        const selection_0 = $getSelection();
+        if ($isTableSelection(selection_0)) {
+          const {
+            columns,
+            rows
+          } = computeSelectionCount(selection_0);
+          const nodes = selection_0.getNodes();
+          let firstCell = null;
+          for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if ($isTableCellNode(node)) {
+              if (firstCell === null) {
+                node.setColSpan(columns).setRowSpan(rows);
+                firstCell = node;
+                const isEmpty = $cellContainsEmptyParagraph(node);
+                let firstChild;
+                if (isEmpty && $isParagraphNode(firstChild = node.getFirstChild())) {
+                  firstChild.remove();
+                }
+              } else {
+                if ($isTableCellNode(firstCell)) {
+                  const isEmpty_0 = $cellContainsEmptyParagraph(node);
+                  if (!isEmpty_0) {
+                    firstCell.append(...node.getChildren());
+                  }
+                  node.remove();
+                }
+              }
+            }
+          }
+          if (firstCell !== null) {
+            if (firstCell.getChildrenSize() === 0) {
+              firstCell.append($createParagraphNode());
+            }
+            $selectLastDescendant(firstCell);
+          }
+          onClose();
+        }
+      });
+    };
+    $[14] = editor;
+    $[15] = onClose;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  const mergeTableCellsAtSelection = t8;
+  let t9;
+  if ($[17] !== editor) {
+    t9 = () => {
+      editor.update(() => {
+        $unmergeCell();
+      });
+    };
+    $[17] = editor;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  const unmergeTableCellsAtSelection = t9;
+  let t10;
+  if ($[19] !== editor || $[20] !== onClose) {
+    t10 = shouldInsertAfter => {
+      editor.update(() => {
+        $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
+        onClose();
+      });
+    };
+    $[19] = editor;
+    $[20] = onClose;
+    $[21] = t10;
+  } else {
+    t10 = $[21];
+  }
+  const insertTableRowAtSelection = t10;
+  let t11;
+  if ($[22] !== editor || $[23] !== selectionCounts.columns || $[24] !== onClose) {
+    t11 = shouldInsertAfter_0 => {
+      editor.update(() => {
+        for (let i_0 = 0; i_0 < selectionCounts.columns; i_0++) {
+          $insertTableColumn__EXPERIMENTAL(shouldInsertAfter_0);
+        }
+        onClose();
+      });
+    };
+    $[22] = editor;
+    $[23] = selectionCounts.columns;
+    $[24] = onClose;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  const insertTableColumnAtSelection = t11;
+  let t12;
+  if ($[26] !== editor || $[27] !== onClose) {
+    t12 = () => {
+      editor.update(() => {
+        $deleteTableRow__EXPERIMENTAL();
+        onClose();
+      });
+    };
+    $[26] = editor;
+    $[27] = onClose;
+    $[28] = t12;
+  } else {
+    t12 = $[28];
+  }
+  const deleteTableRowAtSelection = t12;
+  let t13;
+  if ($[29] !== editor || $[30] !== tableCellNode || $[31] !== clearTableSelection || $[32] !== onClose) {
+    t13 = () => {
+      editor.update(() => {
+        const tableNode_0 = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+        tableNode_0.remove();
+        clearTableSelection();
+        onClose();
+      });
+    };
+    $[29] = editor;
+    $[30] = tableCellNode;
+    $[31] = clearTableSelection;
+    $[32] = onClose;
+    $[33] = t13;
+  } else {
+    t13 = $[33];
+  }
+  const deleteTableAtSelection = t13;
+  let t14;
+  if ($[34] !== editor || $[35] !== onClose) {
+    t14 = () => {
+      editor.update(() => {
+        $deleteTableColumn__EXPERIMENTAL();
+        onClose();
+      });
+    };
+    $[34] = editor;
+    $[35] = onClose;
+    $[36] = t14;
+  } else {
+    t14 = $[36];
+  }
+  const deleteTableColumnAtSelection = t14;
+  let t15;
+  if ($[37] !== editor || $[38] !== tableCellNode || $[39] !== clearTableSelection || $[40] !== onClose) {
+    t15 = () => {
+      editor.update(() => {
+        const tableNode_1 = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+        const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+        const tableRows = tableNode_1.getChildren();
+        if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
+          throw new Error("Expected table cell to be inside of table row.");
+        }
+        const tableRow = tableRows[tableRowIndex];
+        if (!$isTableRowNode(tableRow)) {
+          throw new Error("Expected table row");
+        }
+        tableRow.getChildren().forEach(tableCell => {
+          if (!$isTableCellNode(tableCell)) {
+            throw new Error("Expected table cell");
+          }
+          tableCell.toggleHeaderStyle(TableCellHeaderStates.ROW);
+        });
+        clearTableSelection();
+        onClose();
+      });
+    };
+    $[37] = editor;
+    $[38] = tableCellNode;
+    $[39] = clearTableSelection;
+    $[40] = onClose;
+    $[41] = t15;
+  } else {
+    t15 = $[41];
+  }
+  const toggleTableRowIsHeader = t15;
+  let t16;
+  if ($[42] !== editor || $[43] !== tableCellNode || $[44] !== clearTableSelection || $[45] !== onClose) {
+    t16 = () => {
+      editor.update(() => {
+        const tableNode_2 = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+        const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
+        const tableRows_0 = tableNode_2.getChildren();
+        const maxRowsLength = Math.max(...tableRows_0.map(row => row.getChildren().length));
+        if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
+          throw new Error("Expected table cell to be inside of table row.");
+        }
+        for (let r = 0; r < tableRows_0.length; r++) {
+          const tableRow_0 = tableRows_0[r];
+          if (!$isTableRowNode(tableRow_0)) {
+            throw new Error("Expected table row");
+          }
+          const tableCells = tableRow_0.getChildren();
+          if (tableColumnIndex >= tableCells.length) {
+            continue;
+          }
+          const tableCell_0 = tableCells[tableColumnIndex];
+          if (!$isTableCellNode(tableCell_0)) {
+            throw new Error("Expected table cell");
+          }
+          tableCell_0.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
+        }
+        clearTableSelection();
+        onClose();
+      });
+    };
+    $[42] = editor;
+    $[43] = tableCellNode;
+    $[44] = clearTableSelection;
+    $[45] = onClose;
+    $[46] = t16;
+  } else {
+    t16 = $[46];
+  }
+  const toggleTableColumnIsHeader = t16;
+  let mergeCellButton = null;
+  if (cellMerge) {
+    if (canMergeCells) {
+      let t17;
+      if ($[47] !== mergeTableCellsAtSelection) {
+        t17 = () => mergeTableCellsAtSelection();
+        $[47] = mergeTableCellsAtSelection;
+        $[48] = t17;
+      } else {
+        t17 = $[48];
+      }
+      mergeCellButton = _jsx("button", {
+        className: "item",
+        "data-test-id": "table-merge-cells",
+        onClick: t17,
+        type: "button",
+        children: "Merge cells"
+      });
+    } else {
+      if (canUnmergeCell) {
+        let t17;
+        if ($[49] !== unmergeTableCellsAtSelection) {
+          t17 = () => unmergeTableCellsAtSelection();
+          $[49] = unmergeTableCellsAtSelection;
+          $[50] = t17;
+        } else {
+          t17 = $[50];
+        }
+        mergeCellButton = _jsx("button", {
+          className: "item",
+          "data-test-id": "table-unmerge-cells",
+          onClick: t17,
+          type: "button",
+          children: "Unmerge cells"
+        });
+      }
+    }
+  }
+  let t17;
+  if ($[51] !== insertTableRowAtSelection) {
+    t17 = () => insertTableRowAtSelection(false);
+    $[51] = insertTableRowAtSelection;
+    $[52] = t17;
+  } else {
+    t17 = $[52];
+  }
+  let t18;
+  if ($[53] !== insertTableRowAtSelection) {
+    t18 = () => insertTableRowAtSelection(true);
+    $[53] = insertTableRowAtSelection;
+    $[54] = t18;
+  } else {
+    t18 = $[54];
+  }
+  let t19;
+  if ($[55] !== insertTableColumnAtSelection) {
+    t19 = () => insertTableColumnAtSelection(false);
+    $[55] = insertTableColumnAtSelection;
+    $[56] = t19;
+  } else {
+    t19 = $[56];
+  }
+  let t20;
+  if ($[57] !== insertTableColumnAtSelection) {
+    t20 = () => insertTableColumnAtSelection(true);
+    $[57] = insertTableColumnAtSelection;
+    $[58] = t20;
+  } else {
+    t20 = $[58];
+  }
+  let t21;
+  if ($[59] !== deleteTableColumnAtSelection) {
+    t21 = () => deleteTableColumnAtSelection();
+    $[59] = deleteTableColumnAtSelection;
+    $[60] = t21;
+  } else {
+    t21 = $[60];
+  }
+  let t22;
+  if ($[61] !== deleteTableRowAtSelection) {
+    t22 = () => deleteTableRowAtSelection();
+    $[61] = deleteTableRowAtSelection;
+    $[62] = t22;
+  } else {
+    t22 = $[62];
+  }
+  let t23;
+  if ($[63] !== deleteTableAtSelection) {
+    t23 = () => deleteTableAtSelection();
+    $[63] = deleteTableAtSelection;
+    $[64] = t23;
+  } else {
+    t23 = $[64];
+  }
+  let t24;
+  if ($[65] !== toggleTableRowIsHeader) {
+    t24 = () => toggleTableRowIsHeader();
+    $[65] = toggleTableRowIsHeader;
+    $[66] = t24;
+  } else {
+    t24 = $[66];
+  }
+  let t25;
+  if ($[67] !== toggleTableColumnIsHeader) {
+    t25 = () => toggleTableColumnIsHeader();
+    $[67] = toggleTableColumnIsHeader;
+    $[68] = t25;
+  } else {
+    t25 = $[68];
+  }
+  return createPortal(_jsxs("div", {
+    className: "table-action-menu-dropdown",
+    onClick: _temp,
+    ref: dropDownRef,
+    children: [mergeCellButton ? _jsxs(React.Fragment, {
+      children: [mergeCellButton, _jsx("hr", {})]
+    }) : null, _jsx("button", {
+      className: "item",
+      "data-test-id": "table-insert-row-above",
+      onClick: t17,
+      type: "button",
+      children: _jsxs("span", {
+        className: "text",
+        children: ["Insert ", selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`, " above"]
+      })
+    }), _jsx("button", {
+      className: "item",
+      "data-test-id": "table-insert-row-below",
+      onClick: t18,
+      type: "button",
+      children: _jsxs("span", {
+        className: "text",
+        children: ["Insert ", selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`, " below"]
+      })
+    }), _jsx("hr", {}), _jsx("button", {
+      className: "item",
+      "data-test-id": "table-insert-column-before",
+      onClick: t19,
+      type: "button",
+      children: _jsxs("span", {
+        className: "text",
+        children: ["Insert ", selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`, " ", "left"]
+      })
+    }), _jsx("button", {
+      className: "item",
+      "data-test-id": "table-insert-column-after",
+      onClick: t20,
+      type: "button",
+      children: _jsxs("span", {
+        className: "text",
+        children: ["Insert ", selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`, " ", "right"]
+      })
+    }), _jsx("hr", {}), _jsx("button", {
+      className: "item",
+      "data-test-id": "table-delete-columns",
+      onClick: t21,
+      type: "button",
+      children: _jsx("span", {
+        className: "text",
+        children: "Delete column"
+      })
+    }), _jsx("button", {
+      className: "item",
+      "data-test-id": "table-delete-rows",
+      onClick: t22,
+      type: "button",
+      children: _jsx("span", {
+        className: "text",
+        children: "Delete row"
+      })
+    }), _jsx("button", {
+      className: "item",
+      "data-test-id": "table-delete",
+      onClick: t23,
+      type: "button",
+      children: _jsx("span", {
+        className: "text",
+        children: "Delete table"
+      })
+    }), _jsx("hr", {}), _jsx("button", {
+      className: "item",
+      onClick: t24,
+      type: "button",
+      children: _jsxs("span", {
+        className: "text",
+        children: [(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add", " ", "row header"]
+      })
+    }), _jsx("button", {
+      className: "item",
+      "data-test-id": "table-column-header",
+      onClick: t25,
+      type: "button",
+      children: _jsxs("span", {
+        className: "text",
+        children: [(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add", " ", "column header"]
+      })
+    })]
+  }), document.body);
+}
+function _temp(e) {
+  e.stopPropagation();
+}
+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 $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;
+    }
+    const rootElement = editor.getRootElement();
+    if ($isRangeSelection(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
+      const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
+      if (tableCellNodeFromSelection == null) {
+        setTableMenuCellNode(null);
+        return;
+      }
+      const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
+      if (tableCellParentNodeDOM == null) {
+        setTableMenuCellNode(null);
+        return;
+      }
+      setTableMenuCellNode(tableCellNodeFromSelection);
+    } else if (!activeElement) {
+      setTableMenuCellNode(null);
+    }
+  }, [editor]);
+  useEffect(() => {
+    return editor.registerUpdateListener(() => {
+      editor.getEditorState().read(() => {
+        $moveMenu();
+      });
+    });
+  });
+  useEffect(() => {
+    const menuButtonDOM = menuButtonRef.current;
+    if (menuButtonDOM != null && tableCellNode != null) {
+      const tableCellNodeDOM = editor.getElementByKey(tableCellNode.getKey());
+      if (tableCellNodeDOM != null) {
+        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(${left}px, ${top}px)`;
+      } else {
+        menuButtonDOM.style.opacity = '0';
+        menuButtonDOM.style.transform = 'translate(-10000px, -10000px)';
+      }
+    }
+  }, [menuButtonRef, tableCellNode, editor, anchorElem]);
+  const prevTableCellDOM = useRef(tableCellNode);
+  useEffect(() => {
+    if (prevTableCellDOM.current !== tableCellNode) {
+      setIsMenuOpen(false);
+    }
+    prevTableCellDOM.current = tableCellNode;
+  }, [prevTableCellDOM, tableCellNode]);
+  return /*#__PURE__*/_jsx("div", {
+    className: "table-cell-action-button-container",
+    ref: menuButtonRef,
+    children: tableCellNode != null && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx("button", {
+        className: "table-cell-action-button",
+        onClick: e => {
+          e.stopPropagation();
+          setIsMenuOpen(!isMenuOpen);
+        },
+        ref: menuRootRef,
+        type: "button",
+        children: /*#__PURE__*/_jsx(MeatballsIcon, {})
+      }), isMenuOpen && /*#__PURE__*/_jsx(TableActionMenu, {
+        cellMerge: cellMerge,
+        contextRef: menuRootRef,
+        onClose: () => setIsMenuOpen(false),
+        setIsMenuOpen: setIsMenuOpen,
+        tableCellNode: tableCellNode
+      })]
+    })
+  });
+}
+export const TableActionMenuPlugin = t0 => {
+  const $ = _c(3);
+  const {
+    anchorElem
+  } = t0;
+  const isEditable = useLexicalEditable();
+  let t1;
+  if ($[0] !== isEditable || $[1] !== anchorElem) {
+    t1 = createPortal(isEditable ? _jsx(TableCellActionMenuContainer, {
+      anchorElem: anchorElem ?? document.body,
+      cellMerge: true
+    }) : null, anchorElem ?? document.body);
+    $[0] = isEditable;
+    $[1] = anchorElem;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map