Bug: Nested tables - tab key handling
Lexical version: 0.18.0
Steps To Reproduce
- Insert a table (1*2)
- Place the cursor in any cell
- Insert a table (2*2) into the active cell
- Place the cursor in any cell of the nested table
- Press
Tabkey to navigate to the next cell in the nested table
Link to code example: Official playground
The current behavior
The cursor remains in the current cell. The following error is registered in the console:
Uncaught Error: Cell not found in table.
at TableNode.getCordsFromCellNode
Identical errors are thrown when other handlers with the getCordsFromCellNode method are called.
The expected behavior
The cursor will jump to the next cell of the nested table.
Not sure, but maybe it's worth adding some extra checks to the KEY_TAB_COMMAND handler in LexicalTableSelectionHelpers.ts.
When the handler tries to get cords from the cell node, it doesn't check whether the found tableCellNode is a cell of the nested table, and not that of the main tableNode.
const currentCords = tableNode.getCordsFromCellNode(
tableCellNode,
tableObserver.table,
);
As a temporary fix I've overridden the isParentOf method in the derived class of TableNode
class DerivedTableNode extends TableNode {
override isParentOf(targetNode: LexicalNode): boolean {
const key = this.__key;
if (key === targetNode.__key) {
return false;
}
let node: LexicalNode | null = targetNode;
while (node !== null) {
// check nested table
if ($isTableNode(node) && node.__key != key)
return false;
if (node.__key === key) {
return true;
}
node = node.getParent();
}
return false;
}
}
I think of the following possible solutions:
- Check a nested table before calling
getCordsFromCellNode - Check a nested table within
getCordsFromCellNode
I think generally nested tables have a lot of edge cases and there are very few tests for them, most of the code probably needs to be audited to handle these sorts of situations.