@lexical/table 0.29.1-nightly.20250331.0 → 0.29.1-nightly.20250402.0

package/LexicalTable.dev.js

@@ -596,17 +596,35 @@ function $insertTableRow__EXPERIMENTAL(insertAfter = true) {
   const focus = selection.focus.getNode();
   const [anchorCell] = $getNodeTriplet(anchor);
   const [focusCell,, grid] = $getNodeTriplet(focus);
-  const [gridMap, focusCellMap, anchorCellMap] = $computeTableMap(grid, focusCell, anchorCell);
-  const columnCount = gridMap[0].length;
+  const [, focusCellMap, anchorCellMap] = $computeTableMap(grid, focusCell, anchorCell);
   const {
     startRow: anchorStartRow
   } = anchorCellMap;
   const {
     startRow: focusStartRow
   } = focusCellMap;
+  if (insertAfter) {
+    return $insertTableRowAtNode(anchorStartRow + anchorCell.__rowSpan > focusStartRow + focusCell.__rowSpan ? anchorCell : focusCell, true);
+  } else {
+    return $insertTableRowAtNode(focusStartRow < anchorStartRow ? focusCell : anchorCell, false);
+  }
+}
+
+/**
+ * Inserts a table row before or after the given cell node,
+ * taking into account any spans. If successful, returns the
+ * inserted table row node.
+ */
+function $insertTableRowAtNode(cellNode, insertAfter = true) {
+  const [,, grid] = $getNodeTriplet(cellNode);
+  const [gridMap, cellMap] = $computeTableMap(grid, cellNode, cellNode);
+  const columnCount = gridMap[0].length;
+  const {
+    startRow: cellStartRow
+  } = cellMap;
   let insertedRow = null;
   if (insertAfter) {
-    const insertAfterEndRow = Math.max(focusStartRow + focusCell.__rowSpan, anchorStartRow + anchorCell.__rowSpan) - 1;
+    const insertAfterEndRow = cellStartRow + cellNode.__rowSpan - 1;
     const insertAfterEndRowMap = gridMap[insertAfterEndRow];
     const newRow = $createTableRowNode();
     for (let i = 0; i < columnCount; i++) {
@@ -630,7 +648,7 @@ function $insertTableRow__EXPERIMENTAL(insertAfter = true) {
     insertAfterEndRowNode.insertAfter(newRow);
     insertedRow = newRow;
   } else {
-    const insertBeforeStartRow = Math.min(focusStartRow, anchorStartRow);
+    const insertBeforeStartRow = cellStartRow;
     const insertBeforeStartRowMap = gridMap[insertBeforeStartRow];
     const newRow = $createTableRowNode();
     for (let i = 0; i < columnCount; i++) {
@@ -715,10 +733,33 @@ function $insertTableColumn__EXPERIMENTAL(insertAfter = true) {
   const focus = selection.focus.getNode();
   const [anchorCell] = $getNodeTriplet(anchor);
   const [focusCell,, grid] = $getNodeTriplet(focus);
-  const [gridMap, focusCellMap, anchorCellMap] = $computeTableMap(grid, focusCell, anchorCell);
+  const [, focusCellMap, anchorCellMap] = $computeTableMap(grid, focusCell, anchorCell);
+  const {
+    startColumn: anchorStartColumn
+  } = anchorCellMap;
+  const {
+    startColumn: focusStartColumn
+  } = focusCellMap;
+  if (insertAfter) {
+    return $insertTableColumnAtNode(anchorStartColumn + anchorCell.__colSpan > focusStartColumn + focusCell.__colSpan ? anchorCell : focusCell, true);
+  } else {
+    return $insertTableColumnAtNode(focusStartColumn < anchorStartColumn ? focusCell : anchorCell, false);
+  }
+}
+
+/**
+ * Inserts a column before or after the given cell node,
+ * taking into account any spans. If successful, returns the
+ * first inserted cell node.
+ */
+function $insertTableColumnAtNode(cellNode, insertAfter = true, shouldSetSelection = true) {
+  const [,, grid] = $getNodeTriplet(cellNode);
+  const [gridMap, cellMap] = $computeTableMap(grid, cellNode, cellNode);
   const rowCount = gridMap.length;
-  const startColumn = insertAfter ? Math.max(focusCellMap.startColumn, anchorCellMap.startColumn) : Math.min(focusCellMap.startColumn, anchorCellMap.startColumn);
-  const insertAfterColumn = insertAfter ? startColumn + focusCell.__colSpan - 1 : startColumn - 1;
+  const {
+    startColumn
+  } = cellMap;
+  const insertAfterColumn = insertAfter ? startColumn + cellNode.__colSpan - 1 : startColumn - 1;
   const gridFirstChild = grid.getFirstChild();
   if (!$isTableRowNode(gridFirstChild)) {
     formatDevErrorMessage(`Expected firstTable child to be a row`);
@@ -775,7 +816,7 @@ function $insertTableColumn__EXPERIMENTAL(insertAfter = true) {
       currentCell.setColSpan(currentCell.__colSpan + 1);
     }
   }
-  if (firstInsertedCell !== null) {
+  if (firstInsertedCell !== null && shouldSetSelection) {
     $moveSelectionToCell(firstInsertedCell);
   }
   const colWidths = grid.getColWidths();
@@ -977,13 +1018,122 @@ function $insertFirst(parent, node) {
     parent.append(node);
   }
 }
+function $mergeCells(cellNodes) {
+  if (cellNodes.length === 0) {
+    return null;
+  }
+
+  // Find the table node
+  const tableNode = $getTableNodeFromLexicalNodeOrThrow(cellNodes[0]);
+  const [gridMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+
+  // Find the boundaries of the selection including merged cells
+  let minRow = Infinity;
+  let maxRow = -Infinity;
+  let minCol = Infinity;
+  let maxCol = -Infinity;
+
+  // First pass: find the actual boundaries considering merged cells
+  const processedCells = new Set();
+  for (const row of gridMap) {
+    for (const mapCell of row) {
+      if (!mapCell || !mapCell.cell) {
+        continue;
+      }
+      const cellKey = mapCell.cell.getKey();
+      if (processedCells.has(cellKey)) {
+        continue;
+      }
+      if (cellNodes.some(cell => cell.is(mapCell.cell))) {
+        processedCells.add(cellKey);
+        // Get the actual position of this cell in the grid
+        const cellStartRow = mapCell.startRow;
+        const cellStartCol = mapCell.startColumn;
+        const cellRowSpan = mapCell.cell.__rowSpan || 1;
+        const cellColSpan = mapCell.cell.__colSpan || 1;
+
+        // Update boundaries considering the cell's actual position and span
+        minRow = Math.min(minRow, cellStartRow);
+        maxRow = Math.max(maxRow, cellStartRow + cellRowSpan - 1);
+        minCol = Math.min(minCol, cellStartCol);
+        maxCol = Math.max(maxCol, cellStartCol + cellColSpan - 1);
+      }
+    }
+  }
+
+  // Validate boundaries
+  if (minRow === Infinity || minCol === Infinity) {
+    return null;
+  }
+
+  // The total span of the merged cell
+  const totalRowSpan = maxRow - minRow + 1;
+  const totalColSpan = maxCol - minCol + 1;
+
+  // Use the top-left cell as the target cell
+  const targetCellMap = gridMap[minRow][minCol];
+  if (!targetCellMap.cell) {
+    return null;
+  }
+  const targetCell = targetCellMap.cell;
+
+  // Set the spans for the target cell
+  targetCell.setColSpan(totalColSpan);
+  targetCell.setRowSpan(totalRowSpan);
+
+  // Move content from other cells to the target cell
+  const seenCells = new Set([targetCell.getKey()]);
+
+  // Second pass: merge content and remove other cells
+  for (let row = minRow; row <= maxRow; row++) {
+    for (let col = minCol; col <= maxCol; col++) {
+      const mapCell = gridMap[row][col];
+      if (!mapCell.cell) {
+        continue;
+      }
+      const currentCell = mapCell.cell;
+      const key = currentCell.getKey();
+      if (!seenCells.has(key)) {
+        seenCells.add(key);
+        const isEmpty = $cellContainsEmptyParagraph(currentCell);
+        if (!isEmpty) {
+          targetCell.append(...currentCell.getChildren());
+        }
+        currentCell.remove();
+      }
+    }
+  }
+
+  // Ensure target cell has content
+  if (targetCell.getChildrenSize() === 0) {
+    targetCell.append(lexical.$createParagraphNode());
+  }
+  return targetCell;
+}
+function $cellContainsEmptyParagraph(cell) {
+  if (cell.getChildrenSize() !== 1) {
+    return false;
+  }
+  const firstChild = cell.getFirstChildOrThrow();
+  if (!lexical.$isParagraphNode(firstChild) || !firstChild.isEmpty()) {
+    return false;
+  }
+  return true;
+}
 function $unmergeCell() {
   const selection = lexical.$getSelection();
   if (!(lexical.$isRangeSelection(selection) || $isTableSelection(selection))) {
     formatDevErrorMessage(`Expected a RangeSelection or TableSelection`);
   }
   const anchor = selection.anchor.getNode();
-  const [cell, row, grid] = $getNodeTriplet(anchor);
+  const cellNode = utils.$findMatchingParent(anchor, $isTableCellNode);
+  if (!$isTableCellNode(cellNode)) {
+    formatDevErrorMessage(`Expected to find a parent TableCellNode`);
+  }
+  return $unmergeCellNode(cellNode);
+}
+function $unmergeCellNode(cellNode) {
+  const [cell, row, grid] = $getNodeTriplet(cellNode);
   const colSpan = cell.__colSpan;
   const rowSpan = cell.__rowSpan;
   if (colSpan === 1 && rowSpan === 1) {
@@ -2285,62 +2435,115 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
     if (nodes.length !== 1 || !$isTableNode(nodes[0]) || !isSelectionInsideOfGrid || anchorAndFocus === null) {
       return false;
     }
-    const [anchor] = anchorAndFocus;
-    const newGrid = nodes[0];
-    const newGridRows = newGrid.getChildren();
-    const newColumnCount = newGrid.getFirstChildOrThrow().getChildrenSize();
-    const newRowCount = newGrid.getChildrenSize();
-    const gridCellNode = utils.$findMatchingParent(anchor.getNode(), n => $isTableCellNode(n));
-    const gridRowNode = gridCellNode && utils.$findMatchingParent(gridCellNode, n => $isTableRowNode(n));
-    const gridNode = gridRowNode && utils.$findMatchingParent(gridRowNode, n => $isTableNode(n));
-    if (!$isTableCellNode(gridCellNode) || !$isTableRowNode(gridRowNode) || !$isTableNode(gridNode)) {
+    const [anchor, focus] = anchorAndFocus;
+    const [anchorCellNode, anchorRowNode, gridNode] = $getNodeTriplet(anchor);
+    const focusCellNode = utils.$findMatchingParent(focus.getNode(), n => $isTableCellNode(n));
+    if (!$isTableCellNode(anchorCellNode) || !$isTableCellNode(focusCellNode) || !$isTableRowNode(anchorRowNode) || !$isTableNode(gridNode)) {
       return false;
     }
-    const startY = gridRowNode.getIndexWithinParent();
-    const stopY = Math.min(gridNode.getChildrenSize() - 1, startY + newRowCount - 1);
-    const startX = gridCellNode.getIndexWithinParent();
-    const stopX = Math.min(gridRowNode.getChildrenSize() - 1, startX + newColumnCount - 1);
-    const fromX = Math.min(startX, stopX);
-    const fromY = Math.min(startY, stopY);
-    const toX = Math.max(startX, stopX);
-    const toY = Math.max(startY, stopY);
-    const gridRowNodes = gridNode.getChildren();
-    let newRowIdx = 0;
-    for (let r = fromY; r <= toY; r++) {
-      const currentGridRowNode = gridRowNodes[r];
-      if (!$isTableRowNode(currentGridRowNode)) {
-        return false;
-      }
-      const newGridRowNode = newGridRows[newRowIdx];
-      if (!$isTableRowNode(newGridRowNode)) {
-        return false;
+    const templateGrid = nodes[0];
+    const [initialGridMap, anchorCellMap, focusCellMap] = $computeTableMap(gridNode, anchorCellNode, focusCellNode);
+    const [templateGridMap] = $computeTableMapSkipCellCheck(templateGrid, null, null);
+    const initialRowCount = initialGridMap.length;
+    const initialColCount = initialRowCount > 0 ? initialGridMap[0].length : 0;
+
+    // If we have a range selection, we'll fit the template grid into the
+    // table, growing the table if necessary.
+    let startRow = anchorCellMap.startRow;
+    let startCol = anchorCellMap.startColumn;
+    let affectedRowCount = templateGridMap.length;
+    let affectedColCount = affectedRowCount > 0 ? templateGridMap[0].length : 0;
+    if (isTableSelection) {
+      // If we have a table selection, we'll only modify the cells within
+      // the selection boundary.
+      const selectionBoundary = $computeTableCellRectBoundary(initialGridMap, anchorCellMap, focusCellMap);
+      const selectionRowCount = selectionBoundary.maxRow - selectionBoundary.minRow + 1;
+      const selectionColCount = selectionBoundary.maxColumn - selectionBoundary.minColumn + 1;
+      startRow = selectionBoundary.minRow;
+      startCol = selectionBoundary.minColumn;
+      affectedRowCount = Math.min(affectedRowCount, selectionRowCount);
+      affectedColCount = Math.min(affectedColCount, selectionColCount);
+    }
+
+    // Step 1: Unmerge all merged cells within the affected area
+    let didPerformMergeOperations = false;
+    const lastRowForUnmerge = Math.min(initialRowCount, startRow + affectedRowCount) - 1;
+    const lastColForUnmerge = Math.min(initialColCount, startCol + affectedColCount) - 1;
+    const unmergedKeys = new Set();
+    for (let row = startRow; row <= lastRowForUnmerge; row++) {
+      for (let col = startCol; col <= lastColForUnmerge; col++) {
+        const cellMap = initialGridMap[row][col];
+        if (unmergedKeys.has(cellMap.cell.getKey())) {
+          continue; // cell was a merged cell that was already handled
+        }
+        if (cellMap.cell.__rowSpan === 1 && cellMap.cell.__colSpan === 1) {
+          continue; // cell is not a merged cell
+        }
+        $unmergeCellNode(cellMap.cell);
+        unmergedKeys.add(cellMap.cell.getKey());
+        didPerformMergeOperations = true;
       }
-      const gridCellNodes = currentGridRowNode.getChildren();
-      const newGridCellNodes = newGridRowNode.getChildren();
-      let newColumnIdx = 0;
-      for (let c = fromX; c <= toX; c++) {
-        const currentGridCellNode = gridCellNodes[c];
-        if (!$isTableCellNode(currentGridCellNode)) {
-          return false;
+    }
+    let [interimGridMap] = $computeTableMapSkipCellCheck(gridNode.getWritable(), null, null);
+
+    // Step 2: Expand current table (if needed)
+    const rowsToInsert = affectedRowCount - initialRowCount + startRow;
+    for (let i = 0; i < rowsToInsert; i++) {
+      const cellMap = interimGridMap[initialRowCount - 1][0];
+      $insertTableRowAtNode(cellMap.cell);
+    }
+    const colsToInsert = affectedColCount - initialColCount + startCol;
+    for (let i = 0; i < colsToInsert; i++) {
+      const cellMap = interimGridMap[0][initialColCount - 1];
+      $insertTableColumnAtNode(cellMap.cell, true, false);
+    }
+    [interimGridMap] = $computeTableMapSkipCellCheck(gridNode.getWritable(), null, null);
+
+    // Step 3: Merge cells and set cell content, to match template grid
+    for (let row = startRow; row < startRow + affectedRowCount; row++) {
+      for (let col = startCol; col < startCol + affectedColCount; col++) {
+        const templateRow = row - startRow;
+        const templateCol = col - startCol;
+        const templateCellMap = templateGridMap[templateRow][templateCol];
+        if (templateCellMap.startRow !== templateRow || templateCellMap.startColumn !== templateCol) {
+          continue; // cell is a merged cell that was already handled
         }
-        const newGridCellNode = newGridCellNodes[newColumnIdx];
-        if (!$isTableCellNode(newGridCellNode)) {
-          return false;
+        const templateCell = templateCellMap.cell;
+        if (templateCell.__rowSpan !== 1 || templateCell.__colSpan !== 1) {
+          const cellsToMerge = [];
+          const lastRowForMerge = Math.min(row + templateCell.__rowSpan, startRow + affectedRowCount) - 1;
+          const lastColForMerge = Math.min(col + templateCell.__colSpan, startCol + affectedColCount) - 1;
+          for (let r = row; r <= lastRowForMerge; r++) {
+            for (let c = col; c <= lastColForMerge; c++) {
+              const cellMap = interimGridMap[r][c];
+              cellsToMerge.push(cellMap.cell);
+            }
+          }
+          $mergeCells(cellsToMerge);
+          didPerformMergeOperations = true;
         }
-        const originalChildren = currentGridCellNode.getChildren();
-        newGridCellNode.getChildren().forEach(child => {
+        const {
+          cell
+        } = interimGridMap[row][col];
+        const originalChildren = cell.getChildren();
+        templateCell.getChildren().forEach(child => {
           if (lexical.$isTextNode(child)) {
             const paragraphNode = lexical.$createParagraphNode();
             paragraphNode.append(child);
-            currentGridCellNode.append(child);
+            cell.append(child);
           } else {
-            currentGridCellNode.append(child);
+            cell.append(child);
           }
         });
         originalChildren.forEach(n => n.remove());
-        newColumnIdx++;
       }
-      newRowIdx++;
+    }
+    if (isTableSelection && didPerformMergeOperations) {
+      // reset the table selection in case the anchor or focus cell was
+      // removed via merge operations
+      const [finalGridMap] = $computeTableMapSkipCellCheck(gridNode.getWritable(), null, null);
+      const newAnchorCellMap = finalGridMap[anchorCellMap.startRow][anchorCellMap.startColumn];
+      newAnchorCellMap.cell.selectEnd();
     }
     return true;
   }, lexical.COMMAND_PRIORITY_CRITICAL));
@@ -3922,6 +4125,7 @@ exports.$isTableCellNode = $isTableCellNode;
 exports.$isTableNode = $isTableNode;
 exports.$isTableRowNode = $isTableRowNode;
 exports.$isTableSelection = $isTableSelection;
+exports.$mergeCells = $mergeCells;
 exports.$removeTableRowAtIndex = $removeTableRowAtIndex;
 exports.$unmergeCell = $unmergeCell;
 exports.INSERT_TABLE_COMMAND = INSERT_TABLE_COMMAND;