This is an edge case and it’s somewhat difficult to reproduce, but I am able to come with a minimal case. This is how the bug looks like:
The image is an atomic widget (a img tag converted from a markdown syntax ). In a new line, when using IME to enter some words, the selection was interrupted and it is impossible to enter the desired word.
And the editor selection seems to be messsed up – the cursor was at the end of the line, but when start typing, the cursor jumps to a position in the front.
To reproduce it, need to have a extension for the atomic widget, add markdown() extension, and add defaultHighlightStyle extension. I have a working example here, unfortunately there is no preview because stackblitz keeps complaining some error.
Sorry I know this looks like a very complicated edge case to reproduce, but I think the root cause may also cause other bugs not found yet.
Please let me know if I can provide any help setting up the reproduction.
It seems to be triggered by this line redrawn = this.docView.update(update); and propogate to the following piece of code:
// Remove a DOM node and return its next sibling.
function rm(dom) {
let next = dom.nextSibling; <-- this is where the error was thrown
dom.parentNode.removeChild(dom);
return next;
}
Hi, thanks for debugging this. However, I think that the crash at that loop is caused by another problem, and adding that check just masks it. I’ve been trying to reproduce the crash in order to debug it, but haven’t had any luck. Which operating system, browser, and IME are you using? Does it happen in different browsers? Can you give me a precise sequence of keypresses that produce the problem? (It’s hard for a non-Chinese speaker to figure out how you’re creating the compositions shown in the screencast.)
To answer your question: I am using MacOS 11.4, Chrome and Safari (both browsers reproduce the bug), and system built-in IME for Chinese language (also tested with Japanese IME and it reproduced too, which makes me wonder if this issue is happening for all IMEs).
To reproduce it:
clone the product $ git clone git@github.com:fuermosi777/cm-widget-highlight-debug.git
To enable the IME for testing, open System preference > Keyboard > Input Sources, click “+” in the bottom of the list, search for “Chinese, Simplified”, choose “Pinyin - Simplified”, click “Add”. You can delete it later.
To see how IME works in a normal case: go to browser’s search bar or any text editor, type the following keystrokes: “nihao”, you should be able to see something like this, it means “Hello” in Chinese:
Now let’s go back to the CM6 editor. First enter the following into the editor to construct a image widget:  – this is done by a simple atomic widget extension in the code here
Press “Enter” to switch to a new line, and now switch to newly added Chinese IME (click the flag in the menu bar)
Type “nihao” in the editor.
What to expect?
We should see the same dropdown menu in step 5
What we actually got?
The IME is interrupted and no drop down menu shows up. Also there is an error in the console log:
Note that this seems only happen when the following extensions are enabled at the same time: a widget, markdown(), classHighlightStyle and defaultHighlightStyle.
I could reproduce on the mac, or at least something that looked similar (for me it’d duplicate letters, not crash). It took a bunch of digging, but that seems to have been caused by an obscure bug in @codemirror/rangeset, which was triggered by precisely the conditions in your test. Could you see if upgrading to version 0.19.1 of that package helps?
I tried to add a resolution block in the package.json and force views and highlight module to use @codemirror/rangeset 0.19.1 and now the issue is gone!
I guess I will just need to wait for the version bumps for the views and highlight.
I don’t, generally, bump dependency versions unless a new feature is used by the depending package. But deleting your package lock and node_modules and reinstalling should give you the most recent versions.
