Monaco-editor: Completion after Enter or paste

[ascoders]

monaco-editor version: 0.13.1
Browser: Chrome
OS: Mac
Steps or JS usage snippet reproducing the issue:

Hello there! If there is a way to make editor request completion items after the "enter" or "cmd+v" was typed?

For dot using triggerCharacters: ["."], but how to trigger completion after "enter" or "cmd+v"?

[alexdima]

You could implement this by:

• listening to editor.onDidType (and looking for \n) and editor.onDidPaste (internal APIs)
  
  
  
  • https://github.com/Microsoft/vscode/blob/b8fe7d0be6a911e62ff49153edc4fcee22f7d646/src/vs/editor/browser/editorBrowser.ts#L398
  
  
  • https://github.com/Microsoft/vscode/blob/b8fe7d0be6a911e62ff49153edc4fcee22f7d646/src/vs/editor/browser/editorBrowser.ts#L410
  
  
• editor.trigger('anything', 'editor.action.triggerSuggest')

[ascoders]

Thanks @alexandrudima ! It's workable to listening enter or cmd+v using editor.onDidType or editor.onDidPaste, It's fantastic! But i also have one question.

How to trigger suggest specific provideCompletionItems?

As you can say, editor.trigger('anything', 'editor.action.triggerSuggest') can show completion items directly, but the model filled No suggestions, that isn't what i want.

I have registered a completionItemProvider:

monaco.language.registerCompletionItemProvider('sql', provideCompletionItems: (model, position) => {
  return myCustomItems
})

Using the object model and position, i create myCustomItems. My question is, how to do provideCompletionItems effects using editor.trigger('anything', 'editor.action.triggerSuggest')? I can't find any docs, I guess I can get model and position some where, and return new completion items?

[ascoders]

My goal is to achieve this effect:

1. When type a, show completion items a ab abc.
2. And if select abc, whatever using enter or tab, or even paste abc directly, will auto show the next completion items d de def.

Here is a gif:

[alexdima]

What you show consists of two pieces:

1. constantly triggering the suggest widget. The code I've shown above could be used, or you could also implement triggering of the suggestions again by using the command field in CompletionItem.
2. having a completion item provider. This is something you need to implement, as the editor is language agnostic, it could not possibly know what completion items to show where. It is up to you to parse the SQL query and understand where the position sits within the SQL query and propose only what makes sense. For example, if you are before FROM you should suggest column names. If you are after FROM you should not suggest column names.

[ascoders]

Thanks for your reply! Can you give me a simple example how triggering suggestions by command in CompletionItem? Thanks a lot!

I don't know how to trigger provideCompletionItems again by using command field in CompletionItem..

[alexdima]

For each completion item, you would use the command field and use editor.action.triggerSuggest as the value for the command. Then, when the completion item is accepted, that command will also be invoked.

At least I think that's how that should work. We can ask @jrieken for further help if it does not.

[ascoders]

Thank @alexandrudima, you helped me find the key to solving the problem! But i still need help because nothing happens when choose any completion item when using this code:

resolveCompletionItem(item: monaco.languages.CompletionItem) {
  item.command = {
    id: 'editor.action.triggerSuggest',
    title: '123'
  };
  return item;
}

What should i trigger new suggestion when choose completion items, and set custom suggest items? @jrieken I would like to get your help very much!

[jrieken]

The command id is correct and I know that css uses this successfully. Try setting the command during provideCompletionItems and not in resolve...

[ascoders]

Hello @jrieken , i add command to provideCompletionItems, but nothing happened. Here is my code:

provideCompletionItems: () => {
  return [{label: 'test', command: {id: 'editor.action.triggerSuggest', title: 123}}]
}

[jrieken]

, but nothing happened

Something always happens ;-) Is it that your provider isn't called or that your completions aren't showing? Is there an error? You can debug this on suggestController.js#_onDidSelectItem

[ascoders]

Thank you for your quick reply, but I'm still in doubt.

When trigger command in provideCompletionItems, where should i handle it? Or it will recall provideCompletionItems itself?

[jrieken]

Yes. You don't trigger the command you tell the editor to trigger the command once a completion is selected and then that will eventually call provideCompletionItems

[ascoders]

Thanks, i'll try it.

[ascoders]

Thanks @jrieken ! It now works fine! Another question, how can i change point position after a completion is selected?

I want both trigger provideCompletionItems(Using command) and change cursor position after select a completion.

[jrieken]

Use a SnippetString as insert text

[ascoders]

Thanks @alexandrudima and @jrieken! All works fine for me now!

[suhasdeshpande]

@ascoders I'm going through a similar use-case. Would it be possible for you to share some gist on how you used Editor APIs?

[ascoders]

@suhasdeshpande What's your problem?

[DoubleYellowEgg]

@alexandrudima @jrieken
How does excuse me multilevel clew use
monaco.languages.registerCompletionItemProvider('javascript', { provideCompletionItems: function () { return { suggestions: [ { label: 'May', kind: monaco.languages.CompletionItemKind['Function'], insertText: 'Mayname', detail: '名字', command: {id: 'editor.action.triggerSuggest', title: 123} { label: 'Cay', kind: monaco.languages.CompletionItemKind['Function'], insertText: 'CayNmae', detail: 'cay', } ] } }, triggerCharacters: ['M', 'C'] })

[gunn4r]

+1 would love to see a final code example solution for this. I've got a very similar usecase but even though my completionItemProvider is returning suggestions, they are in some cases either not triggering the suggestion widget at all, or if manually triggered, widget displays "No suggestions" even though I can see the suggestions logged to console.

Seems it will only actually display the suggestions if there is a space preceding the suggestion trigger.

@ascoders @alexandrudima @jrieken

[wendellhu95]

How to resolve this problem since SnippetString is removed?

[gunn4r]

I was able to generally get this working fine by adding a space to the end of each suggestion item.