@lexical/table 0.21.1-nightly.20241206.0 → 0.21.1-nightly.20241210.0

package/LexicalTable.dev.js

@@ -265,7 +265,7 @@ function $convertTableCellNodeElement(domNode) {
     node: tableCellNode
   };
 }
-function $createTableCellNode(headerState, colSpan = 1, width) {
+function $createTableCellNode(headerState = TableCellHeaderStates.NO_STATUS, colSpan = 1, width) {
   return lexical.$applyNodeReplacement(new TableCellNode(headerState, colSpan, width));
 }
 function $isTableCellNode(node) {
@@ -282,28 +282,6 @@ function $isTableCellNode(node) {
 
 const INSERT_TABLE_COMMAND = lexical.createCommand('INSERT_TABLE_COMMAND');
 
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
-
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const documentMode = CAN_USE_DOM && 'documentMode' in document ? document.documentMode : null;
-const IS_FIREFOX = CAN_USE_DOM && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
-CAN_USE_DOM && 'InputEvent' in window && !documentMode ? 'getTargetRanges' in new window.InputEvent('input') : false;
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -386,6 +364,7 @@ function $convertTableRowElement(domNode) {
     height = parseFloat(domNode_.style.height);
   }
   return {
+    after: children => utils.$descendantsMatching(children, $isTableCellNode),
     node: $createTableRowNode(height)
   };
 }
@@ -396,6 +375,28 @@ function $isTableRowNode(node) {
   return node instanceof TableRowNode;
 }
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const documentMode = CAN_USE_DOM && 'documentMode' in document ? document.documentMode : null;
+const IS_FIREFOX = CAN_USE_DOM && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
+CAN_USE_DOM && 'InputEvent' in window && !documentMode ? 'getTargetRanges' in new window.InputEvent('input') : false;
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -3458,6 +3459,7 @@ function $convertTableElement(domNode) {
     }
   }
   return {
+    after: children => utils.$descendantsMatching(children, $isTableRowNode),
     node: tableNode
   };
 }
