misc nested table fixes

facebook · Nov 28, 2024 · 203c147 · 203c147
1 parent ae29d96
commit 203c147
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 23 deletions.
diff --git a/packages/lexical-table/src/LexicalTableNode.ts b/packages/lexical-table/src/LexicalTableNode.ts
@@ -34,7 +34,10 @@ import {PIXEL_VALUE_REG_EXP} from './constants';
 import {$isTableCellNode, TableCellNode} from './LexicalTableCellNode';
 import {TableDOMCell, TableDOMTable} from './LexicalTableObserver';
 import {TableRowNode} from './LexicalTableRowNode';
-import {getTable} from './LexicalTableSelectionHelpers';
+import {
+  $getNearestTableCellInTableFromDOMNode,
+  getTable,
+} from './LexicalTableSelectionHelpers';
 
 export type SerializedTableNode = Spread<
   {
@@ -270,17 +273,16 @@ export class TableNode extends ElementNode {
         continue;
       }
 
-      const x = row.findIndex((cell) => {
-        if (!cell) {
-          return;
+      for (let x = 0; x < row.length; x++) {
+        const cell = row[x];
+        if (cell == null) {
+          continue;
         }
         const {elem} = cell;
-        const cellNode = $getNearestNodeFromDOMNode(elem);
-        return cellNode === tableCellNode;
-      });
-
-      if (x !== -1) {
-        return {x, y};
+        const cellNode = $getNearestTableCellInTableFromDOMNode(this, elem);
+        if (cellNode !== null && tableCellNode.is(cellNode)) {
+          return {x, y};
+        }
       }
     }
 

diff --git a/packages/lexical-table/src/LexicalTableObserver.ts b/packages/lexical-table/src/LexicalTableObserver.ts
@@ -17,7 +17,6 @@ import {
   $createRangeSelection,
   $createTextNode,
   $getEditor,
-  $getNearestNodeFromDOMNode,
   $getNodeByKey,
   $getRoot,
   $getSelection,
@@ -38,7 +37,7 @@ import {
   type TableSelection,
 } from './LexicalTableSelection';
 import {
-  $findTableNode,
+  $getNearestTableCellInTableFromDOMNode,
   $updateDOMForSelection,
   getTable,
   getTableElement,
@@ -351,13 +350,15 @@ export class TableObserver {
     this.focusY = cellY;
 
     if (this.isHighlightingCells) {
-      const focusTableCellNode = $getNearestNodeFromDOMNode(cell.elem);
+      const focusTableCellNode = $getNearestTableCellInTableFromDOMNode(
+        tableNode,
+        cell.elem,
+      );
 
       if (
         this.tableSelection != null &&
         this.anchorCellNodeKey != null &&
-        $isTableCellNode(focusTableCellNode) &&
-        tableNode.is($findTableNode(focusTableCellNode))
+        focusTableCellNode !== null
       ) {
         this.focusCellNodeKey = focusTableCellNode.getKey();
         this.tableSelection = $createTableSelectionFrom(
@@ -407,9 +408,13 @@ export class TableObserver {
     this.anchorX = cell.x;
     this.anchorY = cell.y;
 
-    const anchorTableCellNode = $getNearestNodeFromDOMNode(cell.elem);
+    const {tableNode} = this.$lookup();
+    const anchorTableCellNode = $getNearestTableCellInTableFromDOMNode(
+      tableNode,
+      cell.elem,
+    );
 
-    if ($isTableCellNode(anchorTableCellNode)) {
+    if (anchorTableCellNode !== null) {
       const anchorNodeKey = anchorTableCellNode.getKey();
       this.tableSelection =
         this.tableSelection != null

diff --git a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
@@ -15,6 +15,7 @@ import type {
 } from './LexicalTableSelection';
 import type {
   BaseSelection,
+  EditorState,
   ElementFormatType,
   ElementNode,
   LexicalCommand,
@@ -661,7 +662,10 @@ export function applyTableHandlers(
           }
 
           const tableCellNode = $findCellNode(selection.anchor.getNode());
-          if (tableCellNode === null) {
+          if (
+            tableCellNode === null ||
+            !tableNode.is($findTableNode(tableCellNode))
+          ) {
             return false;
           }
 
@@ -966,13 +970,13 @@ export function applyTableHandlers(
               domSelection.focusNode,
             );
             const isFocusOutside =
-              focusNode && !tableNode.is($findTableNode(focusNode));
+              focusNode && !tableNode.isParentOf(focusNode);
 
             const anchorNode = $getNearestNodeFromDOMNode(
               domSelection.anchorNode,
             );
             const isAnchorInside =
-              anchorNode && tableNode.is($findTableNode(anchorNode));
+              anchorNode && tableNode.isParentOf(anchorNode);
 
             if (
               isFocusOutside &&
@@ -1743,11 +1747,11 @@ function $handleArrowKey(
               ? selection.getNodes()[selection.getNodes().length - 1]
               : selection.getNodes()[0];
           if (selectedNode) {
-            const tableCellNode = $findMatchingParent(
+            const tableCellNode = $findParentTableCellNodeInTable(
+              tableNode,
               selectedNode,
-              $isTableCellNode,
             );
-            if (tableCellNode && tableNode.isParentOf(tableCellNode)) {
+            if (tableCellNode !== null) {
               const firstDescendant = tableNode.getFirstDescendant();
               const lastDescendant = tableNode.getLastDescendant();
               if (!firstDescendant || !lastDescendant) {
@@ -2260,3 +2264,14 @@ export function $getObserverCellFromCellNodeOrThrow(
     tableObserver.table,
   );
 }
+
+export function $getNearestTableCellInTableFromDOMNode(
+  tableNode: TableNode,
+  startingDOM: Node,
+  editorState?: EditorState,
+) {
+  return $findParentTableCellNodeInTable(
+    tableNode,
+    $getNearestNodeFromDOMNode(startingDOM, editorState),
+  );
+}