profile
viewpoint

Ask questionsHighlight merge conflicts in monaco like in VSCode

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?

microsoft/monaco-editor

Answer questions Symbolk

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

useful!

Related questions

Monarch: How do you add "@keywords" key to "language object"? (undocumented) hot 3
Error: Cannot find module 'monaco-editor/esm/vs/editor/contrib/gotoSymbol/goToCommands' hot 2
Removing the tooltip on the read-only editor that says 'cannot edit in read-only editor' hot 1
Monaco paste event hot 1
Registering/Providing custom Commands/CodeActions hot 1
How to get the line count including line wraps hot 1
Error: Cannot find module 'monaco-editor/esm/vs/editor/contrib/goToDefinition/goToDefinitionCommands' hot 1
TypeScript declaration preview from extra lib results in error hot 1
Editor props/extends the actual width of the parent that is a flexbox item hot 1
Problem with insane.js while using monaco-editor@0.18.0 hot 1
Change the language of an existing editor hot 1
javascript/typescript typedefs lost when webworker times out hot 1
Can't scroll in firefox hot 1
How to add simple custom language support? hot 1
monaco-editor polute the global variables, making incompatible with other JS libraries, such as CodeMirror, RequireJS, SeaJS, etc. hot 1
Github User Rank List