@lexical/table 0.39.1-nightly.20260116.0 → 0.39.1-nightly.20260121.0

package/LexicalTable.dev.js

@@ -2008,23 +2008,42 @@ class TableObserver {
     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) {
+
+    // Enable highlighting if: ignoreStart is true, or anchor differs from focus,
+    // or we have valid tableSelection with anchor (for first drag after column switch)
+    if (!this.isHighlightingCells) {
+      const shouldEnable = ignoreStart || this.anchorX !== cellX || this.anchorY !== cellY || this.tableSelection != null && this.anchorCellNodeKey != null;
+      if (shouldEnable) {
+        this.isHighlightingCells = true;
+        this.$disableHighlightStyle();
+      }
+    }
+
+    // Skip if we're trying to select the same cell we already have selected
+    // But only if focusX/focusY are valid (not -1, which means not reset)
+    if (this.focusX !== -1 && this.focusY !== -1 && cellX === this.focusX && cellY === this.focusY) {
       return false;
     }
     this.focusX = cellX;
     this.focusY = cellY;
     if (this.isHighlightingCells) {
       const focusTableCellNode = $getNearestTableCellInTableFromDOMNode(tableNode, cell.elem);
-      if (this.tableSelection != null && this.anchorCellNodeKey != null && focusTableCellNode !== null) {
-        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;
+      if (this.tableSelection != null && this.anchorCellNodeKey != null) {
+        let targetCellNode = focusTableCellNode;
+
+        // Fallback: use coordinates if DOM lookup failed (handles timing issues on first drag)
+        if (targetCellNode === null && ignoreStart) {
+          targetCellNode = tableNode.getCellNodeFromCords(cellX, cellY, this.table);
+        }
+        if (targetCellNode !== null) {
+          const anchorTableCell = this.$getAnchorTableCellOrThrow();
+          this.focusCellNodeKey = targetCellNode.getKey();
+          this.tableSelection = $createTableSelectionFrom(tableNode, anchorTableCell, targetCellNode);
+          lexical.$setSelection(this.tableSelection);
+          editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
+          $updateDOMForSelection(editor, this.table, this.tableSelection);
+          return true;
+        }
       }
     }
     return false;
@@ -2054,13 +2073,23 @@ class TableObserver {
     this.anchorCell = cell;
     this.anchorX = cell.x;
     this.anchorY = cell.y;
+    // Reset focus state to prevent stale values from previous selections
+    this.focusX = -1;
+    this.focusY = -1;
+    this.focusCell = null;
+    this.focusCellNodeKey = null;
     const {
       tableNode
     } = this.$lookup();
     const anchorTableCellNode = $getNearestTableCellInTableFromDOMNode(tableNode, cell.elem);
     if (anchorTableCellNode !== null) {
       const anchorNodeKey = anchorTableCellNode.getKey();
-      this.tableSelection = this.tableSelection != null ? this.tableSelection.clone() : $createTableSelection();
+      if (this.tableSelection != null) {
+        this.tableSelection = this.tableSelection.clone();
+        this.tableSelection.set(tableNode.getKey(), anchorNodeKey, anchorNodeKey);
+      } else {
+        this.tableSelection = $createTableSelectionFrom(tableNode, anchorTableCellNode, anchorTableCellNode);
+      }
       this.anchorCellNodeKey = anchorNodeKey;
     }
   }
@@ -2177,10 +2206,18 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
   const tableElement = getTableElement(tableNode, element);
   attachTableObserverToTableElement(tableElement, tableObserver);
   tableObserver.listenersToRemove.add(() => detachTableObserverFromTableElement(tableElement, tableObserver));
-  const createPointerHandlers = () => {
+  const createPointerHandlers = startingCell => {
     if (tableObserver.isSelecting) {
       return;
     }
+    tableObserver.isSelecting = true;
+
+    // Set anchor immediately if starting cell provided (handles direct drag without click)
+    if (startingCell !== null && tableObserver.anchorCell === null) {
+      editor.update(() => {
+        tableObserver.$setAnchorCellForSelection(startingCell);
+      });
+    }
     const onPointerUp = () => {
       tableObserver.isSelecting = false;
       editorWindow.removeEventListener('pointerup', onPointerUp);
@@ -2210,15 +2247,23 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
           }
         }
       }
-      if (focusCell && (tableObserver.focusCell === null || focusCell.elem !== tableObserver.focusCell.elem)) {
-        tableObserver.setNextFocus({
-          focusCell,
-          override
-        });
-        editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
+      if (focusCell) {
+        const anchorCell = focusCell;
+        // Fallback: set anchor if still missing (handles race conditions)
+        if (tableObserver.anchorCell === null) {
+          editor.update(() => {
+            tableObserver.$setAnchorCellForSelection(anchorCell);
+          });
+        }
+        if (tableObserver.focusCell === null || focusCell.elem !== tableObserver.focusCell.elem) {
+          tableObserver.setNextFocus({
+            focusCell,
+            override
+          });
+          editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
+        }
       }
     };
-    tableObserver.isSelecting = true;
     editorWindow.addEventListener('pointerup', onPointerUp, tableObserver.listenerOptions);
     editorWindow.addEventListener('pointermove', onPointerMove, tableObserver.listenerOptions);
   };
@@ -2254,7 +2299,10 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
         }
       });
     }
