Editor crashing when used as controlled component in react

hi marijn!

I know that codemirror is not created specifically to work in react, but I’m hoping you can still help.
we are currently facing an issue with the editor throwing an error when we intercept a transaction that would update the document to make the editor controlled.

I created a minimal example here.

the flow is basically:

  • the editor component accepts value and onChange
  • the editor component creates the editor view
  • in a transaction filter, if the doc changes, we intercept the transaction and instead call onChange
  • only if the user sets the changed value in his state, we dispatch a transaction to update the doc

the problem is that when I do nothing with the value in the outside state (App.js), I can type one character and the document doesn’t update - as expected, since I never apply the changed value.
as soon as I type the second character, the editor crashes, because even though I intercept the transaction, the range is still updated somewhere and then doesn’t match the document range anymore.

what makes it even more interesting:
this seems to work on mac + chrome, but not windows + chrome. so I’m hoping you can reproduce that with the provided example, it does at least crash reliably on a couple of machines of my colleagues.

I already tried intercepting all the transactions after a doc change, but that also didn’t help because some update apparently is still applied leading to the range mismatch.

best,
peter

I’m not volunteering to debug issue caused by wrapper code that I don’t maintain, sorry.

totally understandable, which is also why I stated

I know that codemirror is not created specifically to work in react, but I’m hoping you can still help.

anyway, stripped it down even further, not using react at all, see the “Try CodeMirror” example.

again, intercepting the docChanged transaction only works once. typing another character breaks.
I would expect this to work, since I have no way of knowing what is going on under hood besides the docChanged transaction. also - it doesn’t seem to be another transaction causing the issue, since the error occurs before the transaction filter is running again.
somewhere, the length of the document is apparently still updated, even though I intercept the transaction and - naive as I am - I assumed that’s what transaction filters are for.

maybe there is a way for me to tell codemirror “please don’t do that”, but I couldn’t find anything in the docs and all my attempts failed so far.
so again - I’m asking for ideas.

Thanks for the reduced reproduction. This was another regression caused by switching to Chrome’s EditContext feature. Linked patch should help.

1 Like

hi @marijn!

the bug with intercepting certain transactions re-surfaced.
not sure if it’s the exact same issue, but we do get crashes again when entering characters that trigger a compose event. same “Try CodeMirror” example.

using any language that has composed characters, like german or japanese, entering the first character still works, but as soon as I add the second character, that would merge the two into one composed character, I get the range error - invalid change range again.

could you take another look at this one?
maybe there is an easy way for us to intercept additional transactions that are causing the error, but since there are quite a few transaction triggered and I’m just using the docChanged flag, I think it would be better to fix this on codemirror side?

That seems to be another symptom of issue 1472. This patch works around it, though a proper solution would require Chrome fixing their implementation.

awesome, thx marijn! well - not awesome - but you know… xD
fingers crossed that the devs at chromium are maybe even 10 percent as responsive as you are! as always - your support is highly appreciated!