@lexical/table 0.8.1 → 0.9.1

package/LexicalTable.dev.js

@@ -22,18 +22,22 @@ const TableCellHeaderStates = {
   NO_STATUS: 0,
   ROW: 1
 };
+
 /** @noInheritDoc */
 class TableCellNode extends lexical.DEPRECATED_GridCellNode {
   /** @internal */
 
   /** @internal */
-
   static getType() {
     return 'tablecell';
   }
+
   static clone(node) {
-    return new TableCellNode(node.__headerState, node.__colSpan, node.__width, node.__key);
+    const tableNode = new TableCellNode(node.__headerState, node.__colSpan, node.__width, node.__key);
+    tableNode.__rowSpan = node.__rowSpan;
+    return tableNode;
   }
+
   static importDOM() {
     return {
       td: node => ({
@@ -46,113 +50,162 @@ class TableCellNode extends lexical.DEPRECATED_GridCellNode {
       })
     };
   }
+
   static importJSON(serializedNode) {
     return $createTableCellNode(serializedNode.headerState, serializedNode.colSpan, serializedNode.width || undefined);
   }
+
   constructor(headerState = TableCellHeaderStates.NO_STATUS, colSpan = 1, width, key) {
     super(colSpan, key);
     this.__headerState = headerState;
     this.__width = width;
   }
+
   createDOM(config) {
     const element = document.createElement(this.getTag());
+
     if (this.__width) {
       element.style.width = `${this.__width}px`;
     }
+
+    if (this.__colSpan !== 1) {
+      element.colSpan = this.__colSpan;
+    }
+
+    if (this.__rowSpan !== 1) {
+      element.rowSpan = this.__rowSpan;
+    }
+
     utils.addClassNamesToElement(element, config.theme.tableCell, this.hasHeader() && config.theme.tableCellHeader);
     return element;
   }
+
   exportDOM(editor) {
     const {
       element
     } = super.exportDOM(editor);
+
     if (element) {
+      const element_ = element;
       const maxWidth = 700;
       const colCount = this.getParentOrThrow().getChildrenSize();
-      element.style.border = '1px solid black';
-      element.style.width = `${this.getWidth() || Math.max(90, maxWidth / colCount)}px`;
-      element.style.verticalAlign = 'top';
-      element.style.textAlign = 'start';
+      element_.style.border = '1px solid black';
+
+      if (this.__colSpan !== 1) {
+        element_.colSpan = this.__colSpan;
+      }
+
+      if (this.__rowSpan !== 1) {
+        element_.rowSpan = this.__rowSpan;
+      }
+
+      element_.style.width = `${this.getWidth() || Math.max(90, maxWidth / colCount)}px`;
+      element_.style.verticalAlign = 'top';
+      element_.style.textAlign = 'start';
+
       if (this.hasHeader()) {
-        element.style.backgroundColor = '#f2f3f5';
+        element_.style.backgroundColor = '#f2f3f5';
       }
     }
+
     return {
       element
     };
   }
+
   exportJSON() {
-    return {
-      ...super.exportJSON(),
+    return { ...super.exportJSON(),
       colSpan: super.__colSpan,
       headerState: this.__headerState,
       type: 'tablecell',
       width: this.getWidth()
     };
   }
+
   getTag() {
     return this.hasHeader() ? 'th' : 'td';
   }
+
   setHeaderStyles(headerState) {
     const self = this.getWritable();
     self.__headerState = headerState;
     return this.__headerState;
   }
+
   getHeaderStyles() {
     return this.getLatest().__headerState;
   }
+
   setWidth(width) {
     const self = this.getWritable();
     self.__width = width;
     return this.__width;
   }
+
   getWidth() {
     return this.getLatest().__width;
   }
+
   toggleHeaderStyle(headerStateToToggle) {
     const self = this.getWritable();
+
     if ((self.__headerState & headerStateToToggle) === headerStateToToggle) {
       self.__headerState -= headerStateToToggle;
     } else {
       self.__headerState += headerStateToToggle;
     }
+
     return self;
   }
+
   hasHeaderState(headerState) {
     return (this.getHeaderStyles() & headerState) === headerState;
   }
+
   hasHeader() {
     return this.getLatest().__headerState !== TableCellHeaderStates.NO_STATUS;
   }
+
   updateDOM(prevNode) {
-    return prevNode.__headerState !== this.__headerState || prevNode.__width !== this.__width;
+    return prevNode.__headerState !== this.__headerState || prevNode.__width !== this.__width || prevNode.__colSpan !== this.__colSpan || prevNode.__rowSpan !== this.__rowSpan;
   }
+
   isShadowRoot() {
     return true;
   }
+
   collapseAtStart() {
     return true;
   }
+
   canBeEmpty() {
     return false;
   }
+
   canIndent() {
     return false;
   }
+
 }
 function convertTableCellNodeElement(domNode) {
+  const domNode_ = domNode;
   const nodeName = domNode.nodeName.toLowerCase();
   const tableCellNode = $createTableCellNode(nodeName === 'th' ? TableCellHeaderStates.ROW : TableCellHeaderStates.NO_STATUS);
+  tableCellNode.__colSpan = domNode_.colSpan;
+  tableCellNode.__rowSpan = domNode_.rowSpan;
   return {
     forChild: (lexicalNode, parentLexicalNode) => {
       if ($isTableCellNode(parentLexicalNode) && !lexical.$isElementNode(lexicalNode)) {
         const paragraphNode = lexical.$createParagraphNode();
+
         if (lexical.$isLineBreakNode(lexicalNode) && lexicalNode.getTextContent() === '\n') {
           return null;
         }
+
         paragraphNode.append(lexicalNode);
         return paragraphNode;
       }
+
       return lexicalNode;
     },
     node: tableCellNode
@@ -172,16 +225,18 @@ function $isTableCellNode(node) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 /** @noInheritDoc */
 class TableRowNode extends lexical.DEPRECATED_GridRowNode {
   /** @internal */
-
   static getType() {
     return 'tablerow';
   }
+
   static clone(node) {
     return new TableRowNode(node.__height, node.__key);
   }
+
   static importDOM() {
     return {
       tr: node => ({
@@ -190,48 +245,60 @@ class TableRowNode extends lexical.DEPRECATED_GridRowNode {
       })
     };
   }
+
   static importJSON(serializedNode) {
     return $createTableRowNode(serializedNode.height);
   }
+
   constructor(height, key) {
     super(key);
     this.__height = height;
   }
+
   exportJSON() {
-    return {
-      ...super.exportJSON(),
+    return { ...super.exportJSON(),
       type: 'tablerow',
       version: 1
     };
   }
+
   createDOM(config) {
     const element = document.createElement('tr');
+
     if (this.__height) {
       element.style.height = `${this.__height}px`;
     }
+
     utils.addClassNamesToElement(element, config.theme.tableRow);
     return element;
   }
+
   isShadowRoot() {
     return true;
   }
+
   setHeight(height) {
     const self = this.getWritable();
     self.__height = height;
     return this.__height;
   }
+
   getHeight() {
     return this.getLatest().__height;
   }
+
   updateDOM(prevNode) {
     return prevNode.__height !== this.__height;
   }
+
   canBeEmpty() {
     return false;
   }
+
   canIndent() {
     return false;
   }
+
 }
 function convertTableRowElement(domNode) {
   return {
@@ -252,7 +319,6 @@ function $isTableRowNode(node) {
  * 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';
 
 /**
@@ -262,7 +328,9 @@ const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !==
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 const getDOMSelection = targetWindow => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
+
 class TableSelection {
   constructor(editor, tableNodeKey) {
     this.isHighlightingCells = false;
@@ -286,40 +354,51 @@ class TableSelection {
     this.hasHijackedSelectionStyles = false;
     this.trackTableGrid();
   }
+
   getGrid() {
     return this.grid;
   }
+
   removeListeners() {
     Array.from(this.listenersToRemove).forEach(removeListener => removeListener());
   }
+
   trackTableGrid() {
     const observer = new MutationObserver(records => {
       this.editor.update(() => {
         let gridNeedsRedraw = false;
+
         for (let i = 0; i < records.length; i++) {
           const record = records[i];
           const target = record.target;
           const nodeName = target.nodeName;
+
           if (nodeName === 'TABLE' || nodeName === 'TR') {
             gridNeedsRedraw = true;
             break;
           }
         }
+
         if (!gridNeedsRedraw) {
           return;
         }
+
         const tableElement = this.editor.getElementByKey(this.tableNodeKey);
+
         if (!tableElement) {
           throw new Error('Expected to find TableElement in DOM');
         }
+
         this.grid = getTableGrid(tableElement);
       });
     });
     this.editor.update(() => {
       const tableElement = this.editor.getElementByKey(this.tableNodeKey);
+
       if (!tableElement) {
         throw new Error('Expected to find TableElement in DOM');
       }
+
       this.grid = getTableGrid(tableElement);
       observer.observe(tableElement, {
         childList: true,
@@ -327,6 +406,7 @@ class TableSelection {
       });
     });
   }
+
   clearHighlight() {
     this.isHighlightingCells = false;
     this.anchorX = -1;
@@ -342,39 +422,50 @@ class TableSelection {
     this.enableHighlightStyle();
     this.editor.update(() => {
       const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
+
       if (!$isTableNode(tableNode)) {
         throw new Error('Expected TableNode.');
       }
+
       const tableElement = this.editor.getElementByKey(this.tableNodeKey);
+
       if (!tableElement) {
         throw new Error('Expected to find TableElement in DOM');
       }
+
       const grid = getTableGrid(tableElement);
       $updateDOMForSelection(grid, null);
       lexical.$setSelection(null);
       this.editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
     });
   }
+
   enableHighlightStyle() {
     this.editor.update(() => {
       const tableElement = this.editor.getElementByKey(this.tableNodeKey);
+
       if (!tableElement) {
         throw new Error('Expected to find TableElement in DOM');
       }
+
       tableElement.classList.remove('disable-selection');
       this.hasHijackedSelectionStyles = false;
     });
   }
+
   disableHighlightStyle() {
     this.editor.update(() => {
       const tableElement = this.editor.getElementByKey(this.tableNodeKey);
+
       if (!tableElement) {
         throw new Error('Expected to find TableElement in DOM');
       }
+
       tableElement.classList.add('disable-selection');
       this.hasHijackedSelectionStyles = true;
     });
   }
+
   updateTableGridSelection(selection) {
     if (selection != null && selection.gridKey === this.tableNodeKey) {
       this.gridSelection = selection;
@@ -385,36 +476,46 @@ class TableSelection {
       this.clearHighlight();
     }
   }
+
   setFocusCellForSelection(cell, ignoreStart = false) {
     this.editor.update(() => {
       const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
+
       if (!$isTableNode(tableNode)) {
         throw new Error('Expected TableNode.');
       }
+
       const tableElement = this.editor.getElementByKey(this.tableNodeKey);
+
       if (!tableElement) {
         throw new Error('Expected to find TableElement in DOM');
       }
+
       const cellX = cell.x;
       const cellY = cell.y;
       this.focusCell = cell;
+
       if (this.anchorCell !== null) {
-        const domSelection = getDOMSelection(this.editor._window);
-        // Collapse the selection
+        const domSelection = getDOMSelection(this.editor._window); // Collapse the selection
+
         if (domSelection) {
           domSelection.setBaseAndExtent(this.anchorCell.elem, 0, this.focusCell.elem, 0);
         }
       }
+
       if (!this.isHighlightingCells && (this.anchorX !== cellX || this.anchorY !== cellY || ignoreStart)) {
         this.isHighlightingCells = true;
         this.disableHighlightStyle();
       } else if (cellX === this.focusX && cellY === this.focusY) {
         return;
       }
+
       this.focusX = cellX;
       this.focusY = cellY;
+
       if (this.isHighlightingCells) {
         const focusTableCellNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
+
         if (this.gridSelection != null && this.anchorCellNodeKey != null && $isTableCellNode(focusTableCellNode)) {
           const focusNodeKey = focusTableCellNode.getKey();
           this.gridSelection = this.gridSelection.clone() || lexical.DEPRECATED_$createGridSelection();
@@ -427,6 +528,7 @@ class TableSelection {
       }
     });
   }
+
   setAnchorCellForSelection(cell) {
     this.isHighlightingCells = false;
     this.anchorCell = cell;
@@ -434,6 +536,7 @@ class TableSelection {
     this.anchorY = cell.y;
     this.editor.update(() => {
       const anchorTableCellNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
+
       if ($isTableCellNode(anchorTableCellNode)) {
         const anchorNodeKey = anchorTableCellNode.getKey();
         this.gridSelection = lexical.DEPRECATED_$createGridSelection();
@@ -441,14 +544,17 @@ class TableSelection {
       }
     });
   }
+
   formatCells(type) {
     this.editor.update(() => {
       const selection = lexical.$getSelection();
+
       if (!lexical.DEPRECATED_$isGridSelection(selection)) {
         {
           throw Error(`Expected grid selection`);
         }
       }
+
       const formatSelection = lexical.$createRangeSelection();
       const anchor = formatSelection.anchor;
       const focus = formatSelection.focus;
@@ -463,27 +569,34 @@ class TableSelection {
       this.editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
     });
   }
+
   clearText() {
     this.editor.update(() => {
       const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
+
       if (!$isTableNode(tableNode)) {
         throw new Error('Expected TableNode.');
       }
+
       const selection = lexical.$getSelection();
+
       if (!lexical.DEPRECATED_$isGridSelection(selection)) {
         {
           throw Error(`Expected grid selection`);
         }
       }
+
       const selectedNodes = selection.getNodes().filter($isTableCellNode);
+
       if (selectedNodes.length === this.grid.columns * this.grid.rows) {
-        tableNode.selectPrevious();
-        // Delete entire table
+        tableNode.selectPrevious(); // Delete entire table
+
         tableNode.remove();
         const rootNode = lexical.$getRoot();
         rootNode.selectStart();
         return;
       }
+
       selectedNodes.forEach(cellNode => {
         if (lexical.$isElementNode(cellNode)) {
           const paragraphNode = lexical.$createParagraphNode();
@@ -502,6 +615,7 @@ class TableSelection {
       this.editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
     });
   }
+
 }
 
 /**
@@ -514,15 +628,18 @@ class TableSelection {
 const LEXICAL_ELEMENT_KEY = '__lexicalTableSelection';
 function applyTableHandlers(tableNode, tableElement, editor) {
   const rootElement = editor.getRootElement();
+
   if (rootElement === null) {
     throw new Error('No root element.');
   }
+
   const tableSelection = new TableSelection(editor, tableNode.getKey());
   attachTableSelectionToTableElement(tableElement, tableSelection);
   let isMouseDown = false;
   let isRangeSelectionHijacked = false;
   tableElement.addEventListener('dblclick', event => {
     const cell = getCellFromTarget(event.target);
+
     if (cell !== null) {
       event.preventDefault();
       event.stopImmediatePropagation();
@@ -531,15 +648,16 @@ function applyTableHandlers(tableNode, tableElement, editor) {
       tableSelection.setFocusCellForSelection(cell, true);
       isMouseDown = false;
     }
-  });
+  }); // This is the anchor of the selection.
 
-  // This is the anchor of the selection.
   tableElement.addEventListener('mousedown', event => {
     setTimeout(() => {
       if (event.button !== 0) {
         return;
       }
+
       const cell = getCellFromTarget(event.target);
+
       if (cell !== null) {
         event.preventDefault();
         event.stopPropagation();
@@ -547,268 +665,335 @@ function applyTableHandlers(tableNode, tableElement, editor) {
         tableSelection.setAnchorCellForSelection(cell);
       }
     }, 0);
-  });
+  }); // This is adjusting the focus of the selection.
 
-  // This is adjusting the focus of the selection.
   tableElement.addEventListener('mousemove', event => {
     if (isRangeSelectionHijacked) {
       event.preventDefault();
       event.stopPropagation();
       event.stopImmediatePropagation();
     }
+
     if (isMouseDown) {
       const cell = getCellFromTarget(event.target);
+
       if (cell !== null) {
         const cellX = cell.x;
         const cellY = cell.y;
+
         if (isMouseDown && (tableSelection.anchorX !== cellX || tableSelection.anchorY !== cellY || tableSelection.isHighlightingCells)) {
           event.preventDefault();
           tableSelection.setFocusCellForSelection(cell);
         }
       }
     }
-  });
+  }); // Select entire table at this point, when grid selection is ready.
 
-  // Select entire table at this point, when grid selection is ready.
   tableElement.addEventListener('mouseleave', () => {
     if (isMouseDown) {
       return;
     }
-  });
+  }); // Clear selection when clicking outside of dom.
 
-  // Clear selection when clicking outside of dom.
   const mouseDownCallback = event => {
-    isMouseDown = true;
     if (event.button !== 0) {
       return;
     }
+
     editor.update(() => {
       const selection = lexical.$getSelection();
-      if (lexical.DEPRECATED_$isGridSelection(selection) && selection.gridKey === tableSelection.tableNodeKey && rootElement.contains(event.target)) {
-        return tableSelection.clearHighlight();
+      const target = event.target;
+
+      if (target instanceof Node) {
+        if (lexical.DEPRECATED_$isGridSelection(selection) && selection.gridKey === tableSelection.tableNodeKey && rootElement.contains(target)) {
+          return tableSelection.clearHighlight();
+        } // TODO Revise this logic; the UX selection boundaries and nested editors
+
+
+        const node = lexical.$getNearestNodeFromDOMNode(target);
+
+        if (node !== null && utils.$findMatchingParent(node, lexical.DEPRECATED_$isGridNode)) {
+          isMouseDown = true;
+        }
       }
     });
   };
+
   window.addEventListener('mousedown', mouseDownCallback);
   tableSelection.listenersToRemove.add(() => window.removeEventListener('mousedown', mouseDownCallback));
+
   const mouseUpCallback = event => {
     if (isMouseDown) {
       event.preventDefault();
       event.stopPropagation();
     }
+
     isMouseDown = false;
   };
+
   window.addEventListener('mouseup', mouseUpCallback);
   tableSelection.listenersToRemove.add(() => window.removeEventListener('mouseup', mouseUpCallback));
-  tableSelection.listenersToRemove.add(() => tableElement.addEventListener('mouseup', mouseUpCallback));
+  tableElement.addEventListener('mouseup', mouseUpCallback);
   tableSelection.listenersToRemove.add(() => tableElement.removeEventListener('mouseup', mouseUpCallback));
   tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, event => {
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     const direction = 'down';
+
     if (lexical.$isRangeSelection(selection)) {
       if (selection.isCollapsed()) {
         const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
         if (!$isTableCellNode(tableCellNode)) {
           return false;
         }
+
         const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
         const elementParentNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
+
         if (elementParentNode == null) {
           throw new Error('Expected BlockNode Parent');
         }
+
         const lastChild = tableCellNode.getLastChild();
         const isSelectionInLastBlock = lastChild && elementParentNode.isParentOf(lastChild) || elementParentNode === lastChild;
+
         if (isSelectionInLastBlock || event.shiftKey) {
           event.preventDefault();
           event.stopImmediatePropagation();
-          event.stopPropagation();
+          event.stopPropagation(); // Start Selection
 
-          // Start Selection
           if (event.shiftKey) {
             tableSelection.setAnchorCellForSelection(tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid));
             return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
           }
+
           return selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
         }
       }
     } else if (lexical.DEPRECATED_$isGridSelection(selection) && event.shiftKey) {
       const tableCellNode = selection.focus.getNode();
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+
       const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
       event.preventDefault();
       event.stopImmediatePropagation();
       event.stopPropagation();
       return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
     }
+
     return false;
   }, lexical.COMMAND_PRIORITY_HIGH));
   tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, event => {
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     const direction = 'up';
+
     if (lexical.$isRangeSelection(selection)) {
       if (selection.isCollapsed()) {
         const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
         if (!$isTableCellNode(tableCellNode)) {
           return false;
         }
+
         const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
         const elementParentNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
+
         if (elementParentNode == null) {
           throw new Error('Expected BlockNode Parent');
         }
+
         const lastChild = tableCellNode.getLastChild();
         const isSelectionInLastBlock = lastChild && elementParentNode.isParentOf(lastChild) || elementParentNode === lastChild;
+
         if (isSelectionInLastBlock || event.shiftKey) {
           event.preventDefault();
           event.stopImmediatePropagation();
-          event.stopPropagation();
+          event.stopPropagation(); // Start Selection
 
-          // Start Selection
           if (event.shiftKey) {
             tableSelection.setAnchorCellForSelection(tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid));
             return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
           }
+
           return selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
         }
       }
     } else if (lexical.DEPRECATED_$isGridSelection(selection) && event.shiftKey) {
       const tableCellNode = selection.focus.getNode();
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+
       const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
       event.preventDefault();
       event.stopImmediatePropagation();
       event.stopPropagation();
       return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
     }
+
     return false;
   }, lexical.COMMAND_PRIORITY_HIGH));
   tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_LEFT_COMMAND, event => {
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     const direction = 'backward';
+
     if (lexical.$isRangeSelection(selection)) {
       if (selection.isCollapsed()) {
         const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
         if (!$isTableCellNode(tableCellNode)) {
           return false;
         }
+
         const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
         const elementParentNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
+
         if (elementParentNode == null) {
           throw new Error('Expected BlockNode Parent');
         }
+
         if (selection.anchor.offset === 0 || event.shiftKey) {
           event.preventDefault();
           event.stopImmediatePropagation();
-          event.stopPropagation();
+          event.stopPropagation(); // Start Selection
 
-          // Start Selection
           if (event.shiftKey) {
             tableSelection.setAnchorCellForSelection(tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid));
             return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
           }
+
           return selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
         }
       }
     } else if (lexical.DEPRECATED_$isGridSelection(selection) && event.shiftKey) {
       const tableCellNode = selection.focus.getNode();
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+
       const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
       event.preventDefault();
       event.stopImmediatePropagation();
       event.stopPropagation();
       return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
     }
+
     return false;
   }, lexical.COMMAND_PRIORITY_HIGH));
   tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_RIGHT_COMMAND, event => {
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     const direction = 'forward';
+
     if (lexical.$isRangeSelection(selection)) {
       if (selection.isCollapsed()) {
         const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
         if (!$isTableCellNode(tableCellNode)) {
           return false;
         }
+
         const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
         const elementParentNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
+
         if (elementParentNode == null) {
           throw new Error('Expected BlockNode Parent');
         }
+
         if (selection.anchor.offset === selection.anchor.getNode().getTextContentSize() || event.shiftKey) {
           event.preventDefault();
           event.stopImmediatePropagation();
-          event.stopPropagation();
+          event.stopPropagation(); // Start Selection
 
-          // Start Selection
           if (event.shiftKey) {
             tableSelection.setAnchorCellForSelection(tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid));
             return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
           }
+
           return selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
         }
       }
     } else if (lexical.DEPRECATED_$isGridSelection(selection) && event.shiftKey) {
       const tableCellNode = selection.focus.getNode();
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+
       const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
       event.preventDefault();
       event.stopImmediatePropagation();
       event.stopPropagation();
       return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
     }
+
     return false;
   }, lexical.COMMAND_PRIORITY_HIGH));
+
   const deleteTextHandler = command => () => {
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     if (lexical.DEPRECATED_$isGridSelection(selection)) {
       tableSelection.clearText();
       return true;
     } else if (lexical.$isRangeSelection(selection)) {
       const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+
       const anchorNode = selection.anchor.getNode();
       const focusNode = selection.focus.getNode();
       const isAnchorInside = tableNode.isParentOf(anchorNode);
       const isFocusInside = tableNode.isParentOf(focusNode);
       const selectionContainsPartialTable = isAnchorInside && !isFocusInside || isFocusInside && !isAnchorInside;
+
       if (selectionContainsPartialTable) {
         tableSelection.clearText();
         return true;
       }
+
       const nearestElementNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
       const topLevelCellElementNode = nearestElementNode && utils.$findMatchingParent(nearestElementNode, n => lexical.$isElementNode(n) && $isTableCellNode(n.getParent()));
+
       if (!lexical.$isElementNode(topLevelCellElementNode) || !lexical.$isElementNode(nearestElementNode)) {
         return false;
       }
+
       if (command === lexical.DELETE_LINE_COMMAND && topLevelCellElementNode.getPreviousSibling() === null) {
         // TODO: Fix Delete Line in Table Cells.
         return true;
       }
+
       if (command === lexical.DELETE_CHARACTER_COMMAND || command === lexical.DELETE_WORD_COMMAND) {
         if (selection.isCollapsed() && selection.anchor.offset === 0) {
           if (nearestElementNode !== topLevelCellElementNode) {
@@ -822,16 +1007,21 @@ function applyTableHandlers(tableNode, tableElement, editor) {
         }
       }
     }
+
     return false;
   };
+
   [lexical.DELETE_WORD_COMMAND, lexical.DELETE_LINE_COMMAND, lexical.DELETE_CHARACTER_COMMAND].forEach(command => {
     tableSelection.listenersToRemove.add(editor.registerCommand(command, deleteTextHandler(command), lexical.COMMAND_PRIORITY_CRITICAL));
   });
+
   const deleteCellHandler = event => {
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     if (lexical.DEPRECATED_$isGridSelection(selection)) {
       event.preventDefault();
       event.stopPropagation();
@@ -839,56 +1029,71 @@ function applyTableHandlers(tableNode, tableElement, editor) {
       return true;
     } else if (lexical.$isRangeSelection(selection)) {
       const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
     }
+
     return false;
   };
+
   tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_BACKSPACE_COMMAND, deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
   tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_DELETE_COMMAND, deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
   tableSelection.listenersToRemove.add(editor.registerCommand(lexical.FORMAT_TEXT_COMMAND, payload => {
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     if (lexical.DEPRECATED_$isGridSelection(selection)) {
       tableSelection.formatCells(payload);
       return true;
     } else if (lexical.$isRangeSelection(selection)) {
       const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
     }
+
     return false;
   }, lexical.COMMAND_PRIORITY_CRITICAL));
   tableSelection.listenersToRemove.add(editor.registerCommand(lexical.CONTROLLED_TEXT_INSERTION_COMMAND, payload => {
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     if (lexical.DEPRECATED_$isGridSelection(selection)) {
       tableSelection.clearHighlight();
       return false;
     } else if (lexical.$isRangeSelection(selection)) {
       const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
     }
+
     return false;
   }, lexical.COMMAND_PRIORITY_CRITICAL));
   tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_TAB_COMMAND, event => {
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     if (lexical.$isRangeSelection(selection)) {
       const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+
       if (selection.isCollapsed()) {
         const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
         event.preventDefault();
@@ -896,6 +1101,7 @@ function applyTableHandlers(tableNode, tableElement, editor) {
         return true;
       }
     }
+
     return false;
   }, lexical.COMMAND_PRIORITY_HIGH));
   tableSelection.listenersToRemove.add(editor.registerCommand(lexical.FOCUS_COMMAND, payload => {
@@ -904,6 +1110,7 @@ function applyTableHandlers(tableNode, tableElement, editor) {
   tableSelection.listenersToRemove.add(editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, payload => {
     const selection = lexical.$getSelection();
     const prevSelection = lexical.$getPreviousSelection();
+
     if (selection && lexical.$isRangeSelection(selection) && !selection.isCollapsed()) {
       const anchorNode = selection.anchor.getNode();
       const focusNode = selection.focus.getNode();
@@ -911,6 +1118,7 @@ function applyTableHandlers(tableNode, tableElement, editor) {
       const isFocusInside = tableNode.isParentOf(focusNode);
       const selectionContainsPartialTable = isAnchorInside && !isFocusInside || isFocusInside && !isAnchorInside;
       const selectionIsInsideTable = isAnchorInside && isFocusInside && !tableNode.isSelected();
+
       if (selectionContainsPartialTable) {
         const isBackward = selection.isBackward();
         const modifiedSelection = lexical.$createRangeSelection();
@@ -925,11 +1133,13 @@ function applyTableHandlers(tableNode, tableElement, editor) {
         const {
           grid
         } = tableSelection;
+
         if (selection.getNodes().filter($isTableCellNode).length === grid.rows * grid.columns) {
           const gridSelection = lexical.DEPRECATED_$createGridSelection();
           const tableKey = tableNode.getKey();
           const firstCell = tableNode.getFirstChildOrThrow().getFirstChild();
           const lastCell = tableNode.getLastChildOrThrow().getLastChild();
+
           if (firstCell != null && lastCell != null) {
             gridSelection.set(tableKey, firstCell.getKey(), lastCell.getKey());
             lexical.$setSelection(gridSelection);
@@ -939,20 +1149,24 @@ function applyTableHandlers(tableNode, tableElement, editor) {
         }
       }
     }
+
     if (selection && !selection.is(prevSelection) && (lexical.DEPRECATED_$isGridSelection(selection) || lexical.DEPRECATED_$isGridSelection(prevSelection)) && tableSelection.gridSelection && !tableSelection.gridSelection.is(prevSelection)) {
       if (lexical.DEPRECATED_$isGridSelection(selection) && selection.gridKey === tableSelection.tableNodeKey) {
         tableSelection.updateTableGridSelection(selection);
       } else if (!lexical.DEPRECATED_$isGridSelection(selection) && lexical.DEPRECATED_$isGridSelection(prevSelection) && prevSelection.gridKey === tableSelection.tableNodeKey) {
         tableSelection.updateTableGridSelection(null);
       }
+
       return false;
     }
+
     if (tableSelection.hasHijackedSelectionStyles && !tableNode.isSelected()) {
       $removeHighlightStyleToTable(tableSelection);
       isRangeSelectionHijacked = false;
     } else if (!tableSelection.hasHijackedSelectionStyles && tableNode.isSelected()) {
       $addHighlightStyleToTable(tableSelection);
     }
+
     return false;
   }, lexical.COMMAND_PRIORITY_CRITICAL));
   return tableSelection;
@@ -965,18 +1179,24 @@ function getTableSelectionFromTableElement(tableElement) {
 }
 function getCellFromTarget(node) {
   let currentNode = node;
+
   while (currentNode != null) {
     const nodeName = currentNode.nodeName;
+
     if (nodeName === 'TD' || nodeName === 'TH') {
       // @ts-expect-error: internal field
       const cell = currentNode._cell;
+
       if (cell === undefined) {
         return null;
       }
+
       return cell;
     }
+
     currentNode = currentNode.parentNode;
   }
+
   return null;
 }
 function getTableGrid(tableElement) {
@@ -990,8 +1210,10 @@ function getTableGrid(tableElement) {
   let x = 0;
   let y = 0;
   cells.length = 0;
+
   while (currentNode != null) {
     const nodeMame = currentNode.nodeName;
+
     if (nodeMame === 'TD' || nodeMame === 'TH') {
       const elem = currentNode;
       const cell = {
@@ -999,38 +1221,47 @@ function getTableGrid(tableElement) {
         highlighted: false,
         x,
         y
-      };
+      }; // @ts-expect-error: internal field
 
-      // @ts-expect-error: internal field
       currentNode._cell = cell;
+
       if (cells[y] === undefined) {
         cells[y] = [];
       }
+
       cells[y][x] = cell;
     } else {
       const child = currentNode.firstChild;
+
       if (child != null) {
         currentNode = child;
         continue;
       }
     }
+
     const sibling = currentNode.nextSibling;
+
     if (sibling != null) {
       x++;
       currentNode = sibling;
       continue;
     }
+
     const parent = currentNode.parentNode;
+
     if (parent != null) {
       const parentSibling = parent.nextSibling;
+
       if (parentSibling == null) {
         break;
       }
+
       y++;
       x = 0;
       currentNode = parentSibling;
     }
   }
+
   grid.columns = x + 1;
   grid.rows = y + 1;
   return grid;
@@ -1040,6 +1271,7 @@ function $updateDOMForSelection(grid, selection) {
   const selectedCellNodes = new Set(selection ? selection.getNodes() : []);
   $forEachGridCell(grid, (cell, lexicalNode) => {
     const elem = cell.elem;
+
     if (selectedCellNodes.has(lexicalNode)) {
       cell.highlighted = true;
       elem.style.setProperty('background-color', 'rgb(172, 206, 247)');
@@ -1049,6 +1281,7 @@ function $updateDOMForSelection(grid, selection) {
       cell.highlighted = false;
       elem.style.removeProperty('background-color');
       elem.style.removeProperty('caret-color');
+
       if (!elem.getAttribute('style')) {
         elem.removeAttribute('style');
       }
@@ -1060,11 +1293,14 @@ function $forEachGridCell(grid, cb) {
   const {
     cells
   } = grid;
+
   for (let y = 0; y < cells.length; y++) {
     const row = cells[y];
+
     for (let x = 0; x < row.length; x++) {
       const cell = row[x];
       const lexicalNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
+
       if (lexicalNode !== null) {
         cb(cell, lexicalNode, {
           x,
@@ -1090,13 +1326,16 @@ function $removeHighlightStyleToTable(tableSelection) {
     cell.highlighted = false;
     elem.style.removeProperty('background-color');
     elem.style.removeProperty('caret-color');
+
     if (!elem.getAttribute('style')) {
       elem.removeAttribute('style');
     }
   });
 }
+
 const selectGridNodeInDirection = (tableSelection, tableNode, x, y, direction) => {
   const isForward = direction === 'forward';
+
   switch (direction) {
     case 'backward':
     case 'forward':
@@ -1111,34 +1350,44 @@ const selectGridNodeInDirection = (tableSelection, tableNode, x, y, direction) =
           tableNode.selectNext();
         }
       }
+
       return true;
+
     case 'up':
       if (y !== 0) {
         selectTableCellNode(tableNode.getCellNodeFromCordsOrThrow(x, y - 1, tableSelection.grid));
       } else {
         tableNode.selectPrevious();
       }
+
       return true;
+
     case 'down':
       if (y !== tableSelection.grid.rows - 1) {
         selectTableCellNode(tableNode.getCellNodeFromCordsOrThrow(x, y + 1, tableSelection.grid));
       } else {
         tableNode.selectNext();
       }
+
       return true;
+
     default:
       return false;
   }
 };
+
 const adjustFocusNodeInDirection = (tableSelection, tableNode, x, y, direction) => {
   const isForward = direction === 'forward';
+
   switch (direction) {
     case 'backward':
     case 'forward':
       if (x !== (isForward ? tableSelection.grid.columns - 1 : 0)) {
         tableSelection.setFocusCellForSelection(tableNode.getCellFromCordsOrThrow(x + (isForward ? 1 : -1), y, tableSelection.grid));
       }
+
       return true;
+
     case 'up':
       if (y !== 0) {
         tableSelection.setFocusCellForSelection(tableNode.getCellFromCordsOrThrow(x, y - 1, tableSelection.grid));
@@ -1146,6 +1395,7 @@ const adjustFocusNodeInDirection = (tableSelection, tableNode, x, y, direction)
       } else {
         return false;
       }
+
     case 'down':
       if (y !== tableSelection.grid.rows - 1) {
         tableSelection.setFocusCellForSelection(tableNode.getCellFromCordsOrThrow(x, y + 1, tableSelection.grid));
@@ -1153,20 +1403,25 @@ const adjustFocusNodeInDirection = (tableSelection, tableNode, x, y, direction)
       } else {
         return false;
       }
+
     default:
       return false;
   }
 };
+
 function $isSelectionInTable(selection, tableNode) {
   if (lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection)) {
     const isAnchorInside = tableNode.isParentOf(selection.anchor.getNode());
     const isFocusInside = tableNode.isParentOf(selection.focus.getNode());
     return isAnchorInside && isFocusInside;
   }
+
   return false;
 }
+
 function selectTableCellNode(tableCell) {
   const possibleParagraph = tableCell.getChildren().find(n => lexical.$isParagraphNode(n));
+
   if (lexical.$isParagraphNode(possibleParagraph)) {
     possibleParagraph.selectEnd();
   } else {
@@ -1181,16 +1436,18 @@ function selectTableCellNode(tableCell) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 /** @noInheritDoc */
 class TableNode extends lexical.DEPRECATED_GridNode {
   /** @internal */
-
   static getType() {
     return 'table';
   }
+
   static clone(node) {
     return new TableNode(node.__key);
   }
+
   static importDOM() {
     return {
       table: _node => ({
@@ -1199,30 +1456,34 @@ class TableNode extends lexical.DEPRECATED_GridNode {
       })
     };
   }
+
   static importJSON(_serializedNode) {
     return $createTableNode();
   }
+
   constructor(key) {
     super(key);
   }
+
   exportJSON() {
-    return {
-      ...super.exportJSON(),
+    return { ...super.exportJSON(),
       type: 'table',
       version: 1
     };
   }
+
   createDOM(config, editor) {
     const tableElement = document.createElement('table');
     utils.addClassNamesToElement(tableElement, config.theme.table);
     return tableElement;
   }
+
   updateDOM() {
     return false;
   }
+
   exportDOM(editor) {
-    return {
-      ...super.exportDOM(editor),
+    return { ...super.exportDOM(editor),
       after: tableElement => {
         if (tableElement) {
           const newElement = tableElement.cloneNode();
@@ -1230,45 +1491,57 @@ class TableNode extends lexical.DEPRECATED_GridNode {
           const tBody = document.createElement('tbody');
           tBody.append(...tableElement.children);
           const firstRow = this.getFirstChildOrThrow();
+
           if (!$isTableRowNode(firstRow)) {
             throw new Error('Expected to find row node.');
           }
+
           const colCount = firstRow.getChildrenSize();
+
           for (let i = 0; i < colCount; i++) {
             const col = document.createElement('col');
             colGroup.append(col);
           }
+
           newElement.replaceChildren(colGroup, tBody);
           return newElement;
         }
       }
     };
   }
+
   canExtractContents() {
     return false;
   }
+
   canBeEmpty() {
     return false;
   }
+
   isShadowRoot() {
     return true;
   }
+
   getCordsFromCellNode(tableCellNode, grid) {
     const {
       rows,
       cells
     } = grid;
+
     for (let y = 0; y < rows; y++) {
       const row = cells[y];
+
       if (row == null) {
         throw new Error(`Row not found at y:${y}`);
       }
+
       const x = row.findIndex(({
         elem
       }) => {
         const cellNode = lexical.$getNearestNodeFromDOMNode(elem);
         return cellNode === tableCellNode;
       });
+
       if (x !== -1) {
         return {
           x,
@@ -1276,59 +1549,81 @@ class TableNode extends lexical.DEPRECATED_GridNode {
         };
       }
     }
+
     throw new Error('Cell not found in table.');
   }
+
   getCellFromCords(x, y, grid) {
     const {
       cells
     } = grid;
     const row = cells[y];
+
     if (row == null) {
       return null;
     }
+
     const cell = row[x];
+
     if (cell == null) {
       return null;
     }
+
     return cell;
   }
+
   getCellFromCordsOrThrow(x, y, grid) {
     const cell = this.getCellFromCords(x, y, grid);
+
     if (!cell) {
       throw new Error('Cell not found at cords.');
     }
+
     return cell;
   }
+
   getCellNodeFromCords(x, y, grid) {
     const cell = this.getCellFromCords(x, y, grid);
+
     if (cell == null) {
       return null;
     }
+
     const node = lexical.$getNearestNodeFromDOMNode(cell.elem);
+
     if ($isTableCellNode(node)) {
       return node;
     }
+
     return null;
   }
+
   getCellNodeFromCordsOrThrow(x, y, grid) {
     const node = this.getCellNodeFromCords(x, y, grid);
+
     if (!node) {
       throw new Error('Node at cords not TableCellNode.');
     }
+
     return node;
   }
+
   canSelectBefore() {
     return true;
   }
+
   canIndent() {
     return false;
   }
+
 }
 function $getElementGridForTableNode(editor, tableNode) {
   const tableElement = editor.getElementByKey(tableNode.getKey());
+
   if (tableElement == null) {
     throw new Error('Table Element Not Found');
   }
+
   return getTableGrid(tableElement);
 }
 function convertTableElement(_domNode) {
@@ -1352,10 +1647,13 @@ function $isTableNode(node) {
  */
 function $createTableNodeWithDimensions(rowCount, columnCount, includeHeaders = true) {
   const tableNode = $createTableNode();
+
   for (let iRow = 0; iRow < rowCount; iRow++) {
     const tableRowNode = $createTableRowNode();
+
     for (let iColumn = 0; iColumn < columnCount; iColumn++) {
       let headerState = TableCellHeaderStates.NO_STATUS;
+
       if (typeof includeHeaders === 'object') {
         if (iRow === 0 && includeHeaders.rows) headerState |= TableCellHeaderStates.ROW;
         if (iColumn === 0 && includeHeaders.columns) headerState |= TableCellHeaderStates.COLUMN;
@@ -1363,35 +1661,44 @@ function $createTableNodeWithDimensions(rowCount, columnCount, includeHeaders =
         if (iRow === 0) headerState |= TableCellHeaderStates.ROW;
         if (iColumn === 0) headerState |= TableCellHeaderStates.COLUMN;
       }
+
       const tableCellNode = $createTableCellNode(headerState);
       const paragraphNode = lexical.$createParagraphNode();
       paragraphNode.append(lexical.$createTextNode());
       tableCellNode.append(paragraphNode);
       tableRowNode.append(tableCellNode);
     }
+
     tableNode.append(tableRowNode);
   }
+
   return tableNode;
 }
 function $getTableCellNodeFromLexicalNode(startingNode) {
   const node = utils.$findMatchingParent(startingNode, n => $isTableCellNode(n));
+
   if ($isTableCellNode(node)) {
     return node;
   }
+
   return null;
 }
 function $getTableRowNodeFromTableCellNodeOrThrow(startingNode) {
   const node = utils.$findMatchingParent(startingNode, n => $isTableRowNode(n));
+
   if ($isTableRowNode(node)) {
     return node;
   }
+
   throw new Error('Expected table cell to be inside of table row.');
 }
 function $getTableNodeFromLexicalNodeOrThrow(startingNode) {
   const node = utils.$findMatchingParent(startingNode, n => $isTableNode(n));
+
   if ($isTableNode(node)) {
     return node;
   }
+
   throw new Error('Expected table cell to be inside of table.');
 }
 function $getTableRowIndexFromTableCellNode(tableCellNode) {
@@ -1418,42 +1725,53 @@ function $getTableCellSiblingsFromTableCellNode(tableCellNode, grid) {
 }
 function $removeTableRowAtIndex(tableNode, indexToDelete) {
   const tableRows = tableNode.getChildren();
+
   if (indexToDelete >= tableRows.length || indexToDelete < 0) {
     throw new Error('Expected table cell to be inside of table row.');
   }
+
   const targetRowNode = tableRows[indexToDelete];
   targetRowNode.remove();
   return tableNode;
 }
 function $insertTableRow(tableNode, targetIndex, shouldInsertAfter = true, rowCount, grid) {
   const tableRows = tableNode.getChildren();
+
   if (targetIndex >= tableRows.length || targetIndex < 0) {
     throw new Error('Table row target index out of range');
   }
+
   const targetRowNode = tableRows[targetIndex];
+
   if ($isTableRowNode(targetRowNode)) {
     for (let r = 0; r < rowCount; r++) {
       const tableRowCells = targetRowNode.getChildren();
       const tableColumnCount = tableRowCells.length;
       const newTableRowNode = $createTableRowNode();
+
       for (let c = 0; c < tableColumnCount; c++) {
         const tableCellFromTargetRow = tableRowCells[c];
+
         if (!$isTableCellNode(tableCellFromTargetRow)) {
           throw Error(`Expected table cell`);
         }
+
         const {
           above,
           below
         } = $getTableCellSiblingsFromTableCellNode(tableCellFromTargetRow, grid);
         let headerState = TableCellHeaderStates.NO_STATUS;
         const width = above && above.getWidth() || below && below.getWidth() || undefined;
+
         if (above && above.hasHeaderState(TableCellHeaderStates.COLUMN) || below && below.hasHeaderState(TableCellHeaderStates.COLUMN)) {
           headerState |= TableCellHeaderStates.COLUMN;
         }
+
         const tableCellNode = $createTableCellNode(headerState, 1, width);
         tableCellNode.append(lexical.$createParagraphNode());
         newTableRowNode.append(tableCellNode);
       }
+
       if (shouldInsertAfter) {
         targetRowNode.insertAfter(newTableRowNode);
       } else {
@@ -1463,32 +1781,108 @@ function $insertTableRow(tableNode, targetIndex, shouldInsertAfter = true, rowCo
   } else {
     throw new Error('Row before insertion index does not exist.');
   }
+
   return tableNode;
 }
+function $insertTableRow__EXPERIMENTAL(insertAfter = true) {
+  const selection = lexical.$getSelection();
+
+  if (!(lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection))) {
+    throw Error(`Expected a RangeSelection or GridSelection`);
+  }
+
+  const focus = selection.focus.getNode();
+  const [focusCell,, grid] = lexical.DEPRECATED_$getNodeTriplet(focus);
+  const [gridMap, focusCellMap] = lexical.DEPRECATED_$computeGridMap(grid, focusCell, focusCell);
+  const columnCount = gridMap[0].length;
+  const {
+    startRow: focusStartRow
+  } = focusCellMap;
+
+  if (insertAfter) {
+    const focusEndRow = focusStartRow + focusCell.__rowSpan - 1;
+    const focusEndRowMap = gridMap[focusEndRow];
+    const newRow = $createTableRowNode();
+
+    for (let i = 0; i < columnCount; i++) {
+      const {
+        cell,
+        startRow
+      } = focusEndRowMap[i];
+
+      if (startRow + cell.__rowSpan - 1 <= focusEndRow) {
+        newRow.append($createTableCellNode(TableCellHeaderStates.NO_STATUS));
+      } else {
+        cell.setRowSpan(cell.__rowSpan + 1);
+      }
+    }
+
+    const focusEndRowNode = grid.getChildAtIndex(focusEndRow);
+
+    if (!lexical.DEPRECATED_$isGridRowNode(focusEndRowNode)) {
+      throw Error(`focusEndRow is not a GridRowNode`);
+    }
+
+    focusEndRowNode.insertAfter(newRow);
+  } else {
+    const focusStartRowMap = gridMap[focusStartRow];
+    const newRow = $createTableRowNode();
+
+    for (let i = 0; i < columnCount; i++) {
+      const {
+        cell,
+        startRow
+      } = focusStartRowMap[i];
+
+      if (startRow === focusStartRow) {
+        newRow.append($createTableCellNode(TableCellHeaderStates.NO_STATUS));
+      } else {
+        cell.setRowSpan(cell.__rowSpan + 1);
+      }
+    }
+
+    const focusStartRowNode = grid.getChildAtIndex(focusStartRow);
+
+    if (!lexical.DEPRECATED_$isGridRowNode(focusStartRowNode)) {
+      throw Error(`focusEndRow is not a GridRowNode`);
+    }
+
+    focusStartRowNode.insertBefore(newRow);
+  }
+}
 function $insertTableColumn(tableNode, targetIndex, shouldInsertAfter = true, columnCount, grid) {
   const tableRows = tableNode.getChildren();
+
   for (let r = 0; r < tableRows.length; r++) {
     const currentTableRowNode = tableRows[r];
+
     if ($isTableRowNode(currentTableRowNode)) {
       for (let c = 0; c < columnCount; c++) {
         const tableRowChildren = currentTableRowNode.getChildren();
+
         if (targetIndex >= tableRowChildren.length || targetIndex < 0) {
           throw new Error('Table column target index out of range');
         }
+
         const targetCell = tableRowChildren[targetIndex];
+
         if (!$isTableCellNode(targetCell)) {
           throw Error(`Expected table cell`);
         }
+
         const {
           left,
           right
         } = $getTableCellSiblingsFromTableCellNode(targetCell, grid);
         let headerState = TableCellHeaderStates.NO_STATUS;
+
         if (left && left.hasHeaderState(TableCellHeaderStates.ROW) || right && right.hasHeaderState(TableCellHeaderStates.ROW)) {
           headerState |= TableCellHeaderStates.ROW;
         }
+
         const newTableCell = $createTableCellNode(headerState);
         newTableCell.append(lexical.$createParagraphNode());
+
         if (shouldInsertAfter) {
           targetCell.insertAfter(newTableCell);
         } else {
@@ -1497,22 +1891,257 @@ function $insertTableColumn(tableNode, targetIndex, shouldInsertAfter = true, co
       }
     }
   }
+
   return tableNode;
 }
+function $insertTableColumn__EXPERIMENTAL(insertAfter = true) {
+  const selection = lexical.$getSelection();
+
+  if (!(lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection))) {
+    throw Error(`Expected a RangeSelection or GridSelection`);
+  }
+
+  const focus = selection.focus.getNode();
+  const [focusCell,, grid] = lexical.DEPRECATED_$getNodeTriplet(focus);
+  const [gridMap, focusCellMap] = lexical.DEPRECATED_$computeGridMap(grid, focusCell, focusCell);
+  const rowCount = gridMap.length;
+  const {
+    startColumn: focusStartColumn
+  } = focusCellMap;
+
+  if (insertAfter) {
+    const focusEndColumn = focusStartColumn + focusCell.__colSpan - 1;
+
+    for (let i = 0; i < rowCount; i++) {
+      const {
+        cell,
+        startColumn
+      } = gridMap[i][focusEndColumn];
+
+      if (startColumn + cell.__colSpan - 1 <= focusEndColumn) {
+        cell.insertAfter($createTableCellNode(TableCellHeaderStates.NO_STATUS));
+      } else {
+        cell.setColSpan(cell.__colSpan + 1);
+      }
+    }
+  } else {
+    for (let i = 0; i < rowCount; i++) {
+      const {
+        cell,
+        startColumn
+      } = gridMap[i][focusStartColumn];
+
+      if (startColumn === focusStartColumn) {
+        cell.insertBefore($createTableCellNode(TableCellHeaderStates.NO_STATUS));
+      } else {
+        cell.setColSpan(cell.__colSpan + 1);
+      }
+    }
+  }
+}
 function $deleteTableColumn(tableNode, targetIndex) {
   const tableRows = tableNode.getChildren();
+
   for (let i = 0; i < tableRows.length; i++) {
     const currentTableRowNode = tableRows[i];
+
     if ($isTableRowNode(currentTableRowNode)) {
       const tableRowChildren = currentTableRowNode.getChildren();
+
       if (targetIndex >= tableRowChildren.length || targetIndex < 0) {
         throw new Error('Table column target index out of range');
       }
+
       tableRowChildren[targetIndex].remove();
     }
   }
+
   return tableNode;
 }
+function $deleteTableRow__EXPERIMENTAL() {
+  const selection = lexical.$getSelection();
+
+  if (!(lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection))) {
+    throw Error(`Expected a RangeSelection or GridSelection`);
+  }
+
+  const anchor = selection.anchor.getNode();
+  const focus = selection.focus.getNode();
+  const [anchorCell,, grid] = lexical.DEPRECATED_$getNodeTriplet(anchor);
+  const [focusCell] = lexical.DEPRECATED_$getNodeTriplet(focus);
+  const [gridMap, anchorCellMap, focusCellMap] = lexical.DEPRECATED_$computeGridMap(grid, anchorCell, focusCell);
+  const {
+    startRow: anchorStartRow
+  } = anchorCellMap;
+  const {
+    startRow: focusStartRow
+  } = focusCellMap;
+  const focusEndRow = focusStartRow + focusCell.__rowSpan - 1;
+
+  if (gridMap.length === focusEndRow - anchorStartRow + 1) {
+    // Empty grid
+    grid.remove();
+    return;
+  }
+
+  const columnCount = gridMap[0].length;
+  const nextRow = gridMap[focusEndRow + 1];
+  const nextRowNode = grid.getChildAtIndex(focusEndRow + 1);
+
+  if (!lexical.DEPRECATED_$isGridRowNode(nextRowNode)) {
+    throw Error(`Expected GridNode childAtIndex(${String(focusEndRow + 1)}) to be RowNode`);
+  }
+
+  for (let row = focusEndRow; row >= anchorStartRow; row--) {
+    for (let column = columnCount - 1; column >= 0; column--) {
+      const {
+        cell,
+        startRow: cellStartRow,
+        startColumn: cellStartColumn
+      } = gridMap[row][column];
+
+      if (cellStartColumn !== column) {
+        // Don't repeat work for the same Cell
+        continue;
+      } // Rows overflowing top have to be trimmed
+
+
+      if (row === anchorStartRow && cellStartRow < anchorStartRow) {
+        cell.setRowSpan(cell.__rowSpan - (cellStartRow - anchorStartRow));
+      } // Rows overflowing bottom have to be trimmed and moved to the next row
+
+
+      if (cellStartRow >= anchorStartRow && cellStartRow + cell.__rowSpan - 1 > focusEndRow) {
+        cell.setRowSpan(cell.__rowSpan - (focusEndRow - cellStartRow + 1));
+
+        if (column === 0) {
+          $insertFirst(nextRowNode, cell);
+        } else {
+          const {
+            cell: previousCell
+          } = nextRow[column - 1];
+          previousCell.insertAfter(cell);
+        }
+      }
+    }
+
+    const rowNode = grid.getChildAtIndex(row);
+
+    if (!lexical.DEPRECATED_$isGridRowNode(rowNode)) {
+      throw Error(`Expected GridNode childAtIndex(${String(row)}) to be RowNode`);
+    }
+
+    rowNode.remove();
+  }
+
+  if (nextRow !== undefined) {
+    const {
+      cell
+    } = nextRow[0];
+    $moveSelectionToCell(cell);
+  } else {
+    const previousRow = gridMap[anchorStartRow - 1];
+    const {
+      cell
+    } = previousRow[0];
+    $moveSelectionToCell(cell);
+  }
+}
+function $deleteTableColumn__EXPERIMENTAL() {
+  const selection = lexical.$getSelection();
+
+  if (!(lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection))) {
+    throw Error(`Expected a RangeSelection or GridSelection`);
+  }
+
+  const anchor = selection.anchor.getNode();
+  const focus = selection.focus.getNode();
+  const [anchorCell,, grid] = lexical.DEPRECATED_$getNodeTriplet(anchor);
+  const [focusCell] = lexical.DEPRECATED_$getNodeTriplet(focus);
+  const [gridMap, anchorCellMap, focusCellMap] = lexical.DEPRECATED_$computeGridMap(grid, anchorCell, focusCell);
+  const {
+    startColumn: anchorStartColumn
+  } = anchorCellMap;
+  const {
+    startRow: focusStartRow,
+    startColumn: focusStartColumn
+  } = focusCellMap;
+  const startColumn = Math.min(anchorStartColumn, focusStartColumn);
+  const endColumn = Math.max(anchorStartColumn + anchorCell.__colSpan - 1, focusStartColumn + focusCell.__colSpan - 1);
+  const selectedColumnCount = endColumn - startColumn + 1;
+  const columnCount = gridMap[0].length;
+
+  if (columnCount === endColumn - startColumn + 1) {
+    // Empty grid
+    grid.selectPrevious();
+    grid.remove();
+    return;
+  }
+
+  const rowCount = gridMap.length;
+
+  for (let row = 0; row < rowCount; row++) {
+    for (let column = startColumn; column <= endColumn; column++) {
+      const {
+        cell,
+        startColumn: cellStartColumn
+      } = gridMap[row][column];
+
+      if (cellStartColumn < startColumn) {
+        if (column === startColumn) {
+          const overflowLeft = startColumn - cellStartColumn; // Overflowing left
+
+          cell.setColSpan(cell.__colSpan - // Possible overflow right too
+          Math.min(selectedColumnCount, cell.__colSpan - overflowLeft));
+        }
+      } else if (cellStartColumn + cell.__colSpan - 1 > endColumn) {
+        if (column === endColumn) {
+          // Overflowing right
+          const inSelectedArea = endColumn - cellStartColumn + 1;
+          cell.setColSpan(cell.__colSpan - inSelectedArea);
+        }
+      } else {
+        cell.remove();
+      }
+    }
+  }
+
+  const focusRowMap = gridMap[focusStartRow];
+  const nextColumn = focusRowMap[focusStartColumn + focusCell.__colSpan];
+
+  if (nextColumn !== undefined) {
+    const {
+      cell
+    } = nextColumn;
+    $moveSelectionToCell(cell);
+  } else {
+    const previousRow = focusRowMap[focusStartColumn - 1];
+    const {
+      cell
+    } = previousRow;
+    $moveSelectionToCell(cell);
+  }
+}
+
+function $moveSelectionToCell(cell) {
+  const firstDescendant = cell.getFirstDescendant();
+
+  if (!(firstDescendant !== null)) {
+    throw Error(`Unexpected empty cell`);
+  }
+
+  firstDescendant.getParentOrThrow().selectStart();
+}
+
+function $insertFirst(parent, node) {
+  const firstChild = parent.getFirstChild();
+
+  if (firstChild !== null) {
+    parent.insertBefore(firstChild);
+  } else {
+    parent.append(node);
+  }
+}
 
 /** @module @lexical/table */
 const INSERT_TABLE_COMMAND = lexical.createCommand('INSERT_TABLE_COMMAND');
@@ -1522,6 +2151,8 @@ exports.$createTableNode = $createTableNode;
 exports.$createTableNodeWithDimensions = $createTableNodeWithDimensions;
 exports.$createTableRowNode = $createTableRowNode;
 exports.$deleteTableColumn = $deleteTableColumn;
+exports.$deleteTableColumn__EXPERIMENTAL = $deleteTableColumn__EXPERIMENTAL;
+exports.$deleteTableRow__EXPERIMENTAL = $deleteTableRow__EXPERIMENTAL;
 exports.$getElementGridForTableNode = $getElementGridForTableNode;
 exports.$getTableCellNodeFromLexicalNode = $getTableCellNodeFromLexicalNode;
 exports.$getTableColumnIndexFromTableCellNode = $getTableColumnIndexFromTableCellNode;
@@ -1529,7 +2160,9 @@ exports.$getTableNodeFromLexicalNodeOrThrow = $getTableNodeFromLexicalNodeOrThro
 exports.$getTableRowIndexFromTableCellNode = $getTableRowIndexFromTableCellNode;
 exports.$getTableRowNodeFromTableCellNodeOrThrow = $getTableRowNodeFromTableCellNodeOrThrow;
 exports.$insertTableColumn = $insertTableColumn;
+exports.$insertTableColumn__EXPERIMENTAL = $insertTableColumn__EXPERIMENTAL;
 exports.$insertTableRow = $insertTableRow;
+exports.$insertTableRow__EXPERIMENTAL = $insertTableRow__EXPERIMENTAL;
 exports.$isTableCellNode = $isTableCellNode;
 exports.$isTableNode = $isTableNode;
 exports.$isTableRowNode = $isTableRowNode;