microsoft/monaco-editor

Highlight merge conflicts in monaco like in VSCode

Closed this issue · 1 comments

I am integrating the monaco-editor into an Electron app for three-way merge, so I want to highlight merge conflict blocks in VSCode style. Since VSCode itself is based on monaco, I think it is feasible.

monaco-editor version: 0.17.1
**Browser:**Chromium
OS: Windows10

The screenshot of the tool:

image

The expected result:
image

I check the API doc and find a related one that might be useful: colorizeModelLine(model: ITextModel, lineNumber: number, tabSize?: number): string., but I still do not know how to do that because examples are absent. Can anyone give me a hint?

I have managed to achieve this by 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:

image

Complete code at: https://github.com/Symbolk/IntelliMerge-UI