CODEWITHSUNDEEP
typescriptautocompleteeditorantlrmonaco-editor
LYass
LYass

Reputation: 624

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

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?

Upvotes: 4

Views: 16040

Answers (2)

Mike Lischke
Mike Lischke

Reputation: 53357

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.

Upvotes: 7

Mike Cargal
Mike Cargal

Reputation: 6785

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

Upvotes: 3

Related Questions