@@ -3468,6 +3470,195 @@ function $isTableNode(node) {
   return node instanceof TableNode;
 }
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function $insertTableCommandListener({
+  rows,
+  columns,
+  includeHeaders
+}) {
+  const tableNode = $createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
+  utils.$insertNodeToNearestRoot(tableNode);
+  const firstDescendant = tableNode.getFirstDescendant();
+  if (lexical.$isTextNode(firstDescendant)) {
+    firstDescendant.select();
+  }
+  return true;
+}
+function $tableCellTransform(node) {
+  if (!$isTableRowNode(node.getParent())) {
+    // TableCellNode must be a child of TableRowNode.
+    node.remove();
+  } else if (node.isEmpty()) {
+    // TableCellNode should never be empty
+    node.append(lexical.$createParagraphNode());
+  }
+}
+function $tableRowTransform(node) {
+  if (!$isTableNode(node.getParent())) {
+    // TableRowNode must be a child of TableNode.
+    // TODO: Future support of tbody/thead/tfoot may change this
+    node.remove();
+  } else {
+    utils.$unwrapAndFilterDescendants(node, $isTableCellNode);
+  }
+}
+function $tableTransform(node) {
+  // TableRowNode is the only valid child for TableNode
+  // TODO: Future support of tbody/thead/tfoot/caption may change this
+  utils.$unwrapAndFilterDescendants(node, $isTableRowNode);
+  const [gridMap] = $computeTableMapSkipCellCheck(node, null, null);
+  const maxRowLength = gridMap.reduce((curLength, row) => {
+    return Math.max(curLength, row.length);
+  }, 0);
+  const rowNodes = node.getChildren();
+  for (let i = 0; i < gridMap.length; ++i) {
+    const rowNode = rowNodes[i];
+    if (!rowNode) {
+      continue;
+    }
+    if (!$isTableRowNode(rowNode)) {
+      throw Error(`TablePlugin: Expecting all children of TableNode to be TableRowNode, found ${rowNode.constructor.name} (type ${rowNode.getType()})`);
+    }
+    const rowLength = gridMap[i].reduce((acc, cell) => cell ? 1 + acc : acc, 0);
+    if (rowLength === maxRowLength) {
+      continue;
+    }
+    for (let j = rowLength; j < maxRowLength; ++j) {
+      // TODO: inherit header state from another header or body
+      const newCell = $createTableCellNode();
+      newCell.append(lexical.$createParagraphNode());
+      rowNode.append(newCell);
+    }
+  }
+}
+
+/**
+ * Register a transform to ensure that all TableCellNode have a colSpan and rowSpan of 1.
+ * This should only be registered when you do not want to support merged cells.
+ *
+ * @param editor The editor
+ * @returns An unregister callback
+ */
+function registerTableCellUnmergeTransform(editor) {
+  return editor.registerNodeTransform(TableCellNode, node => {
+    if (node.getColSpan() > 1 || node.getRowSpan() > 1) {
+      // When we have rowSpan we have to map the entire Table to understand where the new Cells
+      // fit best; let's analyze all Cells at once to save us from further transform iterations
+      const [,, gridNode] = $getNodeTriplet(node);
+      const [gridMap] = $computeTableMap(gridNode, node, node);
+      // TODO this function expects Tables to be normalized. Look into this once it exists
+      const rowsCount = gridMap.length;
+      const columnsCount = gridMap[0].length;
+      let row = gridNode.getFirstChild();
+      if (!$isTableRowNode(row)) {
+        throw Error(`Expected TableNode first child to be a RowNode`);
+      }
+      const unmerged = [];
+      for (let i = 0; i < rowsCount; i++) {
+        if (i !== 0) {
+          row = row.getNextSibling();
+          if (!$isTableRowNode(row)) {
+            throw Error(`Expected TableNode first child to be a RowNode`);
+          }
+        }
+        let lastRowCell = null;
+        for (let j = 0; j < columnsCount; j++) {
+          const cellMap = gridMap[i][j];
+          const cell = cellMap.cell;
+          if (cellMap.startRow === i && cellMap.startColumn === j) {
+            lastRowCell = cell;
+            unmerged.push(cell);
+          } else if (cell.getColSpan() > 1 || cell.getRowSpan() > 1) {
+            if (!$isTableCellNode(cell)) {
+              throw Error(`Expected TableNode cell to be a TableCellNode`);
+            }
+            const newCell = $createTableCellNode(cell.__headerState);
+            if (lastRowCell !== null) {
+              lastRowCell.insertAfter(newCell);
+            } else {
+              utils.$insertFirst(row, newCell);
+            }
+          }
+        }
+      }
+      for (const cell of unmerged) {
+        cell.setColSpan(1);
+        cell.setRowSpan(1);
+      }
+    }
+  });
+}
+function registerTableSelectionObserver(editor, hasTabHandler = true) {
+  const tableSelections = new Map();
+  const initializeTableNode = (tableNode, nodeKey, dom) => {
+    const tableElement = getTableElement(tableNode, dom);
+    const tableSelection = applyTableHandlers(tableNode, tableElement, editor, hasTabHandler);
+    tableSelections.set(nodeKey, [tableSelection, tableElement]);
+  };
+  const unregisterMutationListener = editor.registerMutationListener(TableNode, nodeMutations => {
+    editor.getEditorState().read(() => {
+      for (const [nodeKey, mutation] of nodeMutations) {
+        const tableSelection = tableSelections.get(nodeKey);
+        if (mutation === 'created' || mutation === 'updated') {
+          const {
+            tableNode,
+            tableElement
+          } = $getTableAndElementByKey(nodeKey);
+          if (tableSelection === undefined) {
+            initializeTableNode(tableNode, nodeKey, tableElement);
+          } else if (tableElement !== tableSelection[1]) {
+            // The update created a new DOM node, destroy the existing TableObserver
+            tableSelection[0].removeListeners();
+            tableSelections.delete(nodeKey);
+            initializeTableNode(tableNode, nodeKey, tableElement);
+          }
+        } else if (mutation === 'destroyed') {
+          if (tableSelection !== undefined) {
+            tableSelection[0].removeListeners();
+            tableSelections.delete(nodeKey);
+          }
+        }
+      }
+    }, {
+      editor
+    });
+  }, {
+    skipInitialization: false
+  });
+  return () => {
+    unregisterMutationListener();
+    // Hook might be called multiple times so cleaning up tables listeners as well,
+    // as it'll be reinitialized during recurring call
+    for (const [, [tableSelection]] of tableSelections) {
+      tableSelection.removeListeners();
+    }
+  };
+}
+
+/**
+ * Register the INSERT_TABLE_COMMAND listener and the table integrity transforms. The
+ * table selection observer should be registered separately after this with
+ * {@link registerTableSelectionObserver}.
+ *
+ * @param editor The editor
+ * @returns An unregister callback
+ */
+function registerTablePlugin(editor) {
+  if (!editor.hasNodes([TableNode])) {
+    {
+      throw Error(`TablePlugin: TableNode is not registered on editor`);
+    }
+  }
+  return utils.mergeRegister(editor.registerCommand(INSERT_TABLE_COMMAND, $insertTableCommandListener, lexical.COMMAND_PRIORITY_EDITOR), editor.registerNodeTransform(TableNode, $tableTransform), editor.registerNodeTransform(TableRowNode, $tableRowTransform), editor.registerNodeTransform(TableCellNode, $tableCellTransform));
+}
+
 exports.$computeTableMap = $computeTableMap;
 exports.$computeTableMapSkipCellCheck = $computeTableMapSkipCellCheck;
 exports.$createTableCellNode = $createTableCellNode;
