Show quick fix for an error in Monaco Editor

Question

I'm experimenting with Monaco as an editor for a custom language.

I use this code to show an example error in the playground (some parts omitted):

const editor = monaco.editor.create(<omitted>);
const model = editor.getModel();
model.onDidChangeContent(event => {
   const value = model.getValue();
   const errors = GetErrors(value); // Implementation of GetErrors() not shown here

    monaco.editor.setModelMarkers(model, "Example", errors);
});

Which results in the desired error in the editor:

How do I make a quick fix appear for that error? (Instead of "No quick fixes available")

I've looked at monaco.languages.registerCodeActionProvider() but I don't see how that ties in to the error detection code.

More generally, I've struggled to find examples for implementing Quick Fix with Monaco.

Answer 1

I got it working using a Code Action Provider.

The key was to use context.markers inside provideCodeActions() to get the errors I raised elsewhere (via setModelMarkers() ).

monaco.languages.registerCodeActionProvider("myLanguage", {
    provideCodeActions: (
        model /**ITextModel*/,
        range /**Range*/,
        context /**CodeActionContext*/,
        token /**CancellationToken*/
    ) => {

        const actions = context.markers.map(error => {
            return {
                title: `Example quick fix`,
                diagnostics: [error],
                kind: "quickfix",
                edit: {
                    edits: [
                        {
                            resource: model.uri,
                            edits: [
                                {
                                    range: error,
                                    text: "This text replaces the text with the error"
                                }
                            ]
                        }
                    ]
                },
                isPreferred: true
            };
        });
        return {
            actions: actions,
            dispose: () => {}
        }
    }
});

Would still love to know if I'm missing an obvious source of documentation or examples for Monaco. I pieced this together using https://microsoft.github.io/monaco-editor/api/index.html and monaco.d.ts but it took a lot of trial and error.