First of all, thank you for the great work on this project.
We found an issue related to IME input. Under normal circumstances, during IME composition the selection is updated to the leading edge of the composition. However, when a single decoration.mark contains two decoration.replace decorations, IME input causes the composed text to remain selected. In this case, the selection is not updated as expected and instead stays on the range of the IME-composed characters.
Screenshot
DEMO
import { basicSetup, EditorView } from "codemirror";
import { ViewPlugin, Decoration } from "@codemirror/view";
import { RangeSet } from "@codemirror/state";
import { markdown } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
// The Markdown parser will dynamically load parsers
// for code blocks, using @codemirror/language-data to
// look up the appropriate dynamic import.
new EditorView({
doc: "Hello World\nHello World",
extensions: [
basicSetup,
markdown({ codeLanguages: languages }),
EditorView.theme({
"& .cm-selectionBackground": {
backgroundColor: "red !important"
}
}),
ViewPlugin.fromClass(class {}, {
provide: () =>
EditorView.decorations.of((view) => {
const line = view.state.doc.lineAt(0);
const ranges = [];
if (line.text.length > 5) {
ranges.push(Decoration.mark({}).range(line.from, line.to));
ranges.push(
Decoration.replace({}).range(line.from + 1, line.from + 2),
);
ranges.push(
Decoration.replace({}).range(line.from + 3, line.from + 4),
);
}
return RangeSet.of(ranges, true);
}),
}),
],
parent: document.body,
});