@@ -3510,4 +3701,7 @@ exports.applyTableHandlers = applyTableHandlers;
 exports.getDOMCellFromTarget = getDOMCellFromTarget;
 exports.getTableElement = getTableElement;
 exports.getTableObserverFromTableElement = getTableObserverFromTableElement;
+exports.registerTableCellUnmergeTransform = registerTableCellUnmergeTransform;
+exports.registerTablePlugin = registerTablePlugin;
+exports.registerTableSelectionObserver = registerTableSelectionObserver;
 exports.setScrollableTablesActive = setScrollableTablesActive;

package/LexicalTable.dev.mjs

@@ -6,8 +6,8 @@
  *
  */
 
-import { addClassNamesToElement, $findMatchingParent, removeClassNamesFromElement, objectKlassEquals, isHTMLElement as isHTMLElement$1 } from '@lexical/utils';
-import { ElementNode, isHTMLElement, $createParagraphNode, $isElementNode, $isLineBreakNode, $isTextNode, $applyNodeReplacement, createCommand, $createTextNode, $getSelection, $isRangeSelection, $createPoint, $isParagraphNode, $normalizeSelection__EXPERIMENTAL, isCurrentlyReadOnlyMode, TEXT_TYPE_TO_FORMAT, $getNodeByKey, $getEditor, $setSelection, SELECTION_CHANGE_COMMAND, getDOMSelection, $createRangeSelection, $getRoot, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_CRITICAL, CUT_COMMAND, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, CONTROLLED_TEXT_INSERTION_COMMAND, KEY_TAB_COMMAND, FOCUS_COMMAND, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, $getPreviousSelection, $getNearestNodeFromDOMNode, $createRangeSelectionFromDom, INSERT_PARAGRAPH_COMMAND, $isRootOrShadowRoot, $isDecoratorNode, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, DELETE_WORD_COMMAND, DELETE_LINE_COMMAND, DELETE_CHARACTER_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, setDOMUnmanaged } from 'lexical';
+import { addClassNamesToElement, $descendantsMatching, $findMatchingParent, removeClassNamesFromElement, objectKlassEquals, isHTMLElement as isHTMLElement$1, $insertFirst as $insertFirst$1, mergeRegister, $insertNodeToNearestRoot, $unwrapAndFilterDescendants } from '@lexical/utils';
+import { ElementNode, isHTMLElement, $createParagraphNode, $isElementNode, $isLineBreakNode, $isTextNode, $applyNodeReplacement, createCommand, $createTextNode, $getSelection, $isRangeSelection, $createPoint, $isParagraphNode, $normalizeSelection__EXPERIMENTAL, isCurrentlyReadOnlyMode, TEXT_TYPE_TO_FORMAT, $getNodeByKey, $getEditor, $setSelection, SELECTION_CHANGE_COMMAND, getDOMSelection, $createRangeSelection, $getRoot, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_CRITICAL, CUT_COMMAND, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, CONTROLLED_TEXT_INSERTION_COMMAND, KEY_TAB_COMMAND, FOCUS_COMMAND, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, $getPreviousSelection, $getNearestNodeFromDOMNode, $createRangeSelectionFromDom, INSERT_PARAGRAPH_COMMAND, $isRootOrShadowRoot, $isDecoratorNode, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, DELETE_WORD_COMMAND, DELETE_LINE_COMMAND, DELETE_CHARACTER_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, setDOMUnmanaged, COMMAND_PRIORITY_EDITOR } from 'lexical';
 import { copyToClipboard, $getClipboardDataFromSelection } from '@lexical/clipboard';
 
 /**
@@ -263,7 +263,7 @@ function $convertTableCellNodeElement(domNode) {
     node: tableCellNode
   };
 }
-function $createTableCellNode(headerState, colSpan = 1, width) {
+function $createTableCellNode(headerState = TableCellHeaderStates.NO_STATUS, colSpan = 1, width) {
   return $applyNodeReplacement(new TableCellNode(headerState, colSpan, width));
 }
 function $isTableCellNode(node) {
@@ -280,28 +280,6 @@ function $isTableCellNode(node) {
 
 const INSERT_TABLE_COMMAND = createCommand('INSERT_TABLE_COMMAND');
 
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
-
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const documentMode = CAN_USE_DOM && 'documentMode' in document ? document.documentMode : null;
-const IS_FIREFOX = CAN_USE_DOM && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
-CAN_USE_DOM && 'InputEvent' in window && !documentMode ? 'getTargetRanges' in new window.InputEvent('input') : false;
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -384,6 +362,7 @@ function $convertTableRowElement(domNode) {
     height = parseFloat(domNode_.style.height);
   }
   return {
+    after: children => $descendantsMatching(children, $isTableCellNode),
     node: $createTableRowNode(height)
   };
 }
@@ -394,6 +373,28 @@ function $isTableRowNode(node) {
   return node instanceof TableRowNode;
 }
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const documentMode = CAN_USE_DOM && 'documentMode' in document ? document.documentMode : null;
+const IS_FIREFOX = CAN_USE_DOM && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
+CAN_USE_DOM && 'InputEvent' in window && !documentMode ? 'getTargetRanges' in new window.InputEvent('input') : false;
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -3456,6 +3457,7 @@ function $convertTableElement(domNode) {
     }
   }
   return {
+    after: children => $descendantsMatching(children, $isTableRowNode),
     node: tableNode
   };
 }
@@ -3466,4 +3468,193 @@ function $isTableNode(node) {
   return node instanceof TableNode;
 }
 
-export { $computeTableMap, $computeTableMapSkipCellCheck, $createTableCellNode, $createTableNode, $createTableNodeWithDimensions, $createTableRowNode, $createTableSelection, $deleteTableColumn, $deleteTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $findCellNode, $findTableNode, $getElementForTableNode, $getNodeTriplet, $getTableAndElementByKey, $getTableCellNodeFromLexicalNode, $getTableCellNodeRect, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $getTableRowNodeFromTableCellNodeOrThrow, $insertTableColumn, $insertTableColumn__EXPERIMENTAL, $insertTableRow, $insertTableRow__EXPERIMENTAL, $isScrollableTablesActive, $isTableCellNode, $isTableNode, $isTableRowNode, $isTableSelection, $removeTableRowAtIndex, $unmergeCell, INSERT_TABLE_COMMAND, TableCellHeaderStates, TableCellNode, TableNode, TableObserver, TableRowNode, applyTableHandlers, getDOMCellFromTarget, getTableElement, getTableObserverFromTableElement, setScrollableTablesActive };
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function $insertTableCommandListener({
+  rows,
+  columns,
+  includeHeaders
+}) {
+  const tableNode = $createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
+  $insertNodeToNearestRoot(tableNode);
+  const firstDescendant = tableNode.getFirstDescendant();
+  if ($isTextNode(firstDescendant)) {
+    firstDescendant.select();
+  }
+  return true;
+}
+function $tableCellTransform(node) {
+  if (!$isTableRowNode(node.getParent())) {
+    // TableCellNode must be a child of TableRowNode.
+    node.remove();
+  } else if (node.isEmpty()) {
+    // TableCellNode should never be empty
+    node.append($createParagraphNode());
+  }
+}
+function $tableRowTransform(node) {
+  if (!$isTableNode(node.getParent())) {
+    // TableRowNode must be a child of TableNode.
+    // TODO: Future support of tbody/thead/tfoot may change this
+    node.remove();
+  } else {
+    $unwrapAndFilterDescendants(node, $isTableCellNode);
+  }
+}
+function $tableTransform(node) {
+  // TableRowNode is the only valid child for TableNode
+  // TODO: Future support of tbody/thead/tfoot/caption may change this
+  $unwrapAndFilterDescendants(node, $isTableRowNode);
+  const [gridMap] = $computeTableMapSkipCellCheck(node, null, null);
+  const maxRowLength = gridMap.reduce((curLength, row) => {
+    return Math.max(curLength, row.length);
+  }, 0);
+  const rowNodes = node.getChildren();
+  for (let i = 0; i < gridMap.length; ++i) {
+    const rowNode = rowNodes[i];
+    if (!rowNode) {
+      continue;
+    }
+    if (!$isTableRowNode(rowNode)) {
+      throw Error(`TablePlugin: Expecting all children of TableNode to be TableRowNode, found ${rowNode.constructor.name} (type ${rowNode.getType()})`);
+    }
+    const rowLength = gridMap[i].reduce((acc, cell) => cell ? 1 + acc : acc, 0);
+    if (rowLength === maxRowLength) {
+      continue;
+    }
+    for (let j = rowLength; j < maxRowLength; ++j) {
+      // TODO: inherit header state from another header or body
+      const newCell = $createTableCellNode();
+      newCell.append($createParagraphNode());
+      rowNode.append(newCell);
+    }
+  }
+}
+
+/**
+ * Register a transform to ensure that all TableCellNode have a colSpan and rowSpan of 1.
+ * This should only be registered when you do not want to support merged cells.
+ *
+ * @param editor The editor
+ * @returns An unregister callback
+ */
+function registerTableCellUnmergeTransform(editor) {
+  return editor.registerNodeTransform(TableCellNode, node => {
+    if (node.getColSpan() > 1 || node.getRowSpan() > 1) {
+      // When we have rowSpan we have to map the entire Table to understand where the new Cells
+      // fit best; let's analyze all Cells at once to save us from further transform iterations
+      const [,, gridNode] = $getNodeTriplet(node);
+      const [gridMap] = $computeTableMap(gridNode, node, node);
+      // TODO this function expects Tables to be normalized. Look into this once it exists
+      const rowsCount = gridMap.length;
+      const columnsCount = gridMap[0].length;
+      let row = gridNode.getFirstChild();
+      if (!$isTableRowNode(row)) {
+        throw Error(`Expected TableNode first child to be a RowNode`);
+      }
+      const unmerged = [];
+      for (let i = 0; i < rowsCount; i++) {
+        if (i !== 0) {
+          row = row.getNextSibling();
+          if (!$isTableRowNode(row)) {
+            throw Error(`Expected TableNode first child to be a RowNode`);
+          }
+        }
+        let lastRowCell = null;
+        for (let j = 0; j < columnsCount; j++) {
+          const cellMap = gridMap[i][j];
+          const cell = cellMap.cell;
+          if (cellMap.startRow === i && cellMap.startColumn === j) {
+            lastRowCell = cell;
+            unmerged.push(cell);
+          } else if (cell.getColSpan() > 1 || cell.getRowSpan() > 1) {
+            if (!$isTableCellNode(cell)) {
+              throw Error(`Expected TableNode cell to be a TableCellNode`);
+            }
+            const newCell = $createTableCellNode(cell.__headerState);
+            if (lastRowCell !== null) {
+              lastRowCell.insertAfter(newCell);
+            } else {
+              $insertFirst$1(row, newCell);
+            }
+          }
+        }
+      }
+      for (const cell of unmerged) {
+        cell.setColSpan(1);
+        cell.setRowSpan(1);
+      }
+    }
+  });
+}
+function registerTableSelectionObserver(editor, hasTabHandler = true) {
+  const tableSelections = new Map();
+  const initializeTableNode = (tableNode, nodeKey, dom) => {
+    const tableElement = getTableElement(tableNode, dom);
+    const tableSelection = applyTableHandlers(tableNode, tableElement, editor, hasTabHandler);
+    tableSelections.set(nodeKey, [tableSelection, tableElement]);
+  };
+  const unregisterMutationListener = editor.registerMutationListener(TableNode, nodeMutations => {
+    editor.getEditorState().read(() => {
+      for (const [nodeKey, mutation] of nodeMutations) {
+        const tableSelection = tableSelections.get(nodeKey);
+        if (mutation === 'created' || mutation === 'updated') {
+          const {
+            tableNode,
+            tableElement
+          } = $getTableAndElementByKey(nodeKey);
+          if (tableSelection === undefined) {
+            initializeTableNode(tableNode, nodeKey, tableElement);
+          } else if (tableElement !== tableSelection[1]) {
+            // The update created a new DOM node, destroy the existing TableObserver
+            tableSelection[0].removeListeners();
+            tableSelections.delete(nodeKey);
+            initializeTableNode(tableNode, nodeKey, tableElement);
+          }
+        } else if (mutation === 'destroyed') {
+          if (tableSelection !== undefined) {
+            tableSelection[0].removeListeners();
+            tableSelections.delete(nodeKey);
+          }
+        }
+      }
+    }, {
+      editor
+    });
+  }, {
+    skipInitialization: false
+  });
+  return () => {
+    unregisterMutationListener();
+    // Hook might be called multiple times so cleaning up tables listeners as well,
+    // as it'll be reinitialized during recurring call
+    for (const [, [tableSelection]] of tableSelections) {
+      tableSelection.removeListeners();
+    }
+  };
+}
+
+/**
+ * Register the INSERT_TABLE_COMMAND listener and the table integrity transforms. The
+ * table selection observer should be registered separately after this with
+ * {@link registerTableSelectionObserver}.
+ *
+ * @param editor The editor
+ * @returns An unregister callback
+ */
+function registerTablePlugin(editor) {
+  if (!editor.hasNodes([TableNode])) {
+    {
+      throw Error(`TablePlugin: TableNode is not registered on editor`);
+    }
+  }
+  return mergeRegister(editor.registerCommand(INSERT_TABLE_COMMAND, $insertTableCommandListener, COMMAND_PRIORITY_EDITOR), editor.registerNodeTransform(TableNode, $tableTransform), editor.registerNodeTransform(TableRowNode, $tableRowTransform), editor.registerNodeTransform(TableCellNode, $tableCellTransform));
+}
+
+export { $computeTableMap, $computeTableMapSkipCellCheck, $createTableCellNode, $createTableNode, $createTableNodeWithDimensions, $createTableRowNode, $createTableSelection, $deleteTableColumn, $deleteTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $findCellNode, $findTableNode, $getElementForTableNode, $getNodeTriplet, $getTableAndElementByKey, $getTableCellNodeFromLexicalNode, $getTableCellNodeRect, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $getTableRowNodeFromTableCellNodeOrThrow, $insertTableColumn, $insertTableColumn__EXPERIMENTAL, $insertTableRow, $insertTableRow__EXPERIMENTAL, $isScrollableTablesActive, $isTableCellNode, $isTableNode, $isTableRowNode, $isTableSelection, $removeTableRowAtIndex, $unmergeCell, INSERT_TABLE_COMMAND, TableCellHeaderStates, TableCellNode, TableNode, TableObserver, TableRowNode, applyTableHandlers, getDOMCellFromTarget, getTableElement, getTableObserverFromTableElement, registerTableCellUnmergeTransform, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive };

