CODEWITHSUNDEEP
monaco-editor
gimenete
gimenete

Reputation: 2669

How to insert a snippet without using completionItem / autocomplete

I would like to programmatically and dynamically insert a snippet (such as <foo attr="$1">$2</foo>. Checking the docs it seems like the only way to use snippets is in completion item providers (returning a completion item with kind: monaco.languages.CompletionItemKind.Snippet). I've found also a SnippetString interface but the only place where it is supported is, again, in a CompletionItem.

I was also wondering that maybe I could make a CompletionItem to be triggered programmatically but I didn't find a way to do that. I tried with editor.executeEdits() where you can pass identifiers of actions, but I don't see a way to identify a CompletionItem.

Upvotes: 1

Views: 2557

Answers (2)

Igor
Igor

Reputation: 231

You can simulate typing snippet in editor as:

    let text = "foo"; //snippet label
    this.editor.trigger('keyboard', 'editor.action.triggerSuggest', {});
    this.editor.trigger('keyboard', 'type', {text: text});
    setTimeout(() => {
        this.editor.trigger('editor', 'acceptSelectedSuggestion', {});
    }, 100);

setTimeout required for the editor to load snippets

Upvotes: 2

cancerbero
cancerbero

Reputation: 7035

What about registernig a custom action or custom command and adding the text when user do some gesture / key combination ? See :

I think code completion is the right way to go. Why don't use that? https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example

Upvotes: 0

Related Questions