microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
39.18k stars 3.52k forks source link

Can't override default autocomplete suggestions #2521

Open alan-codaio opened 3 years ago

alan-codaio commented 3 years ago

Hi there, I am trying to add custom autocompletes for some library functions that I imported into the monaco editor. I'm able to get this to work by following the examples here: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example

However, the autocomplete provides duplicate suggestions for the same keyword. (Attaching a screen recording below). I assume this is because we are registering a separate completion provider, and the original provider still shows its suggestions. Is there any way to override the autocomplete suggestions in the original provider so that we don't get duplicate suggestions?

https://user-images.githubusercontent.com/79662144/121601331-6bfb1480-ca0b-11eb-8f4b-4c78c1f47a3b.mov

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

// Add additonal d.ts files to the JavaScript language service and change.
// Also change the default compilation options.
// The sample below shows how a class Facts is declared and introduced
// to the system and how the compiler is told to use ES6 (target=2).

// validation settings
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: true,
    noSyntaxValidation: false
});

// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES6,
    allowNonTsExtensions: true
});

// extra libraries
var libSource = [
    'declare class Facts {',
    '    /**',
    '     * Returns the next fact',
    '     */',
    '    static next():string',
    '}',
].join('\n');
var libUri = 'ts:filename/facts.d.ts';
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
// When resolving definitions and references, the editor will try to use created models.
// Creating a model for the library allows "peek definition/references" commands to work with the library.
monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));

var jsCode = [
    '"use strict";',
    '',
    'class Chuck {',
    '    greet() {',
    '        return Facts.next();',
    '    }',
    '}'
].join('\n');

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: 'next',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "Dummy completion",
            insertText: 'next()',
            range: range
        },
    ];
}

monaco.languages.registerCompletionItemProvider('javascript', {
    triggerCharacters: ['.'],
    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(word, createDependencyProposals(range))
        return {
            suggestions: createDependencyProposals(range)
        };
    }
});

monaco.editor.create(document.getElementById('container'), {
    value: jsCode,
    language: 'javascript'
});
ZhangTomLiang commented 1 year ago

I'm also having this issue, is there any update here?