You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When deleting across adjacent unmergeable text spans inside a display: inline-grid (or presumably display: grid) container, Lexical does not properly extend the selection into the next span, causing deletion to get stuck.
Previously, it was possible to work around this issue by manually extending the selection when deleting across boundaries (see span-deletion.ts), but this workaround no longer functions in Lexical 0.27.0+ due to a change in selection syncing (related change).
The expected behavior is for RangeSelection.modify to correctly move from the edge of one text node to the next before applying the native selection change, similar to $modifySelectionAroundDecoratorsAndBlocks.
Steps to Reproduce
A minimal reproduction can be found here: StackBlitz.
Position the caret between "A" and "B".
Press Del to delete "B".
Press Del again.
Expected Results
Both "B" and "C" should be deleted sequentially.
Actual Results
Deletion gets stuck either at "B" or at "C" (it depends on if the caret initially lies at the start of the "B" span or the end of the "A" span).
This only occurs when using display: inline-grid. Disabling inline-grid allows deletion to function normally.
Use cases
Any applications requiring adjacent text nodes inside a container like display: grid (ruby text editing in our case)
Alternative Solutions Considered
Manually adjusting the selection before deletion (which worked in 0.26 but no longer works in 0.27 due to the updated selection syncing behavior).
Finding an alternative layout approach that avoids using grid etc. (In our specific case, browser support for ruby layout has come a long way since we started but still only Firefox supports the necessary HTML tags to render mono ruby without interleaving the transcription nodes.)
Impact
This affects developers working with custom nodes that put multiple adjacent (unmergeable) text nodes inside certain containers (at least display: inline-grid but possibly others like display: flex too).
The issue prevents deletion across text spans, breaking expected editor behavior.
Fixing this would improve selection handling and deletion reliability in specialized text-editing scenarios.
@birtles if you take a look at #7317 I think all of these issues are sorted in a way where you can delete your workarounds for delete and arrow keys, but I need you to verify that it does work as expected for your use case before I go through the trouble of writing e2e tests, debugging the existing ones, and getting it reviewed/merged with this new behavior.
@etrepum That looks awesome. Thank you so much. I tried it out now and confirmed that I can drop both the deletion and navigation workarounds in at least Firefox and Chrome.
However, it's not working for me in Webkit. Webkit often throws the selection outside the container with content like this so we have workarounds to detect that and restore it.
Also, I've got about a dozen newly failing E2E tests with this change which I need to dig into. It's possible they're all just cases of code that needs to be updated (ideally deleted) to reflect the new behavior but I need to go through each one to just ensure they're not unintended changes in behavior.
Great, I’ll look a bit deeper. Didn’t do any WebKit testing or look at any of the e2e failures, but since you confirmed that this approach sorts out your navigation issues I’ll spend some more time with it
Description
When deleting across adjacent unmergeable text spans inside a
display: inline-grid
(or presumablydisplay: grid
) container, Lexical does not properly extend the selection into the next span, causing deletion to get stuck.Previously, it was possible to work around this issue by manually extending the selection when deleting across boundaries (see
span-deletion.ts
), but this workaround no longer functions in Lexical 0.27.0+ due to a change in selection syncing (related change).The expected behavior is for
RangeSelection.modify
to correctly move from the edge of one text node to the next before applying the native selection change, similar to$modifySelectionAroundDecoratorsAndBlocks
.Steps to Reproduce
A minimal reproduction can be found here: StackBlitz.
Expected Results
Actual Results
This only occurs when using
display: inline-grid
. Disablinginline-grid
allows deletion to function normally.Use cases
display: grid
(ruby text editing in our case)Alternative Solutions Considered
grid
etc. (In our specific case, browser support for ruby layout has come a long way since we started but still only Firefox supports the necessary HTML tags to render mono ruby without interleaving the transcription nodes.)Impact
display: inline-grid
but possibly others likedisplay: flex
too).(As discussed with @etrepum on Discord)
The text was updated successfully, but these errors were encountered: