How to highlight merge conflict blocks in monaco-editor like VSCode?

Question

VSCode has a good feature to highlight merge conflict blocks in this way:

So I wonder how to achieve that in monaco-editor?

I checked the API and found a related one: colorizeModelLine(model: ITextModel, lineNumber: number, tabSize?: number): string.

Answer 1

I have managed to achieve this with the following code:

 this.editor.deltaDecorations(
        this.editor.getModel().getAllDecorations(),
        [{
            range: new monaco.Range(
              conflictBlock.right_start,
              0,
              conflictBlock.right_end,
              0
            ),
            options: {
              isWholeLine: true,
              className: 'rightLineDecoration',
              marginClassName: 'rightLineDecoration'
            }
          }]
      )

It looks like this:

The complete code can be found at: https://github.com/Symbolk/IntelliMerge-UI