VSCode Extension : How can we use Monaco editor to edit in-memory Strings?

Question

I am building a Vscode/Theia extension, to contribute custom diagram-based editors. Within these editors, on certain events like node label-edit I need to provide input controls to end users where they can enter expressions based on our custom grammar definition. The purpose is to provide end-users a complete editing experience backed by LSP instead of a plain input textbox. My requirement is to have a reusable widget that will look similar to TextArea but with additional LSP support to assist the end-user in writing the expression.

What I have done till now -

1. vscode-extension for language support is created , language client & server is getting initiated by this .

2. LSP features like content assist, error highlighting, etc. are working fine on a standalone file editor.

3. I am able to embed the Monaco editor in Diagram-based editor within HTML div, but none of the LSP features are working on it.

So how can we use Monaco editor to edit non-file resources like in-memory strings with all the LSP features enabled?

Answer 1

In this case the embedded editor is a complete own instance and you have to set it up as if you would embed it in standalone webpage. This involves usually to set providers for various features (hover, code suggestions, validation etc.). Make these provider call into your LSP to do the heavy lifting (message back and forth between vscode and your webview).

        languages.onLanguage(msg.id, () => {
            msg.loader().then((module: any) => {
                languages.setMonarchTokensProvider(msg.id, module.language);
                languages.setLanguageConfiguration(msg.id, module.languageConfiguration);
                languages.registerCompletionItemProvider(msg.id, new CodeCompletionProvider());
                languages.registerHoverProvider(msg.id, new HoverProvider());
                languages.registerSignatureHelpProvider(msg.id, new SignatureHelpProvider());
                languages.registerDocumentHighlightProvider(msg.id, new DocumentHighlightProvider());
                languages.registerDefinitionProvider(msg.id, new DefinitionProvider());
                languages.registerReferenceProvider(msg.id, new ReferencesProvider());
                languages.registerSelectionRangeProvider(msg.id, new SelectionRangeProvider());
                languages.registerDocumentFormattingEditProvider(msg.id, new FormattingProvider());
                languages.registerRenameProvider(msg.id, new RenameProvider());
            });
        });

msg here is the language contribution file for your language (msg.contribution.ts in my case).