Clamp triple-click selection to visual line, with drag support#1048
Clamp triple-click selection to visual line, with drag support#1048flavorjones wants to merge 2 commits into
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a Lexxy extension that overrides Lexical’s default triple-click behavior to clamp the resulting selection to the visual line (bounded by <br> line breaks) and extends that behavior to triple-click-drag across one or more visual lines/blocks.
Changes:
- Introduces
VisualLineSelectionExtensionto clamp triple-click (and triple-click-drag) selection to visual-line boundaries, with decorator-aware fall-through. - Registers the new extension by default in
<lexxy-editor>’s base extension set. - Adds comprehensive Playwright coverage for visual-line triple-click selection behavior and related edge cases.
Tip
If you aren't ready for review, convert to a draft PR.
Click "Convert to draft" or run gh pr ready --undo.
Click "Ready for review" or run gh pr ready to reengage.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| test/browser/tests/editor/visual_line_selection.test.js | Adds browser-level tests covering triple-click clamping, drag selection, and edge cases. |
| test/browser/fixtures/editor.js | Exposes $getSelection on window for use inside page.evaluate() blocks in browser tests. |
| src/extensions/visual_line_selection_extension.js | Implements the visual-line clamping logic for triple-click and triple-click-drag. |
| src/elements/editor.js | Registers the new extension as part of the editor’s default extensions. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This comment was marked as outdated.
This comment was marked as outdated.
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
7f2aea0 to
21a31a8
Compare
|
The rails system tests are failing because of a bad commit on Rails |
Existing tests only stubbed caretRangeFromPoint to return null. This test stubs it to a real Range and asserts the selection follows it, exercising the Safari 17.2 codepath.
|
Closing in preference to #1050 |
ref: https://app.basecamp.com/2914079/buckets/41746046/card_tables/cards/9861391060
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
VisualLineSelectionExtensionthat 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:
🤖 Assisted by Claude