Autocomplete with non-alphabetic characters not triggering and replacing properly

[alan-codaio]

We are trying to create a kind of namespaced-based autocomplete provider behind the / prefix. For example, we would want /test and /foo to be displayed when the user enters '/' in their Monaco editor. There are two issues:

• Simply entering / is not triggering the autocomplete In the recording below, I would expect /test to show up as a suggestion when entering /, but it won't match until /t is entered. (0:00 - 0:05)
• Typing /t and confirming the autocomplete choice does not replace the / prefix. In the recording below, you can see that /test is replaced by /test test test, when we want it to be test test test. (0:06 - 0:10)

I've attached a recording below to highlight the issues:

monaco.autocomplete.slash.mov

This seems to reproduce with a variety of non-alphabet characters (I also can repro with 1 and . as a prefix)

monaco-editor version: 0.43.0
Browser: Chrome
Playground code that reproduces the issue:

function createDependencyProposals(range) {
    // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
    // here you could do a server side lookup
    return [
        {
            label: '/test',
            kind: monaco.languages.CompletionItemKind.Function,
            insertText: 'test test test',
            range: range
        },
    ];
}


monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems: function(model, position) {
        var word = model.getWordUntilPosition(position);
        var range = {
            startLineNumber: position.lineNumber,
            endLineNumber: position.lineNumber,
            startColumn: word.startColumn,
            endColumn: word.endColumn
        };
        console.log(createDependencyProposals(range))
        return {
            suggestions: createDependencyProposals(range)
        };
    }
});

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

[rcjsuen]

@alan-codaio Try using triggerCharacters.

function createDependencyProposals(range) {
    // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
    // here you could do a server side lookup
    return [
        {
            label: '/test',
            kind: monaco.languages.CompletionItemKind.Function,
            insertText: 'test test test',
            range: range
        },
    ];
}


monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems: function(model, position) {
        var word = model.getWordUntilPosition(position);
        var range = {
            startLineNumber: position.lineNumber,
            endLineNumber: position.lineNumber,
            startColumn: word.startColumn,
            endColumn: word.endColumn
        };
        console.log(createDependencyProposals(range))
        return {
            suggestions: createDependencyProposals(range)
        };
    },

    triggerCharacters: ["/"]
});

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

[alan-codaio]

@rcjsuen Thank you! That fixed the first issue. However, the second issue (where the / remains even after confirming autocomplete) still stays in. Any ideas on how to fix this?

[rcjsuen]

@rcjsuen Thank you! That fixed the first issue.

Good to hear.

However, the second issue (where the / remains even after confirming autocomplete) still stays in. Any ideas on how to fix this?

That implies the range in your CompletionItem is incorrect. You should have it span the text that you want replaced by your insertText.

[alan-codaio]

Thanks @rcjsuen. That's a helpful pointer, and we fixed our range by updating startColumn to be word.startColumn - 1 since it appears that getWordUntilPosition does not track the trigger character.

At the same time, the workaround still seems a bit wonky — I can't think of a use case where someone would want the trigger character to be preserved.

[rcjsuen]

I can't think of a use case where someone would want the trigger character to be preserved.

In JavaScript, you're going to want to trigger on a . so that when you type obj. you can get obj.toString(). And then in that case you're going to want the . preserved.

[hediet]

At the same time, the workaround still seems a bit wonky — I can't think of a use case where someone would want the trigger character to be preserved.

For most languages, the trigger character is actually preserved.

Did setting the range fix your issue?

[medihack]

I also stumbled over this. For a custom language, I want autocompletion for variables that always begin with $ (e.g. $foo). By default, neither filtering works with typing a $ character (the list is not filtered with all variables that begin with $), nor does accepting the auto-completion work correctly (I end up with $$foo). An option would be nice to also respect special characters.