facebook / facebook/lexical

Bug: Backspace does not move the caret to the previous shadow root element

Open
#8,730 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.