Monaco Editor registerCompletionItemProvider removes the default local variable completion

Question

In Monaco Editor, using the standard initialization such as:

monaco.editor.create(document.getElementById("container"), {
    value: "",
    language: "csharp"
});

Will have an out-of-the-box local variables code completion. For example, using the standard initializaton above, and typing the code like this:

string testVariable = "This is a string";
int aValue = 123;

The Code Completion will recognize both "testVariable" and "aValue" variables and show them on the Code Completion list.

But, if we add a registerCompletionItemProvider to the initialization like this:

//Custom Code Completion function
function createCompleters() {
    return [
        {
            label: 'customFunction1',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "My first Custom Function",
            insertText: 'customFunction1()'
        },
        {
            label: 'customFunction2',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "My second Custom Function",
            insertText: 'customFunction2()'
        }
    ];
}
//Register the custom completion function into Monaco Editor    
monaco.languages.registerCompletionItemProvider('csharp', {
    provideCompletionItems: function(model, position) {
        return createCompleters();
    }
});
//Continue with the Standard initialization here...
monaco.editor.create(document.getElementById("container"), {
    value: "",
    language: "csharp"
});

Then, the local variables is not recognized anymore, only the registered functions are recognized.

How can I register the custom code completion but also still retain the local variables completion? Thanks!

where you able to figure this out? I am having the same problem — Matt Hintzke, Jan 22 '19 at 21:22

score 0 · Answer 1 · answered Mar 25 '19 at 20:00

You need to add something that can match with your functions. If you match all of it you will only find the functions that are in your createCompleters() function. I have yet to find out how to do searching based on what's found in the returned suggestions and also looking into the local variables. The code below works, try it in the playground and start typing "cu". I know this isn't the full answer but hopefully it gets you going.

//Custom Code Completion function
function createCompleters() {
    return [
        {
            label: 'customFunction1',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "My first Custom Function",
            insertText: 'customFunction1()'
        },
        {
            label: 'customFunction2',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "My second Custom Function",
            insertText: 'customFunction2()'
        }
    ];
}
//Register the custom completion function into Monaco Editor    
monaco.languages.registerCompletionItemProvider('csharp', {
    provideCompletionItems: function(model, position) {

        var textUntilPosition = model.getValueInRange({startLineNumber: position.lineNumber, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});
        var match = textUntilPosition.match(/cu/gim);
        var suggestions = match ? createCompleters() : [];
        return {
            suggestions: suggestions
        };

        return createCompleters();
    }
});
//Continue with the Standard initialization here...
monaco.editor.create(document.getElementById("container"), {
    value: "",
    language: "csharp"
});

Monaco Editor registerCompletionItemProvider removes the default local variable completion

1 Answers1