How can i add auto completion to a browser based editor using monaco

Question

So recently I wanted to create a browser based editor using monaco and antlr for a custom language. I followed this awesome tutorial https://tomassetti.me/writing-a-browser-based-editor-using-monaco-and-antlr/ .

Monaco already give suggestions when pressing ctrl + space but I want to add an intelligent auto completion (like intellisense) inside monaco. How can I do that?

score 4 · Answer 1 · answered Nov 02 '21 at 07:53

Monaco supports registering an own completion provider. This is a per-language registration, but applies to all editor instances. Call languages.registerCompletionItemProvider with an instance of your provider.

The provider class itself is pretty simply. Something like:

export class CodeCompletionProvider implements languages.CompletionItemProvider {

    public readonly triggerCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.\\@(".split("");

    public provideCompletionItems(model: ITextModel, position: Position, context: CompletionContext,
        token: CancellationToken): ProviderResult<CompletionList> {

            return {
                incomplete: false,
                suggestions: this.createInternalCompletionItems(replaceRange, model.editorMode),
            };
        }

        return services.getCodeCompletionItems(sourceContext, position);
    }

    public resolveCompletionItem(item: CompletionItem, token: CancellationToken): ProviderResult<CompletionItem> {

        return item;
    }

}

The real work is to generate the completion items. One way is to use my antlr4-c3 code completion core and amend that with logic to create and use a symbol table to provide symbol information.

Mike Cargal · Accepted Answer · 2021-10-31T15:43:53.747

1

Highly recommend Mike Lischke's C3 Code completion

Also, see Strumenta Tutorial on using C3 Code completion

There's a bit more to the details than can easily be contained in a StackOverflow answer, but the tutorial is good.

Monaco works with LSP (Language Server Protocol). It should not be hard to find instructions on how to tie an LSP plugin into Monaco. So far as how to do Code completion in a LSP plugin, this tutorial (once again on the Strumenta site) (specifically the “The Basics” section, covers how to tie in to the LSP code completion hooks).

edited Oct 31 '21 at 15:43

answered Oct 30 '21 at 20:50

Mike Cargal

6,610
3
21
27

Thanks for yous answer. Do you know how to integrate the completion code in monaco ? – LYass Oct 31 '21 at 12:09
I’ve amended my answer to address tie in with Monaco. The details on this as well are a bit lengthy for a SO answer. – Mike Cargal Oct 31 '21 at 15:46
It's not Monaco that works with an LSP, but Visual Studio Code. Monaco only knows code completion providers. – Mike Lischke Nov 02 '21 at 07:45
Hmmm this page (https://github.com/Microsoft/monaco-editor) indicated that is was possible if the LSP was written in JavaScript. *Possibly* I read too much into “possible”. Thanks for clearing up. – Mike Cargal Nov 02 '21 at 12:17
Interesting, would love to know how that would work, since all I have seen so far is this completion provider registration. Or they mean you can use the LSP from a custom provider or similar ¯\\_(ツ)_/¯ – Mike Lischke Nov 02 '21 at 15:20
Yeah.., kind of suspect “possible” is a give away (a LOT of things are _possible_ with software). Might get bored enough to look into trying it. – Mike Cargal Nov 02 '21 at 15:36
I managed to get LSP work with browser-based monaco (described [here](https://stackoverflow.com/a/71349842/10985072))! – Astor Bizard Mar 04 '22 at 10:27

How can i add auto completion to a browser based editor using monaco

2 Answers2