[examples/editable-voids] Nested rich text editor stops accepting caret focus after click

[wudidewo12]

Description

In examples/editable-voids, the nested rich text editor under Tell us about yourself can stop accepting caret placement and input after clicking inside it.

This is separate from the runtime error after undoing a newly inserted editable void. This issue is about the nested editor becoming effectively unusable: clicks no longer place the caret and typing does not work.

Recording

Screenshot attached below:

Nested rich text editor after it stops accepting caret/clicks:

CleanShot.2026-05-23.at.00.46.05.mp4

Sandbox

No standalone sandbox. Reproduced in the Slate Editable Voids example.

Local reproduction URL:

http://localhost:3100/examples/editable-voids

Steps

1. Open examples/editable-voids.
2. Scroll to the nested rich text editor under Tell us about yourself.
3. Click inside that nested rich text editor.
4. Try to move the caret by clicking elsewhere inside the same editor.
5. Try to type.

Expectation

Clicking inside the nested rich text editor should place the caret at the clicked location and allow typing.

Actual behavior

The nested rich text editor only appears usable immediately after refresh at the first line / first position. After clicking once, the caret disappears. Further clicks inside the editor do not place a caret, and typing does not work.

Environment

• Slate Version: v2 branch, commit e62c2046
• Operating System: macOS
• Browser: Chrome
• Local examples site: http://localhost:3100

Impact

This makes the nested rich text editor in examples/editable-voids unusable for normal mouse-based editing.

[zbeyens]

🟢 95-100% confidence

Phase	🧪 Tests	🌐 Browser
Reproduced	✅ Current v2 already keeps the nested editor usable	✅ Desktop Chrome mouse-click flow on editable-voids
Verified	🟢 Added a focused Chrome Playwright regression row for issue 18	✅ Repeated clicks moved the caret and native typing inserted text

🌐 Browser Check

• Open http://localhost:3100/examples/editable-voids.
• Click inside the nested rich text editor under Tell us about yourself.
• Click the start of the text, then the rich leaf, then type.
• Confirm the caret follows the clicked text position and typing inserts into the nested editor.

✅ Outcome

• Current v2 keeps the nested editor caret usable after real mouse clicks.
• Native keyboard input goes into the nested editor instead of disappearing or falling back to the outer editor.
• I added a desktop Chrome Playwright row that locks this exact flow.

⚠️ Caveat

• The issue attachment says screenshot, but the GitHub asset resolves to an MP4. I used that recording as evidence for the click-caret flow.

🏗️ Design

• Chosen owner: slate-react / slate-browser nested editable browser proof.
• Why not quick patch: N/A; current v2 behavior already passes the reported Chrome flow.
• Why not broader change: The runtime already preserves nested editor focus/caret for this case, so a larger focus rewrite would be riskier than useful.

🧪 Verified

• PLAYWRIGHT_BASE_URL=http://localhost:3100 PLAYWRIGHT_RETRIES=0 PLAYWRIGHT_WORKERS=1 bun playwright playwright/integration/examples/editable-voids.test.ts --project=chromium --grep "keeps nested editor caret usable after real mouse clicks"
• PLAYWRIGHT_BASE_URL=http://localhost:3100 PLAYWRIGHT_RETRIES=0 PLAYWRIGHT_WORKERS=1 bun playwright playwright/integration/examples/editable-voids.test.ts --project=chromium --grep "nested editor"
• bun check
• bun lint:fix