Bug: Backspace does not move the caret to the previous shadow root element
- Dominant language
- TypeScript
- Stars
- 23.9k
- Forks
- 2.2k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 61
Description
Lexical version: 0.45 latest
## Steps To Reproduce
1. Insert a shadow root element, such as CollapsibleContainer in the playground
2. Insert a paragraph of text after the shadow root element
3. Insert your cursor in the middle of the paragraph text and press Backspace
Link to code example: https://playground.lexical.dev/#doc=H4sIAAAAAAAAE9WTT2_CMAzFv8s7Z6gdMFiOHDhP4jjtkDUGIoW4cl00hPrdp5T9K9MmbTtMnCLbes8_28oR5IOyrNQpwR4hzJrfahuiF0qw94PgwcAHoUoDJ9jUxmiwZtk5hQUMQvKUFLYw0ENNsKiduI24eguDPUnTC0sDpSddviiLU7jSQ8wSdOZrgv_A-XmbimN0dRMeI11p0EiDdt_P50ldiL3b-p1oxz4bp5yJMGhe6U6wsFgy4w2gzw16XsSuKk6ay38kP7d0IZGcTcF13rdKS5_O8dsLLJxc5AX6Xz9A7Qyia3Tl9uRhy9m8vJ3dXE_G8-nYoOFWqqy7i-6wEW6T_6hGMZpMRwW6ZxU_aJVeBAAA
## The current behavior
The caret gets stuck at the beginning of a paragraph and does not move to the previous element
https://github.com/user-attachments/assets/06250fb6-58a4-4843-81ab-fac36da77e82
## The expected behavior
The caret moves to the nearest available text-containing node, and the text after the caret is appended to it
## Impact of fix
Similar behavior works in Notion and seems entirely expected. The only caveat is what happens if the last element in the shadow root is a decorator, such as an embed video. In this case, I see several options:
- The caret stops at the paragraph and does not move anywhere.
- The caret always jumps over any decorators and the text appends to the nearest available node (like in Notion)
Contributor guide
Research direction
Reproduce the issue in the linked playground using a CollapsibleContainer shadow root, a following paragraph, and Backspace from the paragraph. Trace the caret and nearest text-containing-node behavior from that reproduction, including the decorator case described in the issue. Done means Backspace moves the caret to the nearest available text-containing node and appends the remaining text there.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100