@lexical/table 0.20.1-nightly.20241122.0 → 0.20.1-nightly.20241126.0

package/LexicalTable.dev.js

@@ -106,31 +106,24 @@ class TableCellNode extends lexical.ElementNode {
     return element;
   }
   exportDOM(editor) {
-    const {
-      element
-    } = super.exportDOM(editor);
-    if (element) {
-      const element_ = element;
-      element_.style.border = '1px solid black';
+    const output = super.exportDOM(editor);
+    if (output.element) {
+      const element = output.element;
+      element.style.border = '1px solid black';
       if (this.__colSpan > 1) {
-        element_.colSpan = this.__colSpan;
+        element.colSpan = this.__colSpan;
       }
       if (this.__rowSpan > 1) {
-        element_.rowSpan = this.__rowSpan;
+        element.rowSpan = this.__rowSpan;
       }
-      element_.style.width = `${this.getWidth() || COLUMN_WIDTH}px`;
-      element_.style.verticalAlign = 'top';
-      element_.style.textAlign = 'start';
-      const backgroundColor = this.getBackgroundColor();
-      if (backgroundColor !== null) {
-        element_.style.backgroundColor = backgroundColor;
-      } else if (this.hasHeader()) {
-        element_.style.backgroundColor = '#f2f3f5';
+      element.style.width = `${this.getWidth() || COLUMN_WIDTH}px`;
+      element.style.verticalAlign = 'top';
+      element.style.textAlign = 'start';
+      if (this.__backgroundColor === null && this.hasHeader()) {
+        element.style.backgroundColor = '#f2f3f5';
       }
     }
-    return {
-      element
-    };
+    return output;
   }
   exportJSON() {
     return {
@@ -298,6 +291,18 @@ const INSERT_TABLE_COMMAND = lexical.createCommand('INSERT_TABLE_COMMAND');
 
 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.
  *
@@ -982,8 +987,8 @@ function $unmergeCell() {
     cell.setRowSpan(1);
   }
 }
-function $computeTableMap(grid, cellA, cellB) {
-  const [tableMap, cellAValue, cellBValue] = $computeTableMapSkipCellCheck(grid, cellA, cellB);
+function $computeTableMap(tableNode, cellA, cellB) {
+  const [tableMap, cellAValue, cellBValue] = $computeTableMapSkipCellCheck(tableNode, cellA, cellB);
   if (!(cellAValue !== null)) {
     throw Error(`Anchor not found in Table`);
   }
@@ -992,7 +997,7 @@ function $computeTableMap(grid, cellA, cellB) {
   }
   return [tableMap, cellAValue, cellBValue];
 }
-function $computeTableMapSkipCellCheck(grid, cellA, cellB) {
+function $computeTableMapSkipCellCheck(tableNode, cellA, cellB) {
   const tableMap = [];
   let cellAValue = null;
   let cellBValue = null;
@@ -1003,7 +1008,7 @@ function $computeTableMapSkipCellCheck(grid, cellA, cellB) {
     }
     return row;
   }
-  const gridChildren = grid.getChildren();
+  const gridChildren = tableNode.getChildren();
   for (let rowIdx = 0; rowIdx < gridChildren.length; rowIdx++) {
     const row = gridChildren[rowIdx];
     if (!$isTableRowNode(row)) {
@@ -1079,6 +1084,99 @@ function $getNodeTriplet(source) {
   }
   return [cell, row, grid];
 }
+function $computeTableCellRectSpans(map, boundary) {
+  const {
+    minColumn,
+    maxColumn,
+    minRow,
+    maxRow
+  } = boundary;
+  let topSpan = 1;
+  let leftSpan = 1;
+  let rightSpan = 1;
+  let bottomSpan = 1;
+  const topRow = map[minRow];
+  const bottomRow = map[maxRow];
+  for (let col = minColumn; col <= maxColumn; col++) {
+    topSpan = Math.max(topSpan, topRow[col].cell.__rowSpan);
+    bottomSpan = Math.max(bottomSpan, bottomRow[col].cell.__rowSpan);
+  }
+  for (let row = minRow; row <= maxRow; row++) {
+    leftSpan = Math.max(leftSpan, map[row][minColumn].cell.__colSpan);
+    rightSpan = Math.max(rightSpan, map[row][maxColumn].cell.__colSpan);
+  }
+  return {
+    bottomSpan,
+    leftSpan,
+    rightSpan,
+    topSpan
+  };
+}
+function $computeTableCellRectBoundary(map, cellAMap, cellBMap) {
+  let minColumn = Math.min(cellAMap.startColumn, cellBMap.startColumn);
+  let minRow = Math.min(cellAMap.startRow, cellBMap.startRow);
+  let maxColumn = Math.max(cellAMap.startColumn + cellAMap.cell.__colSpan - 1, cellBMap.startColumn + cellBMap.cell.__colSpan - 1);
+  let maxRow = Math.max(cellAMap.startRow + cellAMap.cell.__rowSpan - 1, cellBMap.startRow + cellBMap.cell.__rowSpan - 1);
+  let exploredMinColumn = minColumn;
+  let exploredMinRow = minRow;
+  let exploredMaxColumn = minColumn;
+  let exploredMaxRow = minRow;
+  function expandBoundary(mapValue) {
+    const {
+      cell,
+      startColumn: cellStartColumn,
+      startRow: cellStartRow
+    } = mapValue;
+    minColumn = Math.min(minColumn, cellStartColumn);
+    minRow = Math.min(minRow, cellStartRow);
+    maxColumn = Math.max(maxColumn, cellStartColumn + cell.__colSpan - 1);
+    maxRow = Math.max(maxRow, cellStartRow + cell.__rowSpan - 1);
+  }
+  while (minColumn < exploredMinColumn || minRow < exploredMinRow || maxColumn > exploredMaxColumn || maxRow > exploredMaxRow) {
+    if (minColumn < exploredMinColumn) {
+      // Expand on the left
+      const rowDiff = exploredMaxRow - exploredMinRow;
+      const previousColumn = exploredMinColumn - 1;
+      for (let i = 0; i <= rowDiff; i++) {
+        expandBoundary(map[exploredMinRow + i][previousColumn]);
+      }
+      exploredMinColumn = previousColumn;
+    }
+    if (minRow < exploredMinRow) {
+      // Expand on top
+      const columnDiff = exploredMaxColumn - exploredMinColumn;
+      const previousRow = exploredMinRow - 1;
+      for (let i = 0; i <= columnDiff; i++) {
+        expandBoundary(map[previousRow][exploredMinColumn + i]);
+      }
+      exploredMinRow = previousRow;
+    }
+    if (maxColumn > exploredMaxColumn) {
+      // Expand on the right
+      const rowDiff = exploredMaxRow - exploredMinRow;
+      const nextColumn = exploredMaxColumn + 1;
+      for (let i = 0; i <= rowDiff; i++) {
+        expandBoundary(map[exploredMinRow + i][nextColumn]);
+      }
+      exploredMaxColumn = nextColumn;
+    }
+    if (maxRow > exploredMaxRow) {
+      // Expand on the bottom
+      const columnDiff = exploredMaxColumn - exploredMinColumn;
+      const nextRow = exploredMaxRow + 1;
+      for (let i = 0; i <= columnDiff; i++) {
+        expandBoundary(map[nextRow][exploredMinColumn + i]);
+      }
+      exploredMaxRow = nextRow;
+    }
+  }
+  return {
+    maxColumn,
+    maxRow,
+    minColumn,
+    minRow
+  };
+}
 function $getTableCellNodeRect(tableCellNode) {
   const [cellNode,, gridNode] = $getNodeTriplet(tableCellNode);
   const rows = gridNode.getChildren();
@@ -1133,6 +1231,38 @@ function $getTableCellNodeRect(tableCellNode) {
  *
  */
 
+function $getCellNodes(tableSelection) {
+  const [[anchorNode, anchorCell, anchorRow, anchorTable], [focusNode, focusCell, focusRow, focusTable]] = ['anchor', 'focus'].map(k => {
+    const node = tableSelection[k].getNode();
+    const cellNode = utils.$findMatchingParent(node, $isTableCellNode);
+    if (!$isTableCellNode(cellNode)) {
+      throw Error(`Expected TableSelection ${k} to be (or a child of) TableCellNode, got key ${node.getKey()} of type ${node.getType()}`);
+    }
+    const rowNode = cellNode.getParent();
+    if (!$isTableRowNode(rowNode)) {
+      throw Error(`Expected TableSelection ${k} cell parent to be a TableRowNode`);
+    }
+    const tableNode = rowNode.getParent();
+    if (!$isTableNode(tableNode)) {
+      throw Error(`Expected TableSelection ${k} row parent to be a TableNode`);
+    }
+    return [node, cellNode, rowNode, tableNode];
+  });
+  // TODO: nested tables may violate this
+  if (!anchorTable.is(focusTable)) {
+    throw Error(`Expected TableSelection anchor and focus to be in the same table`);
+  }
+  return {
+    anchorCell,
+    anchorNode,
+    anchorRow,
+    anchorTable,
+    focusCell,
+    focusNode,
+    focusRow,
+    focusTable
+  };
+}
 class TableSelection {
   constructor(tableKey, anchor, focus) {
     this.anchor = anchor;
@@ -1147,6 +1277,17 @@ class TableSelection {
     return [this.anchor, this.focus];
   }
 
+  /**
+   * {@link $createTableSelection} unfortunately makes it very easy to create
+   * nonsense selections, so we have a method to see if the selection probably
+   * makes sense.
+   *
+   * @returns true if the TableSelection is (probably) valid
+   */
+  isValid() {
+    return this.tableKey !== 'root' && this.anchor.key !== 'root' && this.anchor.type === 'element' && this.focus.key !== 'root' && this.focus.type === 'element';
+  }
+
   /**
    * Returns whether the Selection is "backwards", meaning the focus
    * logically precedes the anchor in the EditorState.
@@ -1162,20 +1303,18 @@ class TableSelection {
     this._cachedNodes = nodes;
   }
   is(selection) {
-    if (!$isTableSelection(selection)) {
-      return false;
-    }
-    return this.tableKey === selection.tableKey && this.anchor.is(selection.anchor) && this.focus.is(selection.focus);
+    return $isTableSelection(selection) && this.tableKey === selection.tableKey && this.anchor.is(selection.anchor) && this.focus.is(selection.focus);
   }
   set(tableKey, anchorCellKey, focusCellKey) {
-    this.dirty = true;
+    // note: closure compiler's acorn does not support ||=
+    this.dirty = this.dirty || tableKey !== this.tableKey || anchorCellKey !== this.anchor.key || focusCellKey !== this.focus.key;
     this.tableKey = tableKey;
     this.anchor.key = anchorCellKey;
     this.focus.key = focusCellKey;
     this._cachedNodes = null;
   }
   clone() {
-    return new TableSelection(this.tableKey, this.anchor, this.focus);
+    return new TableSelection(this.tableKey, lexical.$createPoint(this.anchor.key, this.anchor.offset, this.anchor.type), lexical.$createPoint(this.focus.key, this.focus.offset, this.focus.type));
   }
   isCollapsed() {
     return false;
@@ -1220,19 +1359,15 @@ class TableSelection {
 
   // TODO Deprecate this method. It's confusing when used with colspan|rowspan
   getShape() {
-    const anchorCellNode = lexical.$getNodeByKey(this.anchor.key);
-    if (!$isTableCellNode(anchorCellNode)) {
-      throw Error(`Expected TableSelection anchor to be (or a child of) TableCellNode`);
-    }
-    const anchorCellNodeRect = $getTableCellNodeRect(anchorCellNode);
+    const {
+      anchorCell,
+      focusCell
+    } = $getCellNodes(this);
+    const anchorCellNodeRect = $getTableCellNodeRect(anchorCell);
     if (!(anchorCellNodeRect !== null)) {
       throw Error(`getCellRect: expected to find AnchorNode`);
     }
-    const focusCellNode = lexical.$getNodeByKey(this.focus.key);
-    if (!$isTableCellNode(focusCellNode)) {
-      throw Error(`Expected TableSelection focus to be (or a child of) TableCellNode`);
-    }
-    const focusCellNodeRect = $getTableCellNodeRect(focusCellNode);
+    const focusCellNodeRect = $getTableCellNodeRect(focusCell);
     if (!(focusCellNodeRect !== null)) {
       throw Error(`getCellRect: expected to find focusCellNode`);
     }
@@ -1248,29 +1383,18 @@ class TableSelection {
     };
   }
   getNodes() {
+    if (!this.isValid()) {
+      return [];
+    }
     const cachedNodes = this._cachedNodes;
     if (cachedNodes !== null) {
       return cachedNodes;
     }
-    const anchorNode = this.anchor.getNode();
-    const focusNode = this.focus.getNode();
-    const anchorCell = utils.$findMatchingParent(anchorNode, $isTableCellNode);
-    // todo replace with triplet
-    const focusCell = utils.$findMatchingParent(focusNode, $isTableCellNode);
-    if (!$isTableCellNode(anchorCell)) {
-      throw Error(`Expected TableSelection anchor to be (or a child of) TableCellNode`);
-    }
-    if (!$isTableCellNode(focusCell)) {
-      throw Error(`Expected TableSelection focus to be (or a child of) TableCellNode`);
-    }
-    const anchorRow = anchorCell.getParent();
-    if (!$isTableRowNode(anchorRow)) {
-      throw Error(`Expected anchorCell to have a parent TableRowNode`);
-    }
-    const tableNode = anchorRow.getParent();
-    if (!$isTableNode(tableNode)) {
-      throw Error(`Expected tableNode to have a parent TableNode`);
-    }
+    const {
+      anchorTable: tableNode,
+      anchorCell,
+      focusCell
+    } = $getCellNodes(this);
     const focusCellGrid = focusCell.getParents()[1];
     if (focusCellGrid !== tableNode) {
       if (!tableNode.isParentOf(focusCell)) {
@@ -1296,63 +1420,12 @@ class TableSelection {
     // ability to store a state. Killing TableSelection and moving the logic to the plugin would make
     // this possible.
     const [map, cellAMap, cellBMap] = $computeTableMap(tableNode, anchorCell, focusCell);
-    let minColumn = Math.min(cellAMap.startColumn, cellBMap.startColumn);
-    let minRow = Math.min(cellAMap.startRow, cellBMap.startRow);
-    let maxColumn = Math.max(cellAMap.startColumn + cellAMap.cell.__colSpan - 1, cellBMap.startColumn + cellBMap.cell.__colSpan - 1);
-    let maxRow = Math.max(cellAMap.startRow + cellAMap.cell.__rowSpan - 1, cellBMap.startRow + cellBMap.cell.__rowSpan - 1);
-    let exploredMinColumn = minColumn;
-    let exploredMinRow = minRow;
-    let exploredMaxColumn = minColumn;
-    let exploredMaxRow = minRow;
-    function expandBoundary(mapValue) {
-      const {
-        cell,
-        startColumn: cellStartColumn,
-        startRow: cellStartRow
-      } = mapValue;
-      minColumn = Math.min(minColumn, cellStartColumn);
-      minRow = Math.min(minRow, cellStartRow);
-      maxColumn = Math.max(maxColumn, cellStartColumn + cell.__colSpan - 1);
-      maxRow = Math.max(maxRow, cellStartRow + cell.__rowSpan - 1);
-    }
-    while (minColumn < exploredMinColumn || minRow < exploredMinRow || maxColumn > exploredMaxColumn || maxRow > exploredMaxRow) {
-      if (minColumn < exploredMinColumn) {
-        // Expand on the left
-        const rowDiff = exploredMaxRow - exploredMinRow;
-        const previousColumn = exploredMinColumn - 1;
-        for (let i = 0; i <= rowDiff; i++) {
-          expandBoundary(map[exploredMinRow + i][previousColumn]);
-        }
-        exploredMinColumn = previousColumn;
-      }
-      if (minRow < exploredMinRow) {
-        // Expand on top
-        const columnDiff = exploredMaxColumn - exploredMinColumn;
-        const previousRow = exploredMinRow - 1;
-        for (let i = 0; i <= columnDiff; i++) {
-          expandBoundary(map[previousRow][exploredMinColumn + i]);
-        }
-        exploredMinRow = previousRow;
-      }
-      if (maxColumn > exploredMaxColumn) {
-        // Expand on the right
-        const rowDiff = exploredMaxRow - exploredMinRow;
-        const nextColumn = exploredMaxColumn + 1;
-        for (let i = 0; i <= rowDiff; i++) {
-          expandBoundary(map[exploredMinRow + i][nextColumn]);
-        }
-        exploredMaxColumn = nextColumn;
-      }
-      if (maxRow > exploredMaxRow) {
-        // Expand on the bottom
-        const columnDiff = exploredMaxColumn - exploredMinColumn;
-        const nextRow = exploredMaxRow + 1;
-        for (let i = 0; i <= columnDiff; i++) {
-          expandBoundary(map[nextRow][exploredMinColumn + i]);
-        }
-        exploredMaxRow = nextRow;
-      }
-    }
+    const {
+      minColumn,
+      maxColumn,
+      minRow,
+      maxRow
+    } = $computeTableCellRectBoundary(map, cellAMap, cellBMap);
 
     // We use a Map here because merged cells in the grid would otherwise
     // show up multiple times in the nodes array
@@ -1369,12 +1442,13 @@ class TableSelection {
         }
         if (currentRow !== lastRow) {
           nodeMap.set(currentRow.getKey(), currentRow);
+          lastRow = currentRow;
         }
-        nodeMap.set(cell.getKey(), cell);
-        for (const child of $getChildrenRecursively(cell)) {
-          nodeMap.set(child.getKey(), child);
+        if (!nodeMap.has(cell.getKey())) {
+          $visitRecursively(cell, childNode => {
+            nodeMap.set(childNode.getKey(), childNode);
+          });
         }
-        lastRow = currentRow;
       }
     }
     const nodes = Array.from(nodeMap.values());
@@ -1399,26 +1473,51 @@ function $isTableSelection(x) {
   return x instanceof TableSelection;
 }
 function $createTableSelection() {
+  // TODO this is a suboptimal design, it doesn't make sense to have
+  // a table selection that isn't associated with a table. This
+  // constructor should have required argumnets and in true we
+  // should check that they point to a table and are element points to
+  // cell nodes of that table.
   const anchor = lexical.$createPoint('root', 0, 'element');
   const focus = lexical.$createPoint('root', 0, 'element');
   return new TableSelection('root', anchor, focus);
 }
-function $getChildrenRecursively(node) {
-  const nodes = [];
-  const stack = [node];
-  while (stack.length > 0) {
-    const currentNode = stack.pop();
-    if (!(currentNode !== undefined)) {
-      throw Error(`Stack.length > 0; can't be undefined`);
+function $createTableSelectionFrom(tableNode, anchorCell, focusCell) {
+  const tableNodeKey = tableNode.getKey();
+  const anchorCellKey = anchorCell.getKey();
+  const focusCellKey = focusCell.getKey();
+  {
+    if (!tableNode.isAttached()) {
+      throw Error(`$createTableSelectionFrom: tableNode ${tableNodeKey} is not attached`);
     }
-    if (lexical.$isElementNode(currentNode)) {
-      stack.unshift(...currentNode.getChildren());
+    if (!tableNode.is($findTableNode(anchorCell))) {
+      throw Error(`$createTableSelectionFrom: anchorCell ${anchorCellKey} is not in table ${tableNodeKey}`);
     }
-    if (currentNode !== node) {
-      nodes.push(currentNode);
+    if (!tableNode.is($findTableNode(focusCell))) {
+      throw Error(`$createTableSelectionFrom: focusCell ${focusCellKey} is not in table ${tableNodeKey}`);
+    } // TODO: Check for rectangular grid
+  }
+  const prevSelection = lexical.$getSelection();
+  const nextSelection = $isTableSelection(prevSelection) ? prevSelection.clone() : $createTableSelection();
+  nextSelection.set(tableNode.getKey(), anchorCell.getKey(), focusCell.getKey());
+  return nextSelection;
+}
+
+/**
+ * Depth first visitor
+ * @param node The starting node
+ * @param $visit The function to call for each node. If the function returns false, then children of this node will not be explored
+ */
+function $visitRecursively(node, $visit) {
+  const stack = [[node]];
+  for (let currentArray = stack.at(-1); currentArray !== undefined && stack.length > 0; currentArray = stack.at(-1)) {
+    const currentNode = currentArray.pop();
+    if (currentNode === undefined) {
+      stack.pop();
+    } else if ($visit(currentNode) !== false && lexical.$isElementNode(currentNode)) {
+      stack.push(currentNode.getChildren());
     }
   }
-  return nodes;
 }
 
 /**
@@ -1470,6 +1569,7 @@ class TableObserver {
     this.listenerOptions = {
       signal: this.abortController.signal
     };
+    this.nextFocus = null;
     this.trackTable();
   }
   getTable() {
@@ -1523,7 +1623,7 @@ class TableObserver {
       editor: this.editor
     });
   }
-  clearHighlight() {
+  $clearHighlight() {
     const editor = this.editor;
     this.isHighlightingCells = false;
     this.anchorX = -1;
@@ -1536,55 +1636,47 @@ class TableObserver {
     this.anchorCell = null;
     this.focusCell = null;
     this.hasHijackedSelectionStyles = false;
-    this.enableHighlightStyle();
-    editor.update(() => {
-      const {
-        tableNode,
-        tableElement
-      } = this.$lookup();
-      const grid = getTable(tableNode, tableElement);
-      $updateDOMForSelection(editor, grid, null);
+    this.$enableHighlightStyle();
+    const {
+      tableNode,
+      tableElement
+    } = this.$lookup();
+    const grid = getTable(tableNode, tableElement);
+    $updateDOMForSelection(editor, grid, null);
+    if (lexical.$getSelection() !== null) {
       lexical.$setSelection(null);
       editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
-    });
+    }
   }
-  enableHighlightStyle() {
+  $enableHighlightStyle() {
     const editor = this.editor;
-    editor.getEditorState().read(() => {
-      const {
-        tableElement
-      } = this.$lookup();
-      utils.removeClassNamesFromElement(tableElement, editor._config.theme.tableSelection);
-      tableElement.classList.remove('disable-selection');
-      this.hasHijackedSelectionStyles = false;
-    }, {
-      editor
-    });
+    const {
+      tableElement
+    } = this.$lookup();
+    utils.removeClassNamesFromElement(tableElement, editor._config.theme.tableSelection);
+    tableElement.classList.remove('disable-selection');
+    this.hasHijackedSelectionStyles = false;
   }
-  disableHighlightStyle() {
-    const editor = this.editor;
-    editor.getEditorState().read(() => {
-      const {
-        tableElement
-      } = this.$lookup();
-      utils.addClassNamesToElement(tableElement, editor._config.theme.tableSelection);
-      this.hasHijackedSelectionStyles = true;
-    }, {
-      editor
-    });
+  $disableHighlightStyle() {
+    const {
+      tableElement
+    } = this.$lookup();
+    utils.addClassNamesToElement(tableElement, this.editor._config.theme.tableSelection);
+    this.hasHijackedSelectionStyles = true;
   }
-  updateTableTableSelection(selection) {
-    if (selection !== null && selection.tableKey === this.tableNodeKey) {
+  $updateTableTableSelection(selection) {
+    if (selection !== null) {
+      if (!(selection.tableKey === this.tableNodeKey)) {
+        throw Error(`TableObserver.$updateTableTableSelection: selection.tableKey !== this.tableNodeKey ('${selection.tableKey}' !== '${this.tableNodeKey}')`);
+      }
       const editor = this.editor;
       this.tableSelection = selection;
       this.isHighlightingCells = true;
-      this.disableHighlightStyle();
+      this.$disableHighlightStyle();
+      this.updateDOMSelection();
       $updateDOMForSelection(editor, this.table, this.tableSelection);
-    } else if (selection == null) {
-      this.clearHighlight();
     } else {
-      this.tableNodeKey = selection.tableKey;
-      this.updateTableTableSelection(selection);
+      this.$clearHighlight();
     }
   }
 
@@ -1610,120 +1702,165 @@ class TableObserver {
     }
     return false;
   }
-  setFocusCellForSelection(cell, ignoreStart = false) {
-    const editor = this.editor;
-    editor.update(() => {
-      const {
-        tableNode
-      } = this.$lookup();
-      const cellX = cell.x;
-      const cellY = cell.y;
-      this.focusCell = cell;
-      if (this.anchorCell !== null) {
-        const domSelection = getDOMSelection(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;
+
+  /**
+   * @internal
+   * When handling mousemove events we track what the focus cell should be, but
+   * the DOM selection may end up somewhere else entirely. We don't have an elegant
+   * way to handle this after the DOM selection has been resolved in a
+   * SELECTION_CHANGE_COMMAND callback.
+   */
+  setNextFocus(nextFocus) {
+    this.nextFocus = nextFocus;
+  }
+
+  /** @internal */
+  getAndClearNextFocus() {
+    const {
+      nextFocus
+    } = this;
+    if (nextFocus !== null) {
+      this.nextFocus = null;
+    }
+    return nextFocus;
+  }
+
+  /** @internal */
+  updateDOMSelection() {
+    if (this.anchorCell !== null && this.focusCell !== null) {
+      const domSelection = lexical.getDOMSelection(this.editor._window);
+      // We are not using a native selection for tables, and if we
+      // set one then the reconciler will undo it.
+      // TODO - it would make sense to have one so that native
+      //        copy/paste worked. Right now we have to emulate with
+      //        keyboard events but it won't fire if trigged from the menu
+      if (domSelection && domSelection.rangeCount > 0) {
+        domSelection.removeAllRanges();
       }
-      this.focusX = cellX;
-      this.focusY = cellY;
-      if (this.isHighlightingCells) {
-        const focusTableCellNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
-        if (this.tableSelection != null && this.anchorCellNodeKey != null && $isTableCellNode(focusTableCellNode) && tableNode.is($findTableNode(focusTableCellNode))) {
-          const focusNodeKey = focusTableCellNode.getKey();
-          this.tableSelection = this.tableSelection.clone() || $createTableSelection();
-          this.focusCellNodeKey = focusNodeKey;
-          this.tableSelection.set(this.tableNodeKey, this.anchorCellNodeKey, this.focusCellNodeKey);
-          lexical.$setSelection(this.tableSelection);
-          editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
-          $updateDOMForSelection(editor, this.table, this.tableSelection);
-        }
+    }
+  }
+  $setFocusCellForSelection(cell, ignoreStart = false) {
+    const editor = this.editor;
+    const {
+      tableNode
+    } = this.$lookup();
+    const cellX = cell.x;
+    const cellY = cell.y;
+    this.focusCell = cell;
+    if (!this.isHighlightingCells && (this.anchorX !== cellX || this.anchorY !== cellY || ignoreStart)) {
+      this.isHighlightingCells = true;
+      this.$disableHighlightStyle();
+    } else if (cellX === this.focusX && cellY === this.focusY) {
+      return false;
+    }
+    this.focusX = cellX;
+    this.focusY = cellY;
+    if (this.isHighlightingCells) {
+      const focusTableCellNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
+      if (this.tableSelection != null && this.anchorCellNodeKey != null && $isTableCellNode(focusTableCellNode) && tableNode.is($findTableNode(focusTableCellNode))) {
+        this.focusCellNodeKey = focusTableCellNode.getKey();
+        this.tableSelection = $createTableSelectionFrom(tableNode, this.$getAnchorTableCellOrThrow(), focusTableCellNode);
+        lexical.$setSelection(this.tableSelection);
+        editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
+        $updateDOMForSelection(editor, this.table, this.tableSelection);
+        return true;
       }
-    });
+    }
+    return false;
+  }
+  $getAnchorTableCell() {
+    return this.anchorCellNodeKey ? lexical.$getNodeByKey(this.anchorCellNodeKey) : null;
+  }
+  $getAnchorTableCellOrThrow() {
+    const anchorTableCell = this.$getAnchorTableCell();
+    if (!(anchorTableCell !== null)) {
+      throw Error(`TableObserver anchorTableCell is null`);
+    }
+    return anchorTableCell;
+  }
+  $getFocusTableCell() {
+    return this.focusCellNodeKey ? lexical.$getNodeByKey(this.focusCellNodeKey) : null;
+  }
+  $getFocusTableCellOrThrow() {
+    const focusTableCell = this.$getFocusTableCell();
+    if (!(focusTableCell !== null)) {
+      throw Error(`TableObserver focusTableCell is null`);
+    }
+    return focusTableCell;
   }
-  setAnchorCellForSelection(cell) {
+  $setAnchorCellForSelection(cell) {
     this.isHighlightingCells = false;
     this.anchorCell = cell;
     this.anchorX = cell.x;
     this.anchorY = cell.y;
-    this.editor.update(() => {
-      const anchorTableCellNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
-      if ($isTableCellNode(anchorTableCellNode)) {
-        const anchorNodeKey = anchorTableCellNode.getKey();
-        this.tableSelection = this.tableSelection != null ? this.tableSelection.clone() : $createTableSelection();
-        this.anchorCellNodeKey = anchorNodeKey;
-      }
-    });
+    const anchorTableCellNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
+    if ($isTableCellNode(anchorTableCellNode)) {
+      const anchorNodeKey = anchorTableCellNode.getKey();
+      this.tableSelection = this.tableSelection != null ? this.tableSelection.clone() : $createTableSelection();
+      this.anchorCellNodeKey = anchorNodeKey;
+    }
   }
-  formatCells(type) {
-    this.editor.update(() => {
-      const selection = lexical.$getSelection();
-      if (!$isTableSelection(selection)) {
-        {
-          throw Error(`Expected grid selection`);
-        }
-      }
-      const formatSelection = lexical.$createRangeSelection();
-      const anchor = formatSelection.anchor;
-      const focus = formatSelection.focus;
-      const cellNodes = selection.getNodes().filter($isTableCellNode);
-      const paragraph = cellNodes[0].getFirstChild();
-      const alignFormatWith = lexical.$isParagraphNode(paragraph) ? paragraph.getFormatFlags(type, null) : null;
-      cellNodes.forEach(cellNode => {
-        anchor.set(cellNode.getKey(), 0, 'element');
-        focus.set(cellNode.getKey(), cellNode.getChildrenSize(), 'element');
-        formatSelection.formatText(type, alignFormatWith);
-      });
-      lexical.$setSelection(selection);
-      this.editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
+  $formatCells(type) {
+    const selection = lexical.$getSelection();
+    if (!$isTableSelection(selection)) {
+      throw Error(`Expected Table selection`);
+    }
+    const formatSelection = lexical.$createRangeSelection();
+    const anchor = formatSelection.anchor;
+    const focus = formatSelection.focus;
+    const cellNodes = selection.getNodes().filter($isTableCellNode);
+    if (!(cellNodes.length > 0)) {
+      throw Error(`No table cells present`);
+    }
+    const paragraph = cellNodes[0].getFirstChild();
+    const alignFormatWith = lexical.$isParagraphNode(paragraph) ? paragraph.getFormatFlags(type, null) : null;
+    cellNodes.forEach(cellNode => {
+      anchor.set(cellNode.getKey(), 0, 'element');
+      focus.set(cellNode.getKey(), cellNode.getChildrenSize(), 'element');
+      formatSelection.formatText(type, alignFormatWith);
     });
+    lexical.$setSelection(selection);
+    this.editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
   }
-  clearText() {
-    const editor = this.editor;
-    editor.update(() => {
-      const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
-      if (!$isTableNode(tableNode)) {
-        throw new Error('Expected TableNode.');
-      }
-      const selection = lexical.$getSelection();
-      if (!$isTableSelection(selection)) {
-        {
-          throw Error(`Expected grid selection`);
-        }
+  $clearText() {
+    const {
+      editor
+    } = this;
+    const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
+    if (!$isTableNode(tableNode)) {
+      throw new Error('Expected TableNode.');
+    }
+    const selection = lexical.$getSelection();
+    if (!$isTableSelection(selection)) {
+      {
+        throw Error(`Expected grid selection`);
       }
-      const selectedNodes = selection.getNodes().filter($isTableCellNode);
-      if (selectedNodes.length === this.table.columns * this.table.rows) {
-        tableNode.selectPrevious();
-        // Delete entire table
-        tableNode.remove();
-        const rootNode = lexical.$getRoot();
-        rootNode.selectStart();
-        return;
+    }
+    const selectedNodes = selection.getNodes().filter($isTableCellNode);
+    if (selectedNodes.length === this.table.columns * this.table.rows) {
+      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();
+        const textNode = lexical.$createTextNode();
+        paragraphNode.append(textNode);
+        cellNode.append(paragraphNode);
+        cellNode.getChildren().forEach(child => {
+          if (child !== paragraphNode) {
+            child.remove();
+          }
+        });
       }
-      selectedNodes.forEach(cellNode => {
-        if (lexical.$isElementNode(cellNode)) {
-          const paragraphNode = lexical.$createParagraphNode();
-          const textNode = lexical.$createTextNode();
-          paragraphNode.append(textNode);
-          cellNode.append(paragraphNode);
-          cellNode.getChildren().forEach(child => {
-            if (child !== paragraphNode) {
-              child.remove();
-            }
-          });
-        }
-      });
-      $updateDOMForSelection(editor, this.table, null);
-      lexical.$setSelection(null);
-      editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
     });
+    $updateDOMForSelection(editor, this.table, null);
+    lexical.$setSelection(null);
+    editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
   }
 }
 
@@ -1736,7 +1873,6 @@ class TableObserver {
  */
 
 const LEXICAL_ELEMENT_KEY = '__lexicalTableSelection';
-const getDOMSelection = targetWindow => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
 const isMouseDownOnEvent = event => {
   return (event.buttons & 1) === 1;
 };
@@ -1750,64 +1886,103 @@ function getTableElement(tableNode, dom) {
   }
   return element;
 }
+function getEditorWindow(editor) {
+  return editor._window;
+}
+function $findParentTableCellNodeInTable(tableNode, node) {
+  for (let currentNode = node, lastTableCellNode = null; currentNode !== null; currentNode = currentNode.getParent()) {
+    if (tableNode.is(currentNode)) {
+      return lastTableCellNode;
+    } else if ($isTableCellNode(currentNode)) {
+      lastTableCellNode = currentNode;
+    }
+  }
+  return null;
+}
+const ARROW_KEY_COMMANDS_WITH_DIRECTION = [[lexical.KEY_ARROW_DOWN_COMMAND, 'down'], [lexical.KEY_ARROW_UP_COMMAND, 'up'], [lexical.KEY_ARROW_LEFT_COMMAND, 'backward'], [lexical.KEY_ARROW_RIGHT_COMMAND, 'forward']];
+const DELETE_TEXT_COMMANDS = [lexical.DELETE_WORD_COMMAND, lexical.DELETE_LINE_COMMAND, lexical.DELETE_CHARACTER_COMMAND];
+const DELETE_KEY_COMMANDS = [lexical.KEY_BACKSPACE_COMMAND, lexical.KEY_DELETE_COMMAND];
 function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
   const rootElement = editor.getRootElement();
-  if (rootElement === null) {
-    throw new Error('No root element.');
+  const editorWindow = getEditorWindow(editor);
+  if (!(rootElement !== null && editorWindow !== null)) {
+    throw Error(`applyTableHandlers: editor has no root element set`);
   }
   const tableObserver = new TableObserver(editor, tableNode.getKey());
-  const editorWindow = editor._window || window;
   const tableElement = getTableElement(tableNode, element);
   attachTableObserverToTableElement(tableElement, tableObserver);
   tableObserver.listenersToRemove.add(() => detatchTableObserverFromTableElement(tableElement, tableObserver));
   const createMouseHandlers = () => {
+    if (tableObserver.isSelecting) {
+      return;
+    }
     const onMouseUp = () => {
       tableObserver.isSelecting = false;
       editorWindow.removeEventListener('mouseup', onMouseUp);
       editorWindow.removeEventListener('mousemove', onMouseMove);
     };
     const onMouseMove = moveEvent => {
-      // delaying mousemove handler to allow selectionchange handler from LexicalEvents.ts to be executed first
-      setTimeout(() => {
-        if (!isMouseDownOnEvent(moveEvent) && tableObserver.isSelecting) {
-          tableObserver.isSelecting = false;
-          editorWindow.removeEventListener('mouseup', onMouseUp);
-          editorWindow.removeEventListener('mousemove', onMouseMove);
-          return;
-        }
-        const focusCell = getDOMCellFromTarget(moveEvent.target);
-        if (focusCell !== null && (tableObserver.anchorX !== focusCell.x || tableObserver.anchorY !== focusCell.y)) {
-          moveEvent.preventDefault();
-          tableObserver.setFocusCellForSelection(focusCell);
-        }
-      }, 0);
-    };
-    return {
-      onMouseMove,
-      onMouseUp
-    };
-  };
-  const onMouseDown = event => {
-    setTimeout(() => {
-      if (event.button !== 0) {
+      if (!isMouseDownOnEvent(moveEvent) && tableObserver.isSelecting) {
+        tableObserver.isSelecting = false;
+        editorWindow.removeEventListener('mouseup', onMouseUp);
+        editorWindow.removeEventListener('mousemove', onMouseMove);
         return;
       }
-      if (!editorWindow) {
-        return;
+      const override = !tableElement.contains(moveEvent.target);
+      let focusCell = null;
+      if (!override) {
+        focusCell = getDOMCellFromTarget(moveEvent.target);
+      } else {
+        for (const el of document.elementsFromPoint(moveEvent.clientX, moveEvent.clientY)) {
+          focusCell = tableElement.contains(el) ? getDOMCellFromTarget(el) : null;
+          if (focusCell) {
+            break;
+          }
+        }
       }
-      const anchorCell = getDOMCellFromTarget(event.target);
-      if (anchorCell !== null) {
-        stopEvent(event);
-        tableObserver.setAnchorCellForSelection(anchorCell);
+      if (focusCell && (tableObserver.focusCell === null || focusCell.elem !== tableObserver.focusCell.elem)) {
+        tableObserver.setNextFocus({
+          focusCell,
+          override
+        });
+        editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
       }
-      const {
-        onMouseUp,
-        onMouseMove
-      } = createMouseHandlers();
-      tableObserver.isSelecting = true;
-      editorWindow.addEventListener('mouseup', onMouseUp, tableObserver.listenerOptions);
-      editorWindow.addEventListener('mousemove', onMouseMove, tableObserver.listenerOptions);
-    }, 0);
+    };
+    tableObserver.isSelecting = true;
+    editorWindow.addEventListener('mouseup', onMouseUp, tableObserver.listenerOptions);
+    editorWindow.addEventListener('mousemove', onMouseMove, tableObserver.listenerOptions);
+  };
+  const onMouseDown = event => {
+    if (event.button !== 0) {
+      return;
+    }
+    if (!editorWindow) {
+      return;
+    }
+    const targetCell = getDOMCellFromTarget(event.target);
+    if (targetCell !== null) {
+      editor.update(() => {
+        const prevSelection = lexical.$getPreviousSelection();
+        // We can't trust Firefox to do the right thing with the selection and
+        // we don't have a proper state machine to do this "correctly" but
+        // if we go ahead and make the table selection now it will work
+        if (IS_FIREFOX && event.shiftKey && $isSelectionInTable(prevSelection, tableNode) && (lexical.$isRangeSelection(prevSelection) || $isTableSelection(prevSelection))) {
+          const prevAnchorNode = prevSelection.anchor.getNode();
+          const prevAnchorCell = $findParentTableCellNodeInTable(tableNode, prevSelection.anchor.getNode());
+          if (prevAnchorCell) {
+            tableObserver.$setAnchorCellForSelection($getObserverCellFromCellNodeOrThrow(tableObserver, prevAnchorCell));
+            tableObserver.$setFocusCellForSelection(targetCell);
+            stopEvent(event);
+          } else {
+            const newSelection = tableNode.isBefore(prevAnchorNode) ? tableNode.selectStart() : tableNode.selectEnd();
+            newSelection.anchor.set(prevSelection.anchor.key, prevSelection.anchor.offset, prevSelection.anchor.type);
+          }
+        } else {
+          tableObserver.$setAnchorCellForSelection(targetCell);
+        }
+      });
+    }
+    createMouseHandlers();
   };
   tableElement.addEventListener('mousedown', onMouseDown, tableObserver.listenerOptions);
 
@@ -1820,20 +1995,19 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
       const selection = lexical.$getSelection();
       const target = event.target;
       if ($isTableSelection(selection) && selection.tableKey === tableObserver.tableNodeKey && rootElement.contains(target)) {
-        tableObserver.clearHighlight();
+        tableObserver.$clearHighlight();
       }
     });
   };
   editorWindow.addEventListener('mousedown', mouseDownCallback, tableObserver.listenerOptions);
-  tableObserver.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, event => $handleArrowKey(editor, event, 'down', tableNode, tableObserver), lexical.COMMAND_PRIORITY_HIGH));
-  tableObserver.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, event => $handleArrowKey(editor, event, 'up', tableNode, tableObserver), lexical.COMMAND_PRIORITY_HIGH));
-  tableObserver.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_LEFT_COMMAND, event => $handleArrowKey(editor, event, 'backward', tableNode, tableObserver), lexical.COMMAND_PRIORITY_HIGH));
-  tableObserver.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_RIGHT_COMMAND, event => $handleArrowKey(editor, event, 'forward', tableNode, tableObserver), lexical.COMMAND_PRIORITY_HIGH));
+  for (const [command, direction] of ARROW_KEY_COMMANDS_WITH_DIRECTION) {
+    tableObserver.listenersToRemove.add(editor.registerCommand(command, event => $handleArrowKey(editor, event, direction, tableNode, tableObserver), lexical.COMMAND_PRIORITY_HIGH));
+  }
   tableObserver.listenersToRemove.add(editor.registerCommand(lexical.KEY_ESCAPE_COMMAND, event => {
     const selection = lexical.$getSelection();
     if ($isTableSelection(selection)) {
-      const focusCellNode = utils.$findMatchingParent(selection.focus.getNode(), $isTableCellNode);
-      if ($isTableCellNode(focusCellNode)) {
+      const focusCellNode = $findParentTableCellNodeInTable(tableNode, selection.focus.getNode());
+      if (focusCellNode !== null) {
         stopEvent(event);
         focusCellNode.selectEnd();
         return true;
@@ -1847,10 +2021,10 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
       return false;
     }
     if ($isTableSelection(selection)) {
-      tableObserver.clearText();
+      tableObserver.$clearText();
       return true;
     } else if (lexical.$isRangeSelection(selection)) {
-      const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+      const tableCellNode = $findParentTableCellNodeInTable(tableNode, selection.anchor.getNode());
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
@@ -1860,7 +2034,7 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
       const isFocusInside = tableNode.isParentOf(focusNode);
       const selectionContainsPartialTable = isAnchorInside && !isFocusInside || isFocusInside && !isAnchorInside;
       if (selectionContainsPartialTable) {
-        tableObserver.clearText();
+        tableObserver.$clearText();
         return true;
       }
       const nearestElementNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
@@ -1875,9 +2049,9 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
     }
     return false;
   };
-  [lexical.DELETE_WORD_COMMAND, lexical.DELETE_LINE_COMMAND, lexical.DELETE_CHARACTER_COMMAND].forEach(command => {
+  for (const command of DELETE_TEXT_COMMANDS) {
     tableObserver.listenersToRemove.add(editor.registerCommand(command, deleteTextHandler(command), lexical.COMMAND_PRIORITY_CRITICAL));
-  });
+  }
   const $deleteCellHandler = event => {
     const selection = lexical.$getSelection();
     if (!($isTableSelection(selection) || lexical.$isRangeSelection(selection))) {
@@ -1910,13 +2084,14 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
         event.preventDefault();
         event.stopPropagation();
       }
-      tableObserver.clearText();
+      tableObserver.$clearText();
       return true;
     }
     return false;
   };
-  tableObserver.listenersToRemove.add(editor.registerCommand(lexical.KEY_BACKSPACE_COMMAND, $deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
-  tableObserver.listenersToRemove.add(editor.registerCommand(lexical.KEY_DELETE_COMMAND, $deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
+  for (const command of DELETE_KEY_COMMANDS) {
+    tableObserver.listenersToRemove.add(editor.registerCommand(command, $deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
+  }
   tableObserver.listenersToRemove.add(editor.registerCommand(lexical.CUT_COMMAND, event => {
     const selection = lexical.$getSelection();
     if (selection) {
@@ -1941,7 +2116,7 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
       return false;
     }
     if ($isTableSelection(selection)) {
-      tableObserver.formatCells(payload);
+      tableObserver.$formatCells(payload);
       return true;
     } else if (lexical.$isRangeSelection(selection)) {
       const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
@@ -1962,13 +2137,18 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
       return false;
     }
     const [tableMap, anchorCell, focusCell] = $computeTableMap(tableNode, anchorNode, focusNode);
-    const maxRow = Math.max(anchorCell.startRow, focusCell.startRow);
-    const maxColumn = Math.max(anchorCell.startColumn, focusCell.startColumn);
+    const maxRow = Math.max(anchorCell.startRow + anchorCell.cell.__rowSpan - 1, focusCell.startRow + focusCell.cell.__rowSpan - 1);
+    const maxColumn = Math.max(anchorCell.startColumn + anchorCell.cell.__colSpan - 1, focusCell.startColumn + focusCell.cell.__colSpan - 1);
     const minRow = Math.min(anchorCell.startRow, focusCell.startRow);
     const minColumn = Math.min(anchorCell.startColumn, focusCell.startColumn);
+    const visited = new Set();
     for (let i = minRow; i <= maxRow; i++) {
       for (let j = minColumn; j <= maxColumn; j++) {
         const cell = tableMap[i][j].cell;
+        if (visited.has(cell)) {
+          continue;
+        }
+        visited.add(cell);
         cell.setFormat(formatType);
         const cellChildren = cell.getChildren();
         for (let k = 0; k < cellChildren.length; k++) {
@@ -1987,7 +2167,7 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
       return false;
     }
     if ($isTableSelection(selection)) {
-      tableObserver.clearHighlight();
+      tableObserver.$clearHighlight();
       return false;
     } else if (lexical.$isRangeSelection(selection)) {
       const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
@@ -2023,10 +2203,6 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
   tableObserver.listenersToRemove.add(editor.registerCommand(lexical.FOCUS_COMMAND, payload => {
     return tableNode.isSelected();
   }, lexical.COMMAND_PRIORITY_HIGH));
-  function getObserverCellFromCellNode(tableCellNode) {
-    const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableObserver.table);
-    return tableNode.getDOMCellFromCordsOrThrow(currentCords.x, currentCords.y, tableObserver.table);
-  }
   tableObserver.listenersToRemove.add(editor.registerCommand(lexical.SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, selectionPayload => {
     const {
       nodes,
@@ -2101,10 +2277,30 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
   tableObserver.listenersToRemove.add(editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, () => {
     const selection = lexical.$getSelection();
     const prevSelection = lexical.$getPreviousSelection();
+    const nextFocus = tableObserver.getAndClearNextFocus();
+    if (nextFocus !== null) {
+      const {
+        focusCell
+      } = nextFocus;
+      if ($isTableSelection(selection) && selection.tableKey === tableObserver.tableNodeKey) {
+        if (focusCell.x === tableObserver.focusX && focusCell.y === tableObserver.focusY) {
+          // The selection is already the correct table selection
+          return false;
+        } else {
+          tableObserver.$setFocusCellForSelection(focusCell);
+          return true;
+        }
+      } else if (focusCell !== tableObserver.anchorCell && $isSelectionInTable(selection, tableNode)) {
+        // The selection has crossed cells
+        tableObserver.$setFocusCellForSelection(focusCell);
+        return true;
+      }
+    }
+    const shouldCheckSelection = tableObserver.getAndClearShouldCheckSelection();
     // If they pressed the down arrow with the selection outside of the
     // table, and then the selection ends up in the table but not in the
     // first cell, then move the selection to the first cell.
-    if (tableObserver.getAndClearShouldCheckSelection() && lexical.$isRangeSelection(prevSelection) && lexical.$isRangeSelection(selection) && selection.isCollapsed()) {
+    if (shouldCheckSelection && lexical.$isRangeSelection(prevSelection) && lexical.$isRangeSelection(selection) && selection.isCollapsed()) {
       const anchor = selection.anchor.getNode();
       const firstRow = tableNode.getFirstChild();
       const anchorCell = $findCellNode(anchor);
@@ -2130,10 +2326,10 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
       const focusCellNode = $findCellNode(focusNode);
       const isAnchorInside = !!(anchorCellNode && tableNode.is($findTableNode(anchorCellNode)));
       const isFocusInside = !!(focusCellNode && tableNode.is($findTableNode(focusCellNode)));
-      const isPartialyWithinTable = isAnchorInside !== isFocusInside;
+      const isPartiallyWithinTable = isAnchorInside !== isFocusInside;
       const isWithinTable = isAnchorInside && isFocusInside;
       const isBackward = selection.isBackward();
-      if (isPartialyWithinTable) {
+      if (isPartiallyWithinTable) {
         const newSelection = selection.clone();
         if (isFocusInside) {
           const [tableMap] = $computeTableMap(tableNode, focusCellNode, focusCellNode);
@@ -2156,26 +2352,15 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
         $addHighlightStyleToTable(editor, tableObserver);
       } else if (isWithinTable) {
         // Handle case when selection spans across multiple cells but still
-        // has range selection, then we convert it into grid selection
+        // has range selection, then we convert it into table selection
         if (!anchorCellNode.is(focusCellNode)) {
-          tableObserver.setAnchorCellForSelection(getObserverCellFromCellNode(anchorCellNode));
-          tableObserver.setFocusCellForSelection(getObserverCellFromCellNode(focusCellNode), true);
-          if (!tableObserver.isSelecting) {
-            setTimeout(() => {
-              const {
-                onMouseUp,
-                onMouseMove
-              } = createMouseHandlers();
-              tableObserver.isSelecting = true;
-              editorWindow.addEventListener('mouseup', onMouseUp);
-              editorWindow.addEventListener('mousemove', onMouseMove);
-            }, 0);
-          }
+          tableObserver.$setAnchorCellForSelection($getObserverCellFromCellNodeOrThrow(tableObserver, anchorCellNode));
+          tableObserver.$setFocusCellForSelection($getObserverCellFromCellNodeOrThrow(tableObserver, focusCellNode), true);
         }
       }
     } else if (selection && $isTableSelection(selection) && selection.is(prevSelection) && selection.tableKey === tableNode.getKey()) {
       // if selection goes outside of the table we need to change it to Range selection
-      const domSelection = getDOMSelection(editor._window);
+      const domSelection = lexical.getDOMSelection(editorWindow);
       if (domSelection && domSelection.anchorNode && domSelection.focusNode) {
         const focusNode = lexical.$getNearestNodeFromDOMNode(domSelection.focusNode);
         const isFocusOutside = focusNode && !tableNode.is($findTableNode(focusNode));
@@ -2193,9 +2378,9 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
     }
     if (selection && !selection.is(prevSelection) && ($isTableSelection(selection) || $isTableSelection(prevSelection)) && tableObserver.tableSelection && !tableObserver.tableSelection.is(prevSelection)) {
       if ($isTableSelection(selection) && selection.tableKey === tableObserver.tableNodeKey) {
-        tableObserver.updateTableTableSelection(selection);
+        tableObserver.$updateTableTableSelection(selection);
       } else if (!$isTableSelection(selection) && $isTableSelection(prevSelection) && prevSelection.tableKey === tableObserver.tableNodeKey) {
-        tableObserver.updateTableTableSelection(null);
+        tableObserver.$updateTableTableSelection(null);
       }
       return false;
     }
@@ -2350,14 +2535,14 @@ function $forEachTableCell(grid, cb) {
   }
 }
 function $addHighlightStyleToTable(editor, tableSelection) {
-  tableSelection.disableHighlightStyle();
+  tableSelection.$disableHighlightStyle();
   $forEachTableCell(tableSelection.table, cell => {
     cell.highlighted = true;
     $addHighlightToDOM(editor, cell);
   });
 }
 function $removeHighlightStyleToTable(editor, tableObserver) {
-  tableObserver.enableHighlightStyle();
+  tableObserver.$enableHighlightStyle();
   $forEachTableCell(tableObserver.table, cell => {
     const elem = cell.elem;
     cell.highlighted = false;
@@ -2402,33 +2587,105 @@ const selectTableNodeInDirection = (tableObserver, tableNode, x, y, direction) =
       return false;
   }
 };
-const adjustFocusNodeInDirection = (tableObserver, tableNode, x, y, direction) => {
-  const isForward = direction === 'forward';
-  switch (direction) {
-    case 'backward':
-    case 'forward':
-      if (x !== (isForward ? tableObserver.table.columns - 1 : 0)) {
-        tableObserver.setFocusCellForSelection(tableNode.getDOMCellFromCordsOrThrow(x + (isForward ? 1 : -1), y, tableObserver.table));
-      }
-      return true;
-    case 'up':
-      if (y !== 0) {
-        tableObserver.setFocusCellForSelection(tableNode.getDOMCellFromCordsOrThrow(x, y - 1, tableObserver.table));
-        return true;
-      } else {
-        return false;
-      }
-    case 'down':
-      if (y !== tableObserver.table.rows - 1) {
-        tableObserver.setFocusCellForSelection(tableNode.getDOMCellFromCordsOrThrow(x, y + 1, tableObserver.table));
-        return true;
-      } else {
-        return false;
-      }
-    default:
-      return false;
+function getCorner(rect, cellValue) {
+  let colName;
+  let rowName;
+  if (cellValue.startColumn === rect.minColumn) {
+    colName = 'minColumn';
+  } else if (cellValue.startColumn + cellValue.cell.__colSpan - 1 === rect.maxColumn) {
+    colName = 'maxColumn';
+  } else {
+    return null;
   }
-};
+  if (cellValue.startRow === rect.minRow) {
+    rowName = 'minRow';
+  } else if (cellValue.startRow + cellValue.cell.__rowSpan - 1 === rect.maxRow) {
+    rowName = 'maxRow';
+  } else {
+    return null;
+  }
+  return [colName, rowName];
+}
+function getCornerOrThrow(rect, cellValue) {
+  const corner = getCorner(rect, cellValue);
+  if (!(corner !== null)) {
+    throw Error(`getCornerOrThrow: cell ${cellValue.cell.getKey()} is not at a corner of rect`);
+  }
+  return corner;
+}
+function oppositeCorner([colName, rowName]) {
+  return [colName === 'minColumn' ? 'maxColumn' : 'minColumn', rowName === 'minRow' ? 'maxRow' : 'minRow'];
+}
+function cellAtCornerOrThrow(tableMap, rect, [colName, rowName]) {
+  const rowNum = rect[rowName];
+  const rowMap = tableMap[rowNum];
+  if (!(rowMap !== undefined)) {
+    throw Error(`cellAtCornerOrThrow: ${rowName} = ${String(rowNum)} missing in tableMap`);
+  }
+  const colNum = rect[colName];
+  const cell = rowMap[colNum];
+  if (!(cell !== undefined)) {
+    throw Error(`cellAtCornerOrThrow: ${colName} = ${String(colNum)} missing in tableMap`);
+  }
+  return cell;
+}
+function $extractRectCorners(tableMap, anchorCellValue, newFocusCellValue) {
+  // We are sure that the focus now either contracts or expands the rect
+  // but both the anchor and focus might be moved to ensure a rectangle
+  // given a potentially ragged merge shape
+  const rect = $computeTableCellRectBoundary(tableMap, anchorCellValue, newFocusCellValue);
+  const anchorCorner = getCorner(rect, anchorCellValue);
+  if (anchorCorner) {
+    return [cellAtCornerOrThrow(tableMap, rect, anchorCorner), cellAtCornerOrThrow(tableMap, rect, oppositeCorner(anchorCorner))];
+  }
+  const newFocusCorner = getCorner(rect, newFocusCellValue);
+  if (newFocusCorner) {
+    return [cellAtCornerOrThrow(tableMap, rect, oppositeCorner(newFocusCorner)), cellAtCornerOrThrow(tableMap, rect, newFocusCorner)];
+  }
+  // TODO this doesn't have to be arbitrary, use the closest corner instead
+  const newAnchorCorner = ['minColumn', 'minRow'];
+  return [cellAtCornerOrThrow(tableMap, rect, newAnchorCorner), cellAtCornerOrThrow(tableMap, rect, oppositeCorner(newAnchorCorner))];
+}
+function $adjustFocusInDirection(tableObserver, tableMap, anchorCellValue, focusCellValue, direction) {
+  const rect = $computeTableCellRectBoundary(tableMap, anchorCellValue, focusCellValue);
+  const spans = $computeTableCellRectSpans(tableMap, rect);
+  const {
+    topSpan,
+    leftSpan,
+    bottomSpan,
+    rightSpan
+  } = spans;
+  const anchorCorner = getCornerOrThrow(rect, anchorCellValue);
+  const [focusColumn, focusRow] = oppositeCorner(anchorCorner);
+  let fCol = rect[focusColumn];
+  let fRow = rect[focusRow];
+  if (direction === 'forward') {
+    fCol += focusColumn === 'maxColumn' ? 1 : leftSpan;
+  } else if (direction === 'backward') {
+    fCol -= focusColumn === 'minColumn' ? 1 : rightSpan;
+  } else if (direction === 'down') {
+    fRow += focusRow === 'maxRow' ? 1 : topSpan;
+  } else if (direction === 'up') {
+    fRow -= focusRow === 'minRow' ? 1 : bottomSpan;
+  }
+  const targetRowMap = tableMap[fRow];
+  if (targetRowMap === undefined) {
+    return false;
+  }
+  const newFocusCellValue = targetRowMap[fCol];
+  if (newFocusCellValue === undefined) {
+    return false;
+  }
+  // We can be certain that anchorCellValue and newFocusCellValue are
+  // contained within the desired selection, but we are not certain if
+  // they need to be expanded or not to maintain a rectangular shape
+  const [finalAnchorCell, finalFocusCell] = $extractRectCorners(tableMap, anchorCellValue, newFocusCellValue);
+  const anchorDOM = $getObserverCellFromCellNodeOrThrow(tableObserver, finalAnchorCell.cell);
+  const focusDOM = $getObserverCellFromCellNodeOrThrow(tableObserver, finalFocusCell.cell);
+  tableObserver.$setAnchorCellForSelection(anchorDOM);
+  tableObserver.$setFocusCellForSelection(focusDOM, true);
+  return true;
+}
 function $isSelectionInTable(selection, tableNode) {
   if (lexical.$isRangeSelection(selection) || $isTableSelection(selection)) {
     const isAnchorInside = tableNode.isParentOf(selection.anchor.getNode());
@@ -2444,20 +2701,14 @@ function selectTableCellNode(tableCell, fromStart) {
     tableCell.selectEnd();
   }
 }
-const BROWSER_BLUE_RGB = '172,206,247';
 function $addHighlightToDOM(editor, cell) {
   const element = cell.elem;
+  const editorThemeClasses = editor._config.theme;
   const node = lexical.$getNearestNodeFromDOMNode(element);
   if (!$isTableCellNode(node)) {
     throw Error(`Expected to find LexicalNode from Table Cell DOMNode`);
   }
-  const backgroundColor = node.getBackgroundColor();
-  if (backgroundColor === null) {
-    element.style.setProperty('background-color', `rgb(${BROWSER_BLUE_RGB})`);
-  } else {
-    element.style.setProperty('background-image', `linear-gradient(to right, rgba(${BROWSER_BLUE_RGB},0.85), rgba(${BROWSER_BLUE_RGB},0.85))`);
-  }
-  element.style.setProperty('caret-color', 'transparent');
+  utils.addClassNamesToElement(element, editorThemeClasses.tableCellSelected);
 }
 function $removeHighlightFromDOM(editor, cell) {
   const element = cell.elem;
@@ -2465,12 +2716,8 @@ function $removeHighlightFromDOM(editor, cell) {
   if (!$isTableCellNode(node)) {
     throw Error(`Expected to find LexicalNode from Table Cell DOMNode`);
   }
-  const backgroundColor = node.getBackgroundColor();
-  if (backgroundColor === null) {
-    element.style.removeProperty('background-color');
-  }
-  element.style.removeProperty('background-image');
-  element.style.removeProperty('caret-color');
+  const editorThemeClasses = editor._config.theme;
+  utils.removeClassNamesFromElement(element, editorThemeClasses.tableCellSelected);
 }
 function $findCellNode(node) {
   const cellNode = utils.$findMatchingParent(node, $isTableCellNode);
@@ -2561,8 +2808,8 @@ function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
               const lastCellCoords = tableNode.getCordsFromCellNode(lastCellNode, tableObserver.table);
               const firstCellDOM = tableNode.getDOMCellFromCordsOrThrow(firstCellCoords.x, firstCellCoords.y, tableObserver.table);
               const lastCellDOM = tableNode.getDOMCellFromCordsOrThrow(lastCellCoords.x, lastCellCoords.y, tableObserver.table);
-              tableObserver.setAnchorCellForSelection(firstCellDOM);
-              tableObserver.setFocusCellForSelection(lastCellDOM, true);
+              tableObserver.$setAnchorCellForSelection(firstCellDOM);
+              tableObserver.$setFocusCellForSelection(lastCellDOM, true);
               return true;
             }
           }
@@ -2629,7 +2876,7 @@ function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
         return false;
       }
       if (isExitingTableAnchor(anchorType, anchorOffset, anchorNode, direction)) {
-        return $handleTableExit(event, anchorNode, tableNode, direction);
+        return $handleTableExit(event, anchorNode, anchorCellNode, tableNode, direction);
       }
       return false;
     }
@@ -2642,7 +2889,7 @@ function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
     if (anchor.type === 'element') {
       edgeSelectionRect = anchorDOM.getBoundingClientRect();
     } else {
-      const domSelection = window.getSelection();
+      const domSelection = lexical.getDOMSelection(getEditorWindow(editor));
       if (domSelection === null || domSelection.rangeCount === 0) {
         return false;
       }
@@ -2664,8 +2911,8 @@ function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
       const cords = tableNode.getCordsFromCellNode(anchorCellNode, tableObserver.table);
       if (event.shiftKey) {
         const cell = tableNode.getDOMCellFromCordsOrThrow(cords.x, cords.y, tableObserver.table);
-        tableObserver.setAnchorCellForSelection(cell);
-        tableObserver.setFocusCellForSelection(cell, true);
+        tableObserver.$setAnchorCellForSelection(cell);
+        tableObserver.$setFocusCellForSelection(cell, true);
       } else {
         return selectTableNodeInDirection(tableObserver, tableNode, cords.x, cords.y, direction);
       }
@@ -2686,15 +2933,15 @@ function $handleArrowKey(editor, event, direction, tableNode, tableObserver) {
     if (!$isTableCellNode(anchorCellNode) || !$isTableCellNode(focusCellNode) || !$isTableNode(tableNodeFromSelection) || tableElement == null) {
       return false;
     }
-    tableObserver.updateTableTableSelection(selection);
+    tableObserver.$updateTableTableSelection(selection);
     const grid = getTable(tableNodeFromSelection, tableElement);
     const cordsAnchor = tableNode.getCordsFromCellNode(anchorCellNode, grid);
     const anchorCell = tableNode.getDOMCellFromCordsOrThrow(cordsAnchor.x, cordsAnchor.y, grid);
-    tableObserver.setAnchorCellForSelection(anchorCell);
+    tableObserver.$setAnchorCellForSelection(anchorCell);
     stopEvent(event);
     if (event.shiftKey) {
-      const cords = tableNode.getCordsFromCellNode(focusCellNode, grid);
-      return adjustFocusNodeInDirection(tableObserver, tableNodeFromSelection, cords.x, cords.y, direction);
+      const [tableMap, anchorValue, focusValue] = $computeTableMap(tableNode, anchorCellNode, focusCellNode);
+      return $adjustFocusInDirection(tableObserver, tableMap, anchorValue, focusValue, direction);
     } else {
       focusCellNode.selectEnd();
     }
@@ -2730,11 +2977,7 @@ function $isExitingTableTextAnchor(type, offset, anchorNode, direction) {
   const hasValidOffset = direction === 'backward' ? offset === 0 : offset === anchorNode.getTextContentSize();
   return type === 'text' && hasValidOffset && (direction === 'backward' ? parentNode.getPreviousSibling() === null : parentNode.getNextSibling() === null);
 }
-function $handleTableExit(event, anchorNode, tableNode, direction) {
-  const anchorCellNode = utils.$findMatchingParent(anchorNode, $isTableCellNode);
-  if (!$isTableCellNode(anchorCellNode)) {
-    return false;
-  }
+function $handleTableExit(event, anchorNode, anchorCellNode, tableNode, direction) {
   const [tableMap, cellValue] = $computeTableMap(tableNode, anchorCellNode, anchorCellNode);
   if (!isExitingCell(tableMap, cellValue, direction)) {
     return false;
@@ -2785,7 +3028,7 @@ function $getTableEdgeCursorPosition(editor, selection, tableNode) {
   }
 
   // TODO: Add support for nested tables
-  const domSelection = window.getSelection();
+  const domSelection = lexical.getDOMSelection(getEditorWindow(editor));
   if (!domSelection) {
     return undefined;
   }
@@ -2825,6 +3068,13 @@ function $getTableEdgeCursorPosition(editor, selection, tableNode) {
     return undefined;
   }
 }
+function $getObserverCellFromCellNodeOrThrow(tableObserver, tableCellNode) {
+  const {
+    tableNode
+  } = tableObserver.$lookup();
+  const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableObserver.table);
+  return tableNode.getDOMCellFromCordsOrThrow(currentCords.x, currentCords.y, tableObserver.table);
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.