Feature: Wrap line and scrolling in code blocks

[levensta]

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

Screen.Recording.2026-05-03.at.02.09.31.mov

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

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 #8201, since it is impossible to render such an adaptive editor gutter using only pseudo-elements

[vantage-ola]

attempted to fix this... still loads of work to get that clean word wrap mode on vscode.

[levensta]

Did you try to use $getDOMSlot()?

[vantage-ola]

not at all. I will look into $getDOMSlot()
This was just a rush fix to get a feel on how it works.

[KesavSundarM]

Attempted a fix

#8468