Skip to content

Stop propagation of the triple-click to prevent Lexical's handler from running#1050

Merged
flavorjones merged 1 commit into
mainfrom
text-selection-stop-propagation
May 14, 2026
Merged

Stop propagation of the triple-click to prevent Lexical's handler from running#1050
flavorjones merged 1 commit into
mainfrom
text-selection-stop-propagation

Conversation

@flavorjones

@flavorjones flavorjones commented May 13, 2026

Copy link
Copy Markdown
Member

Lexical's onClick handler implements a triple-click handler that is trivial/anemic/naïve. The intention of the change, made in facebook/lexical#4512, seems to be to deal with browsers' "overselection" behavior, where a triple-click selection might end at offset 0 of the following block, which can cause issues when transforming the selection. But the implementation breaks many common real-world use cases.

An upstream bug report was filed in June 2025 for this behavior: facebook/lexical#7592

Just to name two common impacted scenarios that are top-of-mind:

  • triple-clicking in a paragraph with soft line breaks (<br> tags)
  • triple-click-dragging to select multiple lines

The specific motivating reason for Lexical's handler seems to be that the "Header" tool in Lexical doesn't handle this overselection and will header-ify the following line; and that table cells can be deleted entirely once selected.

However, Lexxy has its own "Header" tool that doesn't have this issue; and Lexical tables no longer exhibit the cell-deletion behavior. I think it might be better to improve the formatting tool(s) than to hack the selection mechanism.

Hopefully, we can remove this once Lexical addresses this behavior. Some possible upstream approaches for that might be:

  • Move the existing selection handling logic into a real handler that applications can pre-empt.
  • Fix the selection behavior, or drop the triple-click handler completely.

ref: https://app.basecamp.com/2914079/buckets/41746046/card_tables/cards/9861391060

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Adds a Lexxy extension that stops propagation of triple-click events before Lexical's built-in onClick handler can process them, working around Lexical's overly aggressive triple-click selection logic that breaks soft line breaks and multi-line click-drag selections.

Changes:

  • New PreventLexicalTripleClickExtension registers a capture-phase click listener on the editor content element and calls stopPropagation() when event.detail === 3.
  • Registers the new extension in LexicalEditorElement's extensions list.
  • Adds a browser test verifying triple-click and triple-click-drag selection behavior across paragraphs with <br> soft breaks.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
src/extensions/prevent_lexical_triple_click_extension.js New extension stopping triple-click event propagation in capture phase.
src/elements/editor.js Imports and registers the new extension.
test/browser/tests/editor/prevent_lexical_triple_click.test.js Browser tests covering triple-click and triple-click-drag selections.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@samuelpecher samuelpecher 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.

YES PLEASE

Comment thread src/extensions/prevent_lexical_triple_click_extension.js Outdated
…m running.

Lexical's onClick handler implements a triple-click handler that is
trivial/anemic/naïve. The intention of the change, made in
facebook/lexical#4512, seems to be to deal with browsers'
"overselection" behavior, where a triple-click selection might end at
offset 0 of the following block, which can cause issues when
transforming the selection. But the implementation breaks many common
real-world use cases.

An upstream bug report was filed in June 2025 for this behavior:

    facebook/lexical#7592

Just to name two common impacted scenarios that are top-of-mind:

- triple-clicking in a paragraph with soft line breaks (`<br>` tags)
- triple-click-dragging to select multiple lines

The specific motivating reason for Lexical's handler seems to be that
the "Header" tool in Lexical doesn't handle this overselection and
will header-ify the following line; and that table cells can be
deleted entirely once selected.

However, Lexxy has its own "Header" tool that doesn't have this issue;
and Lexical tables no longer exhibit the cell-deletion behavior. I
think it might be better to improve the formatting tool(s) than to
hack the selection mechanism.

Hopefully, we can remove this once Lexical addresses this
behavior. Some possible upstream approaches for that might be:

- Move the existing selection handling logic into a real handler that
  applications can pre-empt.
- Fix the selection behavior, or drop the triple-click handler
  completely.

ref: https://app.basecamp.com/2914079/buckets/41746046/card_tables/cards/9861391060
@flavorjones flavorjones force-pushed the text-selection-stop-propagation branch from 3276a63 to 495bd39 Compare May 14, 2026 12:47
@flavorjones flavorjones merged commit acb3f93 into main May 14, 2026
12 checks passed
@flavorjones flavorjones deleted the text-selection-stop-propagation branch May 14, 2026 18:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants