Highlight merge conflicts in monaco like in VSCode
Closed this issue · 1 comments
Symbolk commented
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:
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?
Symbolk commented
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:
Complete code at: https://github.com/Symbolk/IntelliMerge-UI