monaco-editor：垂直线填充

Question

Inspired by IntelliJ's 3 panel merge conflict view, I am trying to build something similar for vscode. I figured out, that I can integrate three complete customizable monaco-editors within a vscode Webview. But I cannot figure out, how monaco-editor applies the line padding in its diff-view like in the picture below (as I don't want to have a two-way but a 3-way diff using the internal diff-view is not an option for me):

Is it done through custom lineNumbers: lineNumber => isPaddingLine ? '' : lineNumber - someOffset, lineNumbers: lineNumber => isPaddingLine ? '' : lineNumber - someOffset, and inserting empty lines ("padding lines") at the related place and apply a deltaDecorations to those lines?

I hope there is a more easy way, which does not need the "padding lines" hack. Ideally I could just add something to a deltaDecoration like padding-bottom: $Xem

If I have just overlooked a way with vscode's api to achieve something like that, that would be of course more welcome than to deal directly with monaco-editor.

Thx a lot for any help / ideas :)

Answer 1

I finally found it :) IViewZone is the used magic.

And https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-listening-to-mouse-events is a nice example