Custom Inline completions with built-in Suggest widget #3917

pennywort · 2023-04-16T14:03:53Z

pennywort
Apr 16, 2023

I use custom inline completion provider this way:

monaco.languages.registerInlineCompletionsProvider("javascript", {
	provideInlineCompletions: async function (model, position, context, token) {
		return Promise.resolve({
			items: [
				{
					"label": "getElementById(",
					"sortText": "a",
					"insertText": "getElementById(",
				},
				{
					"label": "document",
					"sortText": "b",
					"insertText": "document"
				},
				{
					"label": "document.addEventListener",
					"sortText": "a",
					"insertText": "document.addEventListener"
				}
			]
		})
	},
	freeInlineCompletions(arg) {
	}
});

const myEditor = monaco.editor.create(document.getElementById("container"), {
	value: '',
	language: "javascript",
	inlineSuggest: {
		enabled: true,
		showToolbar: 'onHover',
		mode: 'subword',
		suppressSuggestions: false,
	},
	suggest: {
		// preview: true,
		selectionMode: 'whenQuickSuggestion',
	},
	automaticLayout: true,
});

What I'm trying to implement is already possible in vscode (discussed here):

Yellow text provided by custom inline completer. Preview options is false as well in example code.

What I can get in playground:

In my inline suggestions I have item with label "document.addEventListener" but when typing "doc" it only triggers suggest adapter and ghost text is not showing at all.

The questions:

Is it possible to achieve showing suggest widget and ghost text at the same time (exactly as vscode) in monaco-editor?
When I complete the word "document" and then press "." the ghost text blinks. Is this bug or it caused by wrong suggest settings?

I'm not sure the 2nd is connected with 1st.

hediet · 2023-04-17T09:29:18Z

hediet
Apr 17, 2023
Maintainer

You should set the proper range (by default it just replaces the word at the given position, hover . is not a word)

1 reply

pennywort Apr 21, 2023
Author

I tried this code without .
When I type deb the suggest widget show two items with preselected debugger and there's no inline suggestion. I also tried to turn off preselection by settings selectionMode to never.
If I press esc to hide the widget, inline suggestion will show

monaco.languages.registerInlineCompletionsProvider("javascript", {
	provideInlineCompletions: async function (model, position, context, token) {
		return Promise.resolve({
			items: [
				{
					sortText: "a",
					insertText: "ounce(",
					range: new monaco.Range(position.lineNumber, 4, position.lineNumber, "ounce(".length)
				},
			]
		})
	},
	freeInlineCompletions(arg) {
	}
});

const myEditor = monaco.editor.create(document.getElementById("container"), {
	value: '//start type "deb"',
	language: "javascript",
	wordBasedSuggestions: false,
	inlineSuggest: {
		enabled: true,
		showToolbar: 'onHover',
		mode: 'subword',
		suppressSuggestions: false,
	},
});

pennywort · 2023-04-24T08:47:48Z

pennywort
Apr 24, 2023
Author

The case when inline suggestion text doesn't contain suggested one from suggest widget is my headache right now. It seems like it's not due to wrong position.

monaco.languages.registerInlineCompletionsProvider("javascript", {
	provideInlineCompletions: async function (model, position, context, token) {
		return Promise.resolve({
			items: [
				{
					sortText: "a",
					insertText: "ounce(",
					range: new monaco.Range(position.lineNumber, 4, position.lineNumber, "ounce(".length)
				},
				{
					sortText: "a",
					insertText: "cument.addEventListener('",
					range: new monaco.Range(position.lineNumber, 3, position.lineNumber, "cument.addEventListener('".length)
				},
			]
		})
	},
	freeInlineCompletions(arg) {
	}
});

const myEditor = monaco.editor.create(document.getElementById("container"), {
	value: '//start type "deb"\n\n//start type "doc"\n',
	language: "javascript",
	wordBasedSuggestions: false,
	inlineSuggest: {
		enabled: true,
		showToolbar: 'onHover',
		mode: 'subword',
		suppressSuggestions: false,
	},
});

0 replies

Raubzeug · 2024-06-25T12:59:31Z

Raubzeug
Jun 25, 2024

@pennywort hi! I'm struggling with the same case right now. Did you find the solution?

2 replies

pennywort Jul 10, 2024
Author

Hi!
There was a lot of things including upgrades to newest versions, but you can try to set startColumn and endColumn to the same value.
So instead of this range: new monaco.Range(position.lineNumber, 4, position.lineNumber, "ounce(".length)
It should be range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column)

Raubzeug Jul 10, 2024

It seems that range of inline suggestion and item from widget should equals.

But it seems that it's no way to force showing inline suggestion if text of inline suggestion is not starts with suggestion from widget...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Custom Inline completions with built-in Suggest widget #3917

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Custom Inline completions with built-in Suggest widget #3917

Uh oh!

pennywort Apr 16, 2023

Replies: 3 comments · 3 replies

Uh oh!

hediet Apr 17, 2023 Maintainer

Uh oh!

pennywort Apr 21, 2023 Author

Uh oh!

pennywort Apr 24, 2023 Author

Uh oh!

Raubzeug Jun 25, 2024

Uh oh!

pennywort Jul 10, 2024 Author

Uh oh!

Raubzeug Jul 10, 2024

pennywort
Apr 16, 2023

Replies: 3 comments 3 replies

hediet
Apr 17, 2023
Maintainer

pennywort Apr 21, 2023
Author

pennywort
Apr 24, 2023
Author

Raubzeug
Jun 25, 2024

pennywort Jul 10, 2024
Author