How to add custom completions before language completions?

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 == && !context.explicit)
			return null;
		return {
			from: word.from,
			options: customCompletions

const myNewCompletions ={
	autocomplete: this.myCompletions

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

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

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