Search code examples
monaco-editor

How to enforce Monaco Editor to render markers that I set to dedicated model?


I'm instantiating Monaco Editor in the browser with vanilla JavaScript (no react or other wrappers).

First I instantiate the editor and fill it with some placeholder text. Then I'm crating a new monaco model with actual text and the diagnostics markers to be rendered in the editor, and switching the editor to this model.

The editor displays model's text, but it does not display the markers that I set.

// Monaco initialization.
const ed = monaco.editor.create(document.getElementById('container'), {
    value: 'Loading text...',
});

monaco.languages.register({
    id: 'my_lang',
});

// Then creating a dedicated model associated with registered language.
let model = monaco.editor.createModel(
    'some text',
    'my_lang',
    'inmemory://test_script'
);

// Adding some markers to the model.
monaco.editor.setModelMarkers(model, 'my_lang', [
    {
        startLineNumber: 1,
        startColumn: 1,
        endLineNumber: 1,
        endColumn: 2,
        severity: monaco.MarkerSeverity.Error,
        message: 'test error message',
    },
]);

// Switching the editor to this new second model.
ed.setModel(model);

// Monaco reports that the model contains described markers,
// but it does not render them in the editor.
console.log(
    monaco.editor.getModelMarkers({
        owner: 'my_lang',
        resource: 'inmemory://test_script',
    })
);

Tested with Monaco 0.47.0 AMD in the browser.

Monaco also does not render markers even if I switch the editor to the second model immediately after the model creation (and before I set markers).


Solution

  • I'm sorry for misleading. Markers are rendering perfectly fine when switching the model, but there is a bug in my code when I created the model.

    I had to specify monaco.Uri.parse('inmemory://test_script') instead of a 'inmemory://test_script' string:

    let model = monaco.editor.createModel(
        'some text',
        'my_lang',
        monaco.Uri.parse('inmemory://test_script')
    );
    

    Next time I will read the documentation carefully.