add word wrap to code viewer

[stephansama]

Describe the feature

currently the code viewer does not have word wrap would be cool to have word wrap

Additional information

• Would you be willing to help implement this feature?

Final checks

• Read the contribution guide.
• Check existing issues.

[gameroman]

Also I think it should be an option/toggle, because sometimes you don't want code to be wrapped

Can also add a shortcut for the toggle, for example Alt + Z

[stephansama]

Also I think it should be an option/toggle, because sometimes you don't want code to be wrapped

Can also add a shortcut for the toggle, for example Alt + Z

my implementation has a button i can add the keyboard shortcut

[knowler]

Some thoughts here:

• It would be good to use CSS to do the actual line wrapping.
• We’ll need to ensure the line numbers remain accurate when lines wrap. So far I think all of the solutions don’t do this. To do this, I think we need to create a CSS grid further up the tree, so that the line numbers are in one column and the code is in the other, so that the entire row grows when the line wraps.
• There likely already are performance issues with the existing code viewer and any JS wrapping solution will likely accentuate those problems. Even with using CSS I’d expect to run into problems after a certain amount of lines. We’ve already run into issues with CSS grid with a large amount of items in Firefox.
• We could use content-visibility: auto to tell the browser to skip rendering of lines that aren’t “relevant”. We could also integrate that into whatever we use for syntax highlighting by leveraging the contentvisibiilityautostatechange event (yes… that’s the longest event name), though that would require the highlighter to require line-by-line highlighting. Since it applies strict containment (i.e. size, layout, paint, and style) that will affect the scrollbars (they’ll be jumpy) and so we’ll need to manually set the intrinsic size of the line ourselves which is a guess. Setting it to 1 line is a fairly reasonable guess.

I expect all of this will require a fair bit of prototyping all of the various parts before we converge on a solution.