[lexical][lexical-rich-text][lexical-selection] Bug Fix: Fix navigation across unmergeable TextNode boundaries in inline-grid containers

[mayrang]

Description

When adjacent unmergeable TextNodes live inside a display: inline-grid (or inline-flex) container, the browser renders each node in its own <span> and treats each grid column as a separate "line." This breaks Selection.modify — forward/backward delete gets stuck at span boundaries, left/right arrow keys can't cross them, and up/down arrows cycle through columns instead of moving to the next paragraph.

Fix

Left/right arrows and delete — Three coordinated changes:

1. RangeSelection.modify() now pre-normalizes the DOM selection into the adjacent sibling's Text node before calling native Selection.modify, so the browser can cross the <span> boundary. This only fires at character granularity on unmergeable TextNodes.
2. resolveSelectionPointOnBoundary skips the text-to-text normalization when the current node is unmergeable, preserving the cursor's identity at the boundary instead of collapsing it into the previous sibling.
3. $shouldOverrideDefaultCharacterSelection returns true at unmergeable TextNode boundaries adjacent to another plain TextNode, triggering Lexical's own modify() path instead of relying on native handling.

Up/down arrows — $tryInlineGridLineNavigation in @lexical/rich-text detects when the cursor's parent block contains an inline-grid/inline-flex child. It finds the sibling block, uses caretFromPoint to place the caret at the same X coordinate in that block, and falls back to structural navigation when coordinate lookup fails. At document boundaries (no sibling block), up goes to the start of the line and down goes to the end.

Closes #7301

Test plan

• pnpm vitest run --project unit — 3638 pass (209 files), including 4 new browser tests in Issue7301InlineGridDeletion.test.ts
• Manual test page with Before [Alpha|Beta|Gamma] After in an inline-grid container + a second normal paragraph:
  • Forward delete from end of Alpha: Beta deleted, then Gamma deleted
  • Backspace from start of Gamma: Beta deleted
  • Right arrow from end of Alpha: cursor moves to end of Beta (not stuck)
  • Left arrow from end of Beta: cursor moves to start of Beta (preserves identity)
  • Down arrow from Before/Alpha/Beta/Gamma/After: moves to second paragraph
  • Up arrow from second paragraph: moves to first paragraph
  • Down arrow on last paragraph: cursor moves to end of line
  • Up arrow on first paragraph: cursor moves to start of line
  • Second paragraph up/down: no regression
• Playground bold/italic format-affinity: selecting bold text then pressing right arrow still lands in the bold run (unmergeable guard prevents interference)
• tsc / eslint / prettier clean

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview	Jul 7, 2026 3:45pm
lexical-playground	Ready	Preview	Jul 7, 2026 3:45pm

[etrepum]

getType() === 'text' is never correct because node replacement can change what node class and type is used for the editor, whatever this is trying to determine should be inferred from guards and methods. Not entirely clear from context what node types it's trying to exclude here by looking specifically for the text type.

[mayrang]

Sorry about that — should have used a guard instead of string comparison. Will keep node replacement in mind going forward. Fixed with !$isTabNode() in 956052b.

[etrepum]

A TextPointCaret behaves exactly like a sibling caret at the same origin

Suggested change

	const sibling = $getSiblingCaret(
	focusCaret.origin,
	focusCaret.direction,
	).getNodeAtCaret();
	const sibling = focusCaret.getNodeAtCaret();

class SiblingCaretNext<T extends LexicalNode> extends AbstractSiblingCaret<
  T,
  'next'
> {
  readonly direction = 'next';
  getNodeAtCaret(): null | LexicalNode {
    return this.origin.getNextSibling();
  }
  insert(node: LexicalNode): this {
    this.origin.insertAfter(node);
    return this;
  }
}

class TextPointCaretNext<T extends TextNode> extends AbstractTextPointCaret<
  T,
  'next'
> {
  readonly direction = 'next';
  getNodeAtCaret(): null | LexicalNode {
    return this.origin.getNextSibling();
  }
  insert(node: LexicalNode): this {
    this.origin.insertAfter(node);
    return this;
  }
}