Custom Inline completions with built-in Suggest widget

[pennywort]

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:

1. Is it possible to achieve showing suggest widget and ghost text at the same time (exactly as vscode) in monaco-editor?
2. 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]

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

[pennywort]

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]

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,
	},
});

[Raubzeug]

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

[pennywort]

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]

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...