Feature: Wrap line and scrolling in code blocks
- Dominant language
- TypeScript
- Stars
- 23.9k
- Forks
- 2.2k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 57
Description
## Description
Currently, a code block in the playground can contain content of any size, with overflow and scrolling within the element. When a line inside the code block is too long and overflows the container, navigating further within the line becomes difficult because changing the selection position with MOVE_TO_END (Ctrl + ArrowRight) or MOVE_TO_START (Ctrl + ArrowLeft) does not scroll the content inside the block
https://github.com/user-attachments/assets/85fbcac2-117e-4eda-bbc5-30f2880018c5
It would be nice to solve this problem by at least enabling auto-scrolling within the line when moving the cursor with the arrow keys. Ideally, this should be supplemented so that the content within the block doesn’t overflow, but instead wraps to the next line without creating a line break. Something like the word wrap mode in VS Code
[Playground example](https://playground.lexical.dev/#doc=H4sIAAAAAAAAE-2cwY7TMBCGX6XyOVlaqLarsHAAiQMHWKncAFWT2E3cOnbkTEqjVd8duV3Y1R4TidngOTVxEs_Unn88nw--F0pqdH6NgEpk98I7h-G3qLSRXlmRfX92IxWCNiKbJ2LrfA14vqydVCITNrQYkYgWexMaRCJQHVFk4jZc9k1oLJxUaaXLyuiyQpGIg_KtdlZki0T8bf92ebnpbIEdYHh-Sobbl_ow0AOEcpTlGZFdLQcaBkSfWqjVKPPviCf8hyB2oNQHlW69UqZPg67SvNhpK4uiACi3DTS7XQ1baOq63O-r0sGY6TqA6cbNF_l4UemkMNC2LJWXJBVWAokSJCCk6ojKBhMpLyC0DvB6MQWVnOOcdULowOf11y-zT-cvUHlWBYkqLi2sA1LEbRsD_VAvvGuUx36UCxl19OfGFfuBToxX_9vYQ_A9sf3bV-QapNpmIh_6aEeeaskFryE1kCvD6y6lA6E7qBTIWa1sx_UniRi84_KT1gGjW8zdkeOf-StOATB_xc5fQ8U__p83rtVn92MOPshbZzocmganH3_kKZAcQpn_mf-Z_7nuY_6fWAnE_D91GTD_M_9HLQDmf-Z_5n_m_4hTIDmEMv8z_zP_c93H_D-xEoj5f-oyYP5n_o9aAMz_zP_M_8z_EadAcghl_o-V__MOcXD-m-oWAJ9dQJ7yPpzjbrMJ5xbMPrq6VhbvTFdqu1lX7tdDS3t5bWicMB2N0wlqZDqidSCI4Y8-RqUslgHvGLMW_hstxF63ai5ZOf38WwcKzjwvIvNQb1ZQpZ7oB550r4J89HmLLta4n_jQ_0yE1F4V57vMdsY8ehFsaSuVvXj0xNYzCwZs2UEZnlZYmyG9PhyR-djr6RT6bXENByVFtlitVqvrxZvl9eubm0S0rvNF-O7OQF9611n59Gsxv1our-bi9BuhLZobDloAAA)
## Impact
In the case of word wrap mode, it would be nice to be able to configure it via an extension. The challenge in implementing such a mode is that we will most likely have to use the experimental `getDOMSlot` API https://github.com/facebook/lexical/issues/8201, since it is impossible to render such an adaptive editor gutter using only pseudo-elements
Contributor guide
Assessment
This issue has not been assessed yet.