How to register code snippets for a DSL?

[rhumbertgz]

Hi.

I'm using the MonacoEditorReactComp and I can't find a way to register my completion provider. Using the UserConfig I can specify the Monarch syntax highlighting, but there is no option to set my code snippets. Any pointers how to register them?

Best regards,
Humberto

[msujew]

Hey @rhumbertgz,

we don't have a builtin API for code snippets yet, but you can easily add them yourselves. See the following (inaccurate) example:

class CustomCompletionProvider extends DefaultCompletionProvider {
    override getCompletion(args): Promise<CompletionList> {
        const list = await super.getCompletion(args);
        list.items.push({
             label: 'snippet',
             kind: CompletionItemKind.Snippet,
             insertText: '...'
        });
        return list;
    }
}

And register that completion provider for your language.

[rhumbertgz]

Hi @msujew,

Thanks for your quick reaction and the example 👍🏼

[rhumbertgz]

Hi @msujew,

I managed to register the custom completion provider, but the code snippets don't works 100%.

The DefaultCompletationProvider uses a CompletionItem from vscode-languageserver doesn't have the properties range and insertTextRules. I was expecting to have a result similar to 👇🏼

Here is the implementation of my completion provider

//hello-world-completion.ts

import { DefaultCompletionProvider, LangiumDocument } from 'langium';
import {
  CompletionList,
  CompletionItemKind,
  CompletionParams,
  CompletionItem
} from 'vscode-languageserver';

type Suggestions = Promise<CompletionList | undefined>;


export class CustomCompletionProvider extends DefaultCompletionProvider {
  override async getCompletion(doc: LangiumDocument, params: CompletionParams): Suggestions {
    const list = await super.getCompletion(doc, params);
    console.log('getCompletion: ');
    if (list !== undefined) {
      const snippets: CompletionItem[]  = [
        {
          label: 'person',
          kind: CompletionItemKind.Snippet,
          insertText: 'person ${1:name}',
          documentation: 'Define a new person',
        },
        {
          label: 'hello',
          kind: CompletionItemKind.Snippet,
          insertText: 'hello ${1:person}!',
          documentation: 'Define a new greeting',
        }
      ]; 

      list.items.push(...snippets);
      console.log('list: ', list);
    } else {
      console.log('list undifined')
    }

    return list;
  }
}

Here is how I register the custom completion provider (not sure if it is the right way)
// hello-world-module.ts

...

export function createHelloWorldServices(context: DefaultSharedModuleContext): {
    shared: LangiumSharedServices,
    HelloWorld: HelloWorldServices
} {
   ...

    // Register Custom Completation Provider
  HelloWorld.lsp.CompletionProvider = new CustomCompletionProvider(HelloWorld);
  
    return { shared, HelloWorld };
}

Any suggestions?

I created a sandbox here.

[msujew]

I believe you're missing the insertTextFormat: InsertTextFormat.Snippet property in your returned items. I forgot that you need to set that as well.

[rhumbertgz]

Yes, that was missing. Everything works now. Thanks 👍🏼

[cdietrich]

kind?: CompletionItemKind is used for the icon only.

[rhumbertgz]

I updated the sandbox example, maybe it can help someone in the future ;)

Sandbox demo
Github repo