Custom keyword highlighting, the same text has different effects
import {
lineNumbers,
highlightActiveLineGutter,
highlightSpecialChars,
drawSelection,
dropCursor,
rectangularSelection,
crosshairCursor,
highlightActiveLine,
keymap,
EditorView,
gutters
} from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
import { highlightSelectionMatches, searchKeymap, search } from '@codemirror/search';
import {
closeBrackets,
autocompletion,
closeBracketsKeymap,
completionKeymap,
CompletionContext
} from '@codemirror/autocomplete';
import { lintKeymap } from '@codemirror/lint';
import {
bracketMatching,
defaultHighlightStyle,
foldGutter,
foldKeymap,
indentOnInput,
syntaxHighlighting,
HighlightStyle
} from '@codemirror/language';
import { cpp, cppLanguage } from '@codemirror/lang-cpp';
function parseAutoCompletions(context) {
const word = context.matchBefore(/\w*/);
if (word?.from === word?.to && !context.explicit) return null;
return {
from: word?.from,
options: ['add','test'].map(item => ({
label: item,
type: 'keyword'
}))
};
}
new EditorView({
doc: "a\nb\nc\n",
extensions: [
search({ top: true }),
gutters(),
lineNumbers(),
highlightActiveLineGutter(),
highlightSpecialChars(),
history(),
foldGutter(),
cpp(),
drawSelection(),
dropCursor(),
EditorState.allowMultipleSelections.of(true),
EditorView.lineWrapping,
indentOnInput(),
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
bracketMatching(),
closeBrackets(),
autocompletion({}),
cppLanguage.data.of({ autocomplete: parseAutoCompletions }),
rectangularSelection(),
crosshairCursor(),
highlightActiveLine(),
highlightSelectionMatches(),
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
...searchKeymap,
...historyKeymap,
...foldKeymap,
...completionKeymap,
...lintKeymap
])
],
parent: document.body
})