How to add custom completions before language completions?

v6
1

Hello, I am using following code which shows my custom completions after language keywords.
Is there a way I can see my custom completions before language keywords?

const customCompletions = [
{ label: "Apple", type: "variable" },
{ label: "Banana", type: "variable" },
{ label: "Watermelon", type: "variable" }
];

myCompletions(context) {
		let word = context.matchBefore(/\w*/);
		if (word.from == word.to && !context.explicit)
			return null;
		return {
			from: word.from,
			options: customCompletions
		};
	};

const myNewCompletions = language.data.of({
	autocomplete: this.myCompletions
});

this.view = new EditorView({
			doc: this.props.value,
			extensions: [
				keymap.of([{ key: "Enter", run: insertNewline }, indentWithTab, defaultKeymap]),
				myNewCompletions,
				basicSetup,
				this.events(),
				language
			],
			parent: this.editorRef.current
		});

I want to see Banana, break in the completion list -
Screenshot 2024-02-01 at 3.16.41 PM

2

These are sorted first by how well they match the typed input, and then by boost, and finally by localeCompare. In this case, because you typed a lower-case b, the word break is considered a better match than Banana, because its case matches. There’s no real way to override match-quality ordering.

1 Like