facebook / facebook/lexical

Feature: Wrap line and scrolling in code blocks

Open
#8,459 7 comments 1 reaction 0 assignees View on GitHub
code blocks enhancement
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

Image

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.