package/LexicalTable.js.flow

@@ -75,7 +75,7 @@ declare export class TableCellNode extends ElementNode {
   canBeEmpty(): false;
 }
 declare export function $createTableCellNode(
-  headerState: TableCellHeaderState,
+  headerState?: TableCellHeaderState,
   colSpan?: number,
   width?: ?number,
 ): TableCellNode;
@@ -350,4 +350,14 @@ export type InsertTableCommandPayload = $ReadOnly<{
   includeHeaders?: InsertTableCommandPayloadHeaders;
 }>;
 
-declare export var INSERT_TABLE_COMMAND: LexicalCommand<InsertTableCommandPayload>;
+declare export var INSERT_TABLE_COMMAND: LexicalCommand<InsertTableCommandPayload>;
+
+/**
+ * LexicalTablePluginHelpers
+ */
+
+declare export function registerTableCellUnmergeTransform(editor: LexicalEditor): () => void;
+
+declare export function registerTablePlugin(editor: LexicalEditor): () => void;
+
+declare export function registerTableSelectionObserver(editor: LexicalEditor, hasTabHandler?: boolean): () => void;

package/LexicalTable.mjs

@@ -51,4 +51,7 @@ export const applyTableHandlers = mod.applyTableHandlers;
 export const getDOMCellFromTarget = mod.getDOMCellFromTarget;
 export const getTableElement = mod.getTableElement;
 export const getTableObserverFromTableElement = mod.getTableObserverFromTableElement;
+export const registerTableCellUnmergeTransform = mod.registerTableCellUnmergeTransform;
+export const registerTablePlugin = mod.registerTablePlugin;
+export const registerTableSelectionObserver = mod.registerTableSelectionObserver;
 export const setScrollableTablesActive = mod.setScrollableTablesActive;

package/LexicalTable.node.mjs

@@ -49,4 +49,7 @@ export const applyTableHandlers = mod.applyTableHandlers;
 export const getDOMCellFromTarget = mod.getDOMCellFromTarget;
 export const getTableElement = mod.getTableElement;
 export const getTableObserverFromTableElement = mod.getTableObserverFromTableElement;
+export const registerTableCellUnmergeTransform = mod.registerTableCellUnmergeTransform;
+export const registerTablePlugin = mod.registerTablePlugin;
+export const registerTableSelectionObserver = mod.registerTableSelectionObserver;
 export const setScrollableTablesActive = mod.setScrollableTablesActive;