Autocomplete with non-alphabetic characters not triggering and replacing properly

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:

https://user-images.githubusercontent.com/79662144/122108045-66257a80-cde1-11eb-9170-0b1ab725d84c.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"
});

[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.