@lexical/table 0.17.2-nightly.20240906.0 → 0.17.2-nightly.20240909.0

package/LexicalTable.dev.js

@@ -56,10 +56,12 @@ class TableCellNode extends lexical.ElementNode {
     return 'tablecell';
   }
   static clone(node) {
-    const cellNode = new TableCellNode(node.__headerState, node.__colSpan, node.__width, node.__key);
-    cellNode.__rowSpan = node.__rowSpan;
-    cellNode.__backgroundColor = node.__backgroundColor;
-    return cellNode;
+    return new TableCellNode(node.__headerState, node.__colSpan, node.__width, node.__key);
+  }
+  afterCloneFrom(node) {
+    super.afterCloneFrom(node);
+    this.__rowSpan = node.__rowSpan;
+    this.__backgroundColor = node.__backgroundColor;
   }
   static importDOM() {
     return {
@@ -76,10 +78,7 @@ class TableCellNode extends lexical.ElementNode {
   static importJSON(serializedNode) {
     const colSpan = serializedNode.colSpan || 1;
     const rowSpan = serializedNode.rowSpan || 1;
-    const cellNode = $createTableCellNode(serializedNode.headerState, colSpan, serializedNode.width || undefined);
-    cellNode.__rowSpan = rowSpan;
-    cellNode.__backgroundColor = serializedNode.backgroundColor || null;
-    return cellNode;
+    return $createTableCellNode(serializedNode.headerState, colSpan, serializedNode.width || undefined).setRowSpan(rowSpan).setBackgroundColor(serializedNode.backgroundColor || null);
   }
   constructor(headerState = TableCellHeaderStates.NO_STATUS, colSpan = 1, width, key) {
     super(key);
@@ -145,26 +144,28 @@ class TableCellNode extends lexical.ElementNode {
     };
   }
   getColSpan() {
-    return this.__colSpan;
+    return this.getLatest().__colSpan;
   }
   setColSpan(colSpan) {
-    this.getWritable().__colSpan = colSpan;
-    return this;
+    const self = this.getWritable();
+    self.__colSpan = colSpan;
+    return self;
   }
   getRowSpan() {
-    return this.__rowSpan;
+    return this.getLatest().__rowSpan;
   }
   setRowSpan(rowSpan) {
-    this.getWritable().__rowSpan = rowSpan;
-    return this;
+    const self = this.getWritable();
+    self.__rowSpan = rowSpan;
+    return self;
   }
   getTag() {
     return this.hasHeader() ? 'th' : 'td';
   }
-  setHeaderStyles(headerState) {
+  setHeaderStyles(headerState, mask = TableCellHeaderStates.BOTH) {
     const self = this.getWritable();
-    self.__headerState = headerState;
-    return this.__headerState;
+    self.__headerState = headerState & mask | self.__headerState & ~mask;
+    return self;
   }
   getHeaderStyles() {
     return this.getLatest().__headerState;
@@ -172,7 +173,7 @@ class TableCellNode extends lexical.ElementNode {
   setWidth(width) {
     const self = this.getWritable();
     self.__width = width;
-    return this.__width;
+    return self;
   }
   getWidth() {
     return this.getLatest().__width;
@@ -181,7 +182,9 @@ class TableCellNode extends lexical.ElementNode {
     return this.getLatest().__backgroundColor;
   }
   setBackgroundColor(newBackgroundColor) {
-    this.getWritable().__backgroundColor = newBackgroundColor;
+    const self = this.getWritable();
+    self.__backgroundColor = newBackgroundColor;
+    return self;
   }
   toggleHeaderStyle(headerStateToToggle) {
     const self = this.getWritable();
@@ -769,7 +772,7 @@ function $deleteTableRow__EXPERIMENTAL() {
     }
     const rowNode = grid.getChildAtIndex(row);
     if (!$isTableRowNode(rowNode)) {
-      throw Error(`Expected GridNode childAtIndex(${String(row)}) to be RowNode`);
+      throw Error(`Expected TableNode childAtIndex(${String(row)}) to be RowNode`);
     }
     rowNode.remove();
   }
@@ -879,18 +882,44 @@ function $unmergeCell() {
   const [cell, row, grid] = $getNodeTriplet(anchor);
   const colSpan = cell.__colSpan;
   const rowSpan = cell.__rowSpan;
+  if (colSpan === 1 && rowSpan === 1) {
+    return;
+  }
+  const [map, cellMap] = $computeTableMap(grid, cell, cell);
+  const {
+    startColumn,
+    startRow
+  } = cellMap;
+  // Create a heuristic for what the style of the unmerged cells should be
+  // based on whether every row or column already had that state before the
+  // unmerge.
+  const baseColStyle = cell.__headerState & TableCellHeaderStates.COLUMN;
+  const colStyles = Array.from({
+    length: colSpan
+  }, (_v, i) => {
+    let colStyle = baseColStyle;
+    for (let rowIdx = 0; colStyle !== 0 && rowIdx < map.length; rowIdx++) {
+      colStyle &= map[rowIdx][i + startColumn].cell.__headerState;
+    }
+    return colStyle;
+  });
+  const baseRowStyle = cell.__headerState & TableCellHeaderStates.ROW;
+  const rowStyles = Array.from({
+    length: rowSpan
+  }, (_v, i) => {
+    let rowStyle = baseRowStyle;
+    for (let colIdx = 0; rowStyle !== 0 && colIdx < map[0].length; colIdx++) {
+      rowStyle &= map[i + startRow][colIdx].cell.__headerState;
+    }
+    return rowStyle;
+  });
   if (colSpan > 1) {
     for (let i = 1; i < colSpan; i++) {
-      cell.insertAfter($createTableCellNode(TableCellHeaderStates.NO_STATUS).append(lexical.$createParagraphNode()));
+      cell.insertAfter($createTableCellNode(colStyles[i] | rowStyles[0]).append(lexical.$createParagraphNode()));
     }
     cell.setColSpan(1);
   }
   if (rowSpan > 1) {
-    const [map, cellMap] = $computeTableMap(grid, cell, cell);
-    const {
-      startColumn,
-      startRow
-    } = cellMap;
     let currentRowNode;
     for (let i = 1; i < rowSpan; i++) {
       const currentRow = startRow + i;
@@ -911,12 +940,12 @@ function $unmergeCell() {
         }
       }
       if (insertAfterCell === null) {
-        for (let j = 0; j < colSpan; j++) {
-          $insertFirst(currentRowNode, $createTableCellNode(TableCellHeaderStates.NO_STATUS).append(lexical.$createParagraphNode()));
+        for (let j = colSpan - 1; j >= 0; j--) {
+          $insertFirst(currentRowNode, $createTableCellNode(colStyles[j] | rowStyles[i]).append(lexical.$createParagraphNode()));
         }
       } else {
-        for (let j = 0; j < colSpan; j++) {
-          insertAfterCell.insertAfter($createTableCellNode(TableCellHeaderStates.NO_STATUS).append(lexical.$createParagraphNode()));
+        for (let j = colSpan - 1; j >= 0; j--) {
+          insertAfterCell.insertAfter($createTableCellNode(colStyles[j] | rowStyles[i]).append(lexical.$createParagraphNode()));
         }
       }
     }
@@ -926,10 +955,10 @@ function $unmergeCell() {
 function $computeTableMap(grid, cellA, cellB) {
   const [tableMap, cellAValue, cellBValue] = $computeTableMapSkipCellCheck(grid, cellA, cellB);
   if (!(cellAValue !== null)) {
-    throw Error(`Anchor not found in Grid`);
+    throw Error(`Anchor not found in Table`);
   }
   if (!(cellBValue !== null)) {
-    throw Error(`Focus not found in Grid`);
+    throw Error(`Focus not found in Table`);
   }
   return [tableMap, cellAValue, cellBValue];
 }
@@ -937,49 +966,58 @@ function $computeTableMapSkipCellCheck(grid, cellA, cellB) {
   const tableMap = [];
   let cellAValue = null;
   let cellBValue = null;
-  function write(startRow, startColumn, cell) {
-    const value = {
-      cell,
-      startColumn,
-      startRow
-    };
-    const rowSpan = cell.__rowSpan;
-    const colSpan = cell.__colSpan;
-    for (let i = 0; i < rowSpan; i++) {
-      if (tableMap[startRow + i] === undefined) {
-        tableMap[startRow + i] = [];
-      }
-      for (let j = 0; j < colSpan; j++) {
-        tableMap[startRow + i][startColumn + j] = value;
-      }
-    }
-    if (cellA !== null && cellA.is(cell)) {
-      cellAValue = value;
-    }
-    if (cellB !== null && cellB.is(cell)) {
-      cellBValue = value;
+  function getMapRow(i) {
+    let row = tableMap[i];
+    if (row === undefined) {
+      tableMap[i] = row = [];
     }
-  }
-  function isEmpty(row, column) {
-    return tableMap[row] === undefined || tableMap[row][column] === undefined;
+    return row;
   }
   const gridChildren = grid.getChildren();
-  for (let i = 0; i < gridChildren.length; i++) {
-    const row = gridChildren[i];
+  for (let rowIdx = 0; rowIdx < gridChildren.length; rowIdx++) {
+    const row = gridChildren[rowIdx];
     if (!$isTableRowNode(row)) {
-      throw Error(`Expected GridNode children to be TableRowNode`);
+      throw Error(`Expected TableNode children to be TableRowNode`);
     }
-    const rowChildren = row.getChildren();
-    let j = 0;
-    for (const cell of rowChildren) {
+    for (let cell = row.getFirstChild(), colIdx = 0; cell != null; cell = cell.getNextSibling()) {
       if (!$isTableCellNode(cell)) {
         throw Error(`Expected TableRowNode children to be TableCellNode`);
+      } // Skip past any columns that were merged from a higher row
+      const startMapRow = getMapRow(rowIdx);
+      while (startMapRow[colIdx] !== undefined) {
+        colIdx++;
       }
-      while (!isEmpty(i, j)) {
-        j++;
+      const value = {
+        cell,
+        startColumn: colIdx,
+        startRow: rowIdx
+      };
+      const {
+        __rowSpan: rowSpan,
+        __colSpan: colSpan
+      } = cell;
+      for (let j = 0; j < rowSpan; j++) {
+        if (rowIdx + j >= gridChildren.length) {
+          // The table is non-rectangular with a rowSpan
+          // below the last <tr> in the table.
+          // We should probably handle this with a node transform
+          // to ensure that tables are always rectangular but this
+          // will avoid crashes such as #6584
+          // Note that there are probably still latent bugs
+          // regarding colSpan or general cell count mismatches.
+          break;
+        }
+        const mapRow = getMapRow(rowIdx + j);
+        for (let i = 0; i < colSpan; i++) {
+          mapRow[colIdx + i] = value;
+        }
+      }
+      if (cellA !== null && cellAValue === null && cellA.is(cell)) {
+        cellAValue = value;
+      }
+      if (cellB !== null && cellBValue === null && cellB.is(cell)) {
+        cellBValue = value;
       }
-      write(i, j, cell);
-      j += cell.__colSpan;
     }
   }
   return [tableMap, cellAValue, cellBValue];
@@ -1007,7 +1045,7 @@ function $getNodeTriplet(source) {
   }
   const grid = row.getParent();
   if (!$isTableNode(grid)) {
-    throw Error(`Expected TableRowNode to have a parent GridNode`);
+    throw Error(`Expected TableRowNode to have a parent TableNode`);
   }
   return [cell, row, grid];
 }
@@ -1149,9 +1187,9 @@ class TableSelection {
       throw Error(`getCellRect: expected to find focusCellNode`);
     }
     const startX = Math.min(anchorCellNodeRect.columnIndex, focusCellNodeRect.columnIndex);
-    const stopX = Math.max(anchorCellNodeRect.columnIndex, focusCellNodeRect.columnIndex);
+    const stopX = Math.max(anchorCellNodeRect.columnIndex + anchorCellNodeRect.colSpan - 1, focusCellNodeRect.columnIndex + focusCellNodeRect.colSpan - 1);
     const startY = Math.min(anchorCellNodeRect.rowIndex, focusCellNodeRect.rowIndex);
-    const stopY = Math.max(anchorCellNodeRect.rowIndex, focusCellNodeRect.rowIndex);
+    const stopY = Math.max(anchorCellNodeRect.rowIndex + anchorCellNodeRect.rowSpan - 1, focusCellNodeRect.rowIndex + focusCellNodeRect.rowSpan - 1);
     return {
       fromX: Math.min(startX, stopX),
       fromY: Math.min(startY, stopY),
@@ -1265,7 +1303,10 @@ class TableSelection {
         exploredMaxRow = nextRow;
       }
     }
-    const nodes = [tableNode];
+
+    // We use a Map here because merged cells in the grid would otherwise
+    // show up multiple times in the nodes array
+    const nodeMap = new Map([[tableNode.getKey(), tableNode]]);
     let lastRow = null;
     for (let i = minRow; i <= maxRow; i++) {
       for (let j = minColumn; j <= maxColumn; j++) {
@@ -1277,12 +1318,16 @@ class TableSelection {
           throw Error(`Expected TableCellNode parent to be a TableRowNode`);
         }
         if (currentRow !== lastRow) {
-          nodes.push(currentRow);
+          nodeMap.set(currentRow.getKey(), currentRow);
+        }
+        nodeMap.set(cell.getKey(), cell);
+        for (const child of $getChildrenRecursively(cell)) {
+          nodeMap.set(child.getKey(), child);
         }
-        nodes.push(cell, ...$getChildrenRecursively(cell));
         lastRow = currentRow;
       }
     }
+    const nodes = Array.from(nodeMap.values());
     if (!lexical.isCurrentlyReadOnlyMode()) {
       this._cachedNodes = nodes;
     }

package/LexicalTable.dev.mjs

@@ -54,10 +54,12 @@ class TableCellNode extends ElementNode {
     return 'tablecell';
   }
   static clone(node) {
-    const cellNode = new TableCellNode(node.__headerState, node.__colSpan, node.__width, node.__key);
-    cellNode.__rowSpan = node.__rowSpan;
-    cellNode.__backgroundColor = node.__backgroundColor;
-    return cellNode;
+    return new TableCellNode(node.__headerState, node.__colSpan, node.__width, node.__key);
+  }
+  afterCloneFrom(node) {
+    super.afterCloneFrom(node);
+    this.__rowSpan = node.__rowSpan;
+    this.__backgroundColor = node.__backgroundColor;
   }
   static importDOM() {
     return {
@@ -74,10 +76,7 @@ class TableCellNode extends ElementNode {
   static importJSON(serializedNode) {
     const colSpan = serializedNode.colSpan || 1;
     const rowSpan = serializedNode.rowSpan || 1;
-    const cellNode = $createTableCellNode(serializedNode.headerState, colSpan, serializedNode.width || undefined);
-    cellNode.__rowSpan = rowSpan;
-    cellNode.__backgroundColor = serializedNode.backgroundColor || null;
-    return cellNode;
+    return $createTableCellNode(serializedNode.headerState, colSpan, serializedNode.width || undefined).setRowSpan(rowSpan).setBackgroundColor(serializedNode.backgroundColor || null);
   }
   constructor(headerState = TableCellHeaderStates.NO_STATUS, colSpan = 1, width, key) {
     super(key);
@@ -143,26 +142,28 @@ class TableCellNode extends ElementNode {
     };
   }
   getColSpan() {
-    return this.__colSpan;
+    return this.getLatest().__colSpan;
   }
   setColSpan(colSpan) {
-    this.getWritable().__colSpan = colSpan;
-    return this;
+    const self = this.getWritable();
+    self.__colSpan = colSpan;
+    return self;
   }
   getRowSpan() {
-    return this.__rowSpan;
+    return this.getLatest().__rowSpan;
   }
   setRowSpan(rowSpan) {
-    this.getWritable().__rowSpan = rowSpan;
-    return this;
+    const self = this.getWritable();
+    self.__rowSpan = rowSpan;
+    return self;
   }
   getTag() {
     return this.hasHeader() ? 'th' : 'td';
   }
-  setHeaderStyles(headerState) {
+  setHeaderStyles(headerState, mask = TableCellHeaderStates.BOTH) {
     const self = this.getWritable();
-    self.__headerState = headerState;
-    return this.__headerState;
+    self.__headerState = headerState & mask | self.__headerState & ~mask;
+    return self;
   }
   getHeaderStyles() {
     return this.getLatest().__headerState;
@@ -170,7 +171,7 @@ class TableCellNode extends ElementNode {
   setWidth(width) {
     const self = this.getWritable();
     self.__width = width;
-    return this.__width;
+    return self;
   }
   getWidth() {
     return this.getLatest().__width;
@@ -179,7 +180,9 @@ class TableCellNode extends ElementNode {
     return this.getLatest().__backgroundColor;
   }
   setBackgroundColor(newBackgroundColor) {
-    this.getWritable().__backgroundColor = newBackgroundColor;
+    const self = this.getWritable();
+    self.__backgroundColor = newBackgroundColor;
+    return self;
   }
   toggleHeaderStyle(headerStateToToggle) {
     const self = this.getWritable();
@@ -767,7 +770,7 @@ function $deleteTableRow__EXPERIMENTAL() {
     }
     const rowNode = grid.getChildAtIndex(row);
     if (!$isTableRowNode(rowNode)) {
-      throw Error(`Expected GridNode childAtIndex(${String(row)}) to be RowNode`);
+      throw Error(`Expected TableNode childAtIndex(${String(row)}) to be RowNode`);
     }
     rowNode.remove();
   }
@@ -877,18 +880,44 @@ function $unmergeCell() {
   const [cell, row, grid] = $getNodeTriplet(anchor);
   const colSpan = cell.__colSpan;
   const rowSpan = cell.__rowSpan;
+  if (colSpan === 1 && rowSpan === 1) {
+    return;
+  }
+  const [map, cellMap] = $computeTableMap(grid, cell, cell);
+  const {
+    startColumn,
+    startRow
+  } = cellMap;
+  // Create a heuristic for what the style of the unmerged cells should be
+  // based on whether every row or column already had that state before the
+  // unmerge.
+  const baseColStyle = cell.__headerState & TableCellHeaderStates.COLUMN;
+  const colStyles = Array.from({
+    length: colSpan
+  }, (_v, i) => {
+    let colStyle = baseColStyle;
+    for (let rowIdx = 0; colStyle !== 0 && rowIdx < map.length; rowIdx++) {
+      colStyle &= map[rowIdx][i + startColumn].cell.__headerState;
+    }
+    return colStyle;
+  });
+  const baseRowStyle = cell.__headerState & TableCellHeaderStates.ROW;
+  const rowStyles = Array.from({
+    length: rowSpan
+  }, (_v, i) => {
+    let rowStyle = baseRowStyle;
+    for (let colIdx = 0; rowStyle !== 0 && colIdx < map[0].length; colIdx++) {
+      rowStyle &= map[i + startRow][colIdx].cell.__headerState;
+    }
+    return rowStyle;
+  });
   if (colSpan > 1) {
     for (let i = 1; i < colSpan; i++) {
-      cell.insertAfter($createTableCellNode(TableCellHeaderStates.NO_STATUS).append($createParagraphNode()));
+      cell.insertAfter($createTableCellNode(colStyles[i] | rowStyles[0]).append($createParagraphNode()));
     }
     cell.setColSpan(1);
   }
   if (rowSpan > 1) {
-    const [map, cellMap] = $computeTableMap(grid, cell, cell);
-    const {
-      startColumn,
-      startRow
-    } = cellMap;
     let currentRowNode;
     for (let i = 1; i < rowSpan; i++) {
       const currentRow = startRow + i;
@@ -909,12 +938,12 @@ function $unmergeCell() {
         }
       }
       if (insertAfterCell === null) {
-        for (let j = 0; j < colSpan; j++) {
-          $insertFirst(currentRowNode, $createTableCellNode(TableCellHeaderStates.NO_STATUS).append($createParagraphNode()));
+        for (let j = colSpan - 1; j >= 0; j--) {
+          $insertFirst(currentRowNode, $createTableCellNode(colStyles[j] | rowStyles[i]).append($createParagraphNode()));
         }
       } else {
-        for (let j = 0; j < colSpan; j++) {
-          insertAfterCell.insertAfter($createTableCellNode(TableCellHeaderStates.NO_STATUS).append($createParagraphNode()));
+        for (let j = colSpan - 1; j >= 0; j--) {
+          insertAfterCell.insertAfter($createTableCellNode(colStyles[j] | rowStyles[i]).append($createParagraphNode()));
         }
       }
     }
@@ -924,10 +953,10 @@ function $unmergeCell() {
 function $computeTableMap(grid, cellA, cellB) {
   const [tableMap, cellAValue, cellBValue] = $computeTableMapSkipCellCheck(grid, cellA, cellB);
   if (!(cellAValue !== null)) {
-    throw Error(`Anchor not found in Grid`);
+    throw Error(`Anchor not found in Table`);
   }
   if (!(cellBValue !== null)) {
-    throw Error(`Focus not found in Grid`);
+    throw Error(`Focus not found in Table`);
   }
   return [tableMap, cellAValue, cellBValue];
 }
@@ -935,49 +964,58 @@ function $computeTableMapSkipCellCheck(grid, cellA, cellB) {
   const tableMap = [];
   let cellAValue = null;
   let cellBValue = null;
-  function write(startRow, startColumn, cell) {
-    const value = {
-      cell,
-      startColumn,
-      startRow
-    };
-    const rowSpan = cell.__rowSpan;
-    const colSpan = cell.__colSpan;
-    for (let i = 0; i < rowSpan; i++) {
-      if (tableMap[startRow + i] === undefined) {
-        tableMap[startRow + i] = [];
-      }
-      for (let j = 0; j < colSpan; j++) {
-        tableMap[startRow + i][startColumn + j] = value;
-      }
-    }
-    if (cellA !== null && cellA.is(cell)) {
-      cellAValue = value;
-    }
-    if (cellB !== null && cellB.is(cell)) {
-      cellBValue = value;
+  function getMapRow(i) {
+    let row = tableMap[i];
+    if (row === undefined) {
+      tableMap[i] = row = [];
     }
-  }
-  function isEmpty(row, column) {
-    return tableMap[row] === undefined || tableMap[row][column] === undefined;
+    return row;
   }
   const gridChildren = grid.getChildren();
-  for (let i = 0; i < gridChildren.length; i++) {
-    const row = gridChildren[i];
+  for (let rowIdx = 0; rowIdx < gridChildren.length; rowIdx++) {
+    const row = gridChildren[rowIdx];
     if (!$isTableRowNode(row)) {
-      throw Error(`Expected GridNode children to be TableRowNode`);
+      throw Error(`Expected TableNode children to be TableRowNode`);
     }
-    const rowChildren = row.getChildren();
-    let j = 0;
-    for (const cell of rowChildren) {
+    for (let cell = row.getFirstChild(), colIdx = 0; cell != null; cell = cell.getNextSibling()) {
       if (!$isTableCellNode(cell)) {
         throw Error(`Expected TableRowNode children to be TableCellNode`);
+      } // Skip past any columns that were merged from a higher row
+      const startMapRow = getMapRow(rowIdx);
+      while (startMapRow[colIdx] !== undefined) {
+        colIdx++;
       }
-      while (!isEmpty(i, j)) {
-        j++;
+      const value = {
+        cell,
+        startColumn: colIdx,
+        startRow: rowIdx
+      };
+      const {
+        __rowSpan: rowSpan,
+        __colSpan: colSpan
+      } = cell;
+      for (let j = 0; j < rowSpan; j++) {
+        if (rowIdx + j >= gridChildren.length) {
+          // The table is non-rectangular with a rowSpan
+          // below the last <tr> in the table.
+          // We should probably handle this with a node transform
+          // to ensure that tables are always rectangular but this
+          // will avoid crashes such as #6584
+          // Note that there are probably still latent bugs
+          // regarding colSpan or general cell count mismatches.
+          break;
+        }
+        const mapRow = getMapRow(rowIdx + j);
+        for (let i = 0; i < colSpan; i++) {
+          mapRow[colIdx + i] = value;
+        }
+      }
+      if (cellA !== null && cellAValue === null && cellA.is(cell)) {
+        cellAValue = value;
+      }
+      if (cellB !== null && cellBValue === null && cellB.is(cell)) {
+        cellBValue = value;
       }
-      write(i, j, cell);
-      j += cell.__colSpan;
     }
   }
   return [tableMap, cellAValue, cellBValue];
@@ -1005,7 +1043,7 @@ function $getNodeTriplet(source) {
   }
   const grid = row.getParent();
   if (!$isTableNode(grid)) {
-    throw Error(`Expected TableRowNode to have a parent GridNode`);
+    throw Error(`Expected TableRowNode to have a parent TableNode`);
   }
   return [cell, row, grid];
 }
@@ -1147,9 +1185,9 @@ class TableSelection {
       throw Error(`getCellRect: expected to find focusCellNode`);
     }
     const startX = Math.min(anchorCellNodeRect.columnIndex, focusCellNodeRect.columnIndex);
-    const stopX = Math.max(anchorCellNodeRect.columnIndex, focusCellNodeRect.columnIndex);
+    const stopX = Math.max(anchorCellNodeRect.columnIndex + anchorCellNodeRect.colSpan - 1, focusCellNodeRect.columnIndex + focusCellNodeRect.colSpan - 1);
     const startY = Math.min(anchorCellNodeRect.rowIndex, focusCellNodeRect.rowIndex);
-    const stopY = Math.max(anchorCellNodeRect.rowIndex, focusCellNodeRect.rowIndex);
+    const stopY = Math.max(anchorCellNodeRect.rowIndex + anchorCellNodeRect.rowSpan - 1, focusCellNodeRect.rowIndex + focusCellNodeRect.rowSpan - 1);
     return {
       fromX: Math.min(startX, stopX),
       fromY: Math.min(startY, stopY),
@@ -1263,7 +1301,10 @@ class TableSelection {
         exploredMaxRow = nextRow;
       }
     }
-    const nodes = [tableNode];
+
+    // We use a Map here because merged cells in the grid would otherwise
+    // show up multiple times in the nodes array
+    const nodeMap = new Map([[tableNode.getKey(), tableNode]]);
     let lastRow = null;
     for (let i = minRow; i <= maxRow; i++) {
       for (let j = minColumn; j <= maxColumn; j++) {
@@ -1275,12 +1316,16 @@ class TableSelection {
           throw Error(`Expected TableCellNode parent to be a TableRowNode`);
         }
         if (currentRow !== lastRow) {
-          nodes.push(currentRow);
+          nodeMap.set(currentRow.getKey(), currentRow);
+        }
+        nodeMap.set(cell.getKey(), cell);
+        for (const child of $getChildrenRecursively(cell)) {
+          nodeMap.set(child.getKey(), child);
         }
-        nodes.push(cell, ...$getChildrenRecursively(cell));
         lastRow = currentRow;
       }
     }
+    const nodes = Array.from(nodeMap.values());
     if (!isCurrentlyReadOnlyMode()) {
       this._cachedNodes = nodes;
     }

package/LexicalTable.js.flow

@@ -62,12 +62,12 @@ declare export class TableCellNode extends ElementNode {
   getRowSpan(): number;
   setRowSpan(rowSpan: number): this;
   getTag(): string;
-  setHeaderStyles(headerState: TableCellHeaderState): TableCellHeaderState;
+  setHeaderStyles(headerState: TableCellHeaderState, mask?: TableCellHeaderState): TableCellNode;
   getHeaderStyles(): TableCellHeaderState;
-  setWidth(width: number): ?number;
+  setWidth(width: number): TableCellNode;
   getWidth(): ?number;
   getBackgroundColor(): null | string;
-  setBackgroundColor(newBackgroundColor: null | string): void;
+  setBackgroundColor(newBackgroundColor: null | string): TableCellNode;
   toggleHeaderStyle(headerState: TableCellHeaderState): TableCellNode;
   hasHeader(): boolean;
   updateDOM(prevNode: TableCellNode): boolean;