defaultHighlightStyle and markdown cause IME error when atomic widget presents

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:

Jul-22-2021 23-04-24

The image is an atomic widget (a img tag converted from a markdown syntax ![xxx](url)). 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.

Jul-22-2021 23-13-06

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.

Thanks!

I am able to print the errors in the console

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;
}

Submitted a PR which may help resolve this issue.

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.)

Hi marijin, thank you for reply.

I created a minimized repo for reproduction: GitHub - fuermosi777/cm-widget-highlight-debug: A demo project for reproducing the bug https://discuss (I wanted to make one with easy preview in Stackblitz but unfortunately it keeps complaining about an error, sorry for all the inconveniences!)

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:

  1. clone the product $ git clone git@github.com:fuermosi777/cm-widget-highlight-debug.git

  2. bring up the test page: $ yarn dev or $ npm dev

  3. Go to http://localhost:8080/, it will show a blank CM6 editor.

  4. 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.

  5. 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:

  6. Now let’s go back to the CM6 editor. First enter the following into the editor to construct a image widget: ![](https://via.placeholder.com/150) – this is done by a simple atomic widget extension in the code here

  7. Press “Enter” to switch to a new line, and now switch to newly added Chinese IME (click the flag in the menu bar)
    Screen Shot 2021-08-19 at 8.16.15 PM

  8. 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.

Hope this makes sense and thank you very much.

Best,

Doesn’t seem to be showing up on Chrome Linux. I’ll test on a mac later.

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?

Yes I tired with the latest versions for all dependencies in the repo and it still persists.

Too bad. I’ll spend some more time trying to reproduce the issue next week.

Thanks a lot!

No luck. With @codemirror/rangeset 0.19.1 I can’t get any issues to occur anymore using your demo.

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.

Thank you for your time and help!

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.