A working sample of code action and quick fix in the playground

Question

I'm looking for a sample of code action with quick fix that works in the playground. I tried this code in the playground, but it did not work.

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

monaco.editor.create(document.getElementById("container"), {
    value: "const foo = 1;",
    language: "mySpecialLanguage",
    lightbulb: { enabled: false },
});

monaco.languages.registerHoverProvider('mySpecialLanguage', {
    provideHover: function (model, position) {
        return {
            range: new monaco.Range(1,1,1,5),
            contents: [
                { value: "Let's correct it" }
            ]
        };
    }
});

monaco.languages.registerCodeActionProvider('javascript', {
    provideCodeActions(model, range, context, token) {
        return Promise.resolve({
            actions: [{
                title: "Testing",
                diagnostics: [{
                    code: "0",
                    endColumn: 5,
                    endLineNumber: 1,
                    message: "message",
                    severity: 8,
                    startColumn: 1,
                    startLineNumber: 1,
                }],
                edit: {
                    edits: [{
                        edit: { 
                            range: new monaco.Range(1, 1, 1, 5), 
                            text: `text` },
                        resource: model.uri,
                    }],
                },
                kind: "quickfix",
                title: "title"
            }],
            dispose: () => { },
        })
    }
});

What I expect is, we could hover on const foo = 1, then we see Let's correct it, under which we could see Quick Fix, on which we could click to fix.

Does anyone know why the code does not work?

Answer 1

I'm not sure why the code you posted doesn't work, but if you copy and paste the below code into the Monaco Playground, it will display a quickfix named My quickfix and replace the text highlighted as an error with the words replacement text:

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

monaco.editor.onDidCreateModel(function(model) {
    function validate() {
      var textToValidate = model.getValue();
      
      var markers = [{
        severity: monaco.MarkerSeverity.Error,
        startLineNumber: 1,
        startColumn: 3,
        endLineNumber: 1,
        endColumn: 5,
        message: 'Lets correct it'
      }];
      monaco.editor.setModelMarkers(model, 'myLanguage', markers);
    }

    var handle = null;
    model.onDidChangeContent(() => {
      // debounce
      clearTimeout(handle);
      handle = setTimeout(() => validate(), 500);
    });
    validate();
});

monaco.languages.registerCodeActionProvider("myLanguage", {
    provideCodeActions: (model, range, context, token) => {
        const actions = context.markers.map(error => {
            return {
                title: `My quickfix`, // Name of quickfix
                diagnostics: [error],
                kind: "quickfix",
                edit: {
                    edits: [
                        {
                            resource: model.uri,
                            edit: {
                                range: error,
                                text: "replacement text" // text to replace with
                            }
                        }
                    ]
                },
                isPreferred: true
            };
        });
        return {
            actions: actions,
            dispose: () => {}
        }
    }
});

var ed = monaco.editor.create(document.getElementById("container"), {
    value: "cont foo = 1;",
    language: "myLanguage",
    lightbulb: { enabled: false },
});

The validate() function in monaco.editor.onDidCreateModel adds a dummy error marker into the model which displays an error on line 1, column 3-5 . In a real world example, you'd probably want to validate model.getValue() in the validate() function and set the model markers based on the result of that validation.

The code within monaco.editor.registerCodeActionProvider defines the list of quick fixes you want to be displayed. In this example it is a hardcoded list with a single quickfix, but in real life, you would probably want to change the callback inside context.markers.map to some logic that checked the error.message property, and returned the correct suggestion for the message.

When you hover over the error on line 1, you will see Lets correct it and the Quick Fix... link. Clicking the Quick Fix link should display a single suggestion My quickfix. When you click on this, it will replace the text underlined by the error with the text defined in the quickfix (replacement text).