-    createPointerHandlers();
+
+    // Pass the target cell to createPointerHandlers so it can be used as anchor
+    // if user drags directly without clicking first
+    createPointerHandlers(targetCell);
   };
   tableElement.addEventListener('pointerdown', onPointerDown, tableObserver.listenerOptions);
   tableObserver.listenersToRemove.add(() => {
@@ -2501,133 +2549,6 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
   tableObserver.listenersToRemove.add(editor.registerCommand(lexical.FOCUS_COMMAND, payload => {
     return tableNode.isSelected();
   }, lexical.COMMAND_PRIORITY_HIGH));
-  tableObserver.listenersToRemove.add(editor.registerCommand(lexical.SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, (selectionPayload, dispatchEditor) => {
-    if (editor !== dispatchEditor) {
-      return false;
-    }
-    const {
-      nodes,
-      selection
-    } = selectionPayload;
-    const anchorAndFocus = selection.getStartEndPoints();
-    const isTableSelection = $isTableSelection(selection);
-    const isRangeSelection = lexical.$isRangeSelection(selection);
-    const isSelectionInsideOfGrid = isRangeSelection && utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n)) !== null && utils.$findMatchingParent(selection.focus.getNode(), n => $isTableCellNode(n)) !== null || isTableSelection;
-    if (nodes.length !== 1 || !$isTableNode(nodes[0]) || !isSelectionInsideOfGrid || anchorAndFocus === null) {
-      return false;
-    }
-    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 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;
-      }
-    }
-    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 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 {
-          cell
-        } = interimGridMap[row][col];
-        const originalChildren = cell.getChildren();
-        templateCell.getChildren().forEach(child => {
-          if (lexical.$isTextNode(child)) {
-            const paragraphNode = lexical.$createParagraphNode();
-            paragraphNode.append(child);
-            cell.append(child);
-          } else {
-            cell.append(child);
-          }
-        });
-        originalChildren.forEach(n => n.remove());
-      }
-    }
-    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_HIGH));
   tableObserver.listenersToRemove.add(editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, () => {
     const selection = lexical.$getSelection();
     const prevSelection = lexical.$getPreviousSelection();
@@ -2644,9 +2565,14 @@ function applyTableHandlers(tableNode, element, editor, hasTabHandler) {
           tableObserver.$setFocusCellForSelection(focusCell);
           return true;
         }
-      } else if (focusCell !== tableObserver.anchorCell && $isSelectionInTable(selection, tableNode)) {
+      } else if (focusCell !== tableObserver.anchorCell && tableObserver.anchorCell !== null && tableObserver.anchorCellNodeKey !== null && tableObserver.tableSelection !== null) {
         // The selection has crossed cells
-        tableObserver.$setFocusCellForSelection(focusCell);
+        // If we have an anchor cell set and tableSelection initialized,
+        // we have all the necessary state to create the selection.
+        // The presence of nextFocus means we're dragging, so process it.
+        // Use ignoreStart=true to ensure isHighlightingCells is set correctly
+        // on the first drag attempt, especially when switching columns.
+        tableObserver.$setFocusCellForSelection(focusCell, true);
         return true;
       }
     }
@@ -4229,7 +4155,7 @@ function registerTableSelectionObserver(editor, hasTabHandler = true) {
 }
 
 /**
- * Register the INSERT_TABLE_COMMAND listener and the table integrity transforms. The
+ * Register table command listeners and the table integrity transforms. The
  * table selection observer should be registered separately after this with
  * {@link registerTableSelectionObserver}.
  *
@@ -4247,10 +4173,17 @@ function registerTablePlugin(editor, options) {
   } = options ?? {};
   return utils.mergeRegister(editor.registerCommand(INSERT_TABLE_COMMAND, payload => {
     return $insertTable(payload, hasNestedTables.peek());
-  }, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, ({
-    nodes,
-    selection
-  }, dispatchEditor) => {
+  }, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, (selectionPayload, dispatchEditor) => {
+    if (editor !== dispatchEditor) {
+      return false;
+    }
+    if ($tableSelectionInsertClipboardNodesCommand(selectionPayload)) {
+      return true;
+    }
+    const {
+      selection,
+      nodes
+    } = selectionPayload;
     if (hasNestedTables.peek() || editor !== dispatchEditor || !lexical.$isRangeSelection(selection)) {
       return false;
     }
@@ -4258,6 +4191,130 @@ function registerTablePlugin(editor, options) {
     return isInsideTableCell && nodes.some($isTableNode);
   }, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.SELECT_ALL_COMMAND, $tableSelectAllCommand, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.CLICK_COMMAND, $tableClickCommand, lexical.COMMAND_PRIORITY_EDITOR), editor.registerNodeTransform(TableNode, $tableTransform), editor.registerNodeTransform(TableRowNode, $tableRowTransform), editor.registerNodeTransform(TableCellNode, $tableCellTransform));
 }
+function $tableSelectionInsertClipboardNodesCommand(selectionPayload) {
+  const {
+    nodes,
+    selection
+  } = selectionPayload;
+  const anchorAndFocus = selection.getStartEndPoints();
+  const isTableSelection = $isTableSelection(selection);
+  const isRangeSelection = lexical.$isRangeSelection(selection);
+  const isSelectionInsideOfGrid = isRangeSelection && utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n)) !== null && utils.$findMatchingParent(selection.focus.getNode(), n => $isTableCellNode(n)) !== null || isTableSelection;
+  if (nodes.length !== 1 || !$isTableNode(nodes[0]) || !isSelectionInsideOfGrid || anchorAndFocus === null) {
+    return false;
+  }
+  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 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;
+    }
+  }
+  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 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 {
+        cell
+      } = interimGridMap[row][col];
+      const originalChildren = cell.getChildren();
+      templateCell.getChildren().forEach(child => {
+        if (lexical.$isTextNode(child)) {
+          const paragraphNode = lexical.$createParagraphNode();
+          paragraphNode.append(child);
+          cell.append(child);
+        } else {
+          cell.append(child);
+        }
+      });
+      originalChildren.forEach(n => n.remove());
+    }
+  }
+  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;
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.