fix linebreaks

[aldy505]

fix linebreaks

[kmarrip]

can you add more context for this @aldy505

[elianiva]

So, we want an option to soft-wrap the text like this:

Notice how the wrapped text has no line number. In order to do that, we need to wrap them from the renderer because if you split the line and then highlight it using Shiki, 1) It will mess up the highlighting, 2) It will have a line number.

This would be super easy on plain HTML rendered on a browser, but we use SVG. Someone needs to figure out how to render multiline on SVG after the text has been highlighted. There are some things to consider:

1. Shiki returns token, one will need to figure out how to split them after a certain amount of characters. PORT in that screenshot will count as 1 token but you need to split it into 2 without loosing its highlight.
2. If you render multiple lines, you must add an offset for the next line since the current line, which should take, let's say 20px, now is taking 40px because it got split into 2. The next line which should have 40px offset now needs to have 60px offset.