Skip to content

[lexical] Bug Fix: narrow triple-click selection to one line#8490

Closed
abhinavgautam01 wants to merge 7 commits into
facebook:mainfrom
abhinavgautam01:fix/7592-triple-click-code-block
Closed

[lexical] Bug Fix: narrow triple-click selection to one line#8490
abhinavgautam01 wants to merge 7 commits into
facebook:mainfrom
abhinavgautam01:fix/7592-triple-click-code-block

Conversation

@abhinavgautam01

Copy link
Copy Markdown
Contributor

Description

In multiline blocks (e.g. code blocks, multi-line quotes, plain-text layouts), a triple-click often causes the browser to select the entire container instead of the line under the pointer. Lexical already reads the DOM selection for triple-click (click with detail === 3), so the editor kept that over-broad range.
This PR adds $tryNormalizeTripleClickLineSelection, which uses caretPositionFromPoint / caretRangeFromPoint at the event coordinates to find the intended line, then narrows the selection to:

  • the \n-delimited line when the content lives in a single TextNode, or
  • the run of nodes between LineBreakNode markers when the block uses line breaks as siblings.
    The click handler (onClick in LexicalEvents) runs this before the existing cross-node triple-click workaround, so behavior stays compatible when normalization does not apply.
    Closes Bug: Triple-click make wrong selection #7592

Test plan

Before

  • Repro: In the playground, add a multiline code block (or similar), triple-click a line — selection could span the whole block.
  • No unit coverage for “triple-click → one line” normalization.

After

  • pnpm run test-unit -- packages/lexical/src/__tests__/unit/LexicalSelection.test.ts (includes Regression Bug: Triple-click make wrong selection #7592: multiline TextNode and
    LineBreakNode-separated lines, with mocked caret APIs)

@vercel

vercel Bot commented May 10, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
lexical Ready Ready Preview, Comment May 15, 2026 1:33am
lexical-playground Ready Ready Preview, Comment May 15, 2026 1:33am

Request Review

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label May 10, 2026
Comment thread packages/lexical/src/__tests__/unit/LexicalSelection.test.ts Outdated
Comment thread packages/lexical/src/__tests__/unit/LexicalSelection.test.ts Outdated
Comment thread packages/lexical/src/LexicalSelection.ts Outdated
Comment thread packages/lexical/src/LexicalSelection.ts Outdated
Comment thread packages/lexical/src/LexicalSelection.ts Outdated
Comment thread packages/lexical/src/LexicalSelection.ts Outdated
Comment thread packages/lexical/src/LexicalSelection.ts Outdated
Comment thread packages/lexical/src/LexicalSelection.ts Outdated
@etrepum etrepum changed the title fix(lexical): narrow triple-click selection to one line [lexical] Bug Fix: narrow triple-click selection to one line May 10, 2026

@etrepum etrepum left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will be much shorter and simpler using the NodeCaret APIs that I suggested in the previous review. Code size is important, especially in the core lexical package.

@abhinavgautam01

Copy link
Copy Markdown
Contributor Author

This will be much shorter and simpler using the NodeCaret APIs that I suggested in the previous review. Code size is important, especially in the core lexical package.

Reworked the line-boundary walk to use $getTextPointCaret, sibling for…of iteration (same NodeCaret / PointCaret path as other caret code), and getParentCaret('root') to climb out of inline subtrees, with the shared loop factored into $walkTripleClickLineCaretBounds so $getTripleClickLineTextNodeBounds stays small.

Also fixed ci-check: the test helper no longer uses delete on doc.caretRangeFromPoint (TS2790)—it restores the previous implementation instead...

@abhinavgautam01 abhinavgautam01 requested a review from etrepum May 10, 2026 18:43
Comment thread packages/lexical/src/LexicalSelection.ts Outdated
@abhinavgautam01 abhinavgautam01 requested a review from etrepum May 10, 2026 19:11
@etrepum etrepum added the extended-tests Run extended e2e tests on a PR label May 10, 2026
flavorjones added a commit to basecamp/lexxy that referenced this pull request May 12, 2026
Triple-clicking is overridden by Lexical to avoid "selection overflow"
edge cases, and the resulting selection behavior is undesirable -- it
selects the entire block (the `<p>` tag contents) and not the line.

This bug was reported upstream at facebook/lexical#7592 in June 2025.

This PR implements a `VisualLineSelectionExtension` that will, on a
triple-click, clamp the selection to a contiguous run of nodes bounded
by line breaks. It also handles a triple-click-drag to select multiple
lines.

There is an upstream branch in-progress at facebook/lexical#8490, but
its scope is narrower and only handles a triple-click on a text node
within a single block. This extension additionally covers:

- Triple-click-drag (forward and backward)
- Cross-block selection when the drag spans multiple blocks
- Line-granular drag — single line, multi-line in a block, and multi-line across blocks
- Decorator-aware fall-through so attachments still NodeSelect
- Clicking on nodes other than text nodes (e.g., whitespace between nodes or at end-of-line)

🤖 Assisted by Claude
@abhinavgautam01

Copy link
Copy Markdown
Contributor Author

ping @etrepum

@flavorjones

Copy link
Copy Markdown
Contributor

Just wanted to note I've opened an alternative PR at #8517 that removes the triple-click handler from onClick entirely.

@abhinavgautam01

Copy link
Copy Markdown
Contributor Author

@etrepum should i close this one, on behalf of #8520 ..!?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. extended-tests Run extended e2e tests on a PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: Triple-click make wrong selection

3 participants