Hi @marijn, thank you for your awesome work on CodeMirror.
When typing via IME (e.g. Chinese Pinyin, Japanese) inside a BlockWrapper, the Range<BlockWrapper> is rendered incorrectly during the composition session. Specifically, cm-line elements that fall outside the BlockWrapper’s intended range end up being rendered inside the wrapper.
Before input:
After input:
A minimal demo :
import {basicSetup, EditorView} from "codemirror"
import {BlockWrapper, ViewPlugin} from "@codemirror/view"
import {Range} from "@codemirror/state"
import {syntaxTree} from "@codemirror/language"
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.
let view = new EditorView({
doc: "Hello\n\n```javascript\nlet x = 'y'\n```\nWorld",
extensions: [
basicSetup,
markdown({codeLanguages: languages}),
EditorView.theme({
".cm-fenced-code-block": {
backgroundColor: "pink"
}
}),
ViewPlugin.fromClass(class {}, {
provide: () => EditorView.blockWrappers.of(view => {
const ranges = []
for (const {from, to} of view.visibleRanges) {
syntaxTree(view.state).iterate({
from, to,
enter: node => {
if (node.name === 'FencedCode') {
const range = BlockWrapper.create({
tagName: 'div',
attributes: {'class': 'cm-fenced-code-block'}
}).range(node.from, node.to)
ranges.push(range)
}
}
})
}
return BlockWrapper.set(ranges)
})
})
],
parent: document.body
})