[React Editor] Very fast typing may reset the curser and insert text incorrectly

[martin-fleck-at]

This is extracted from #986 (comment) where it is noted that if you type very fast, the cursor might be reset and the text may be inserted incorrectly. The original issue has been improved a lot upon (thank you!) but it is still possible to hit this - either manually if you try or easily during tests.

I open this bug to keep track of the issue as testing is an important scenario for us.

[kaisalmen]

@martin-fleck-at I fear this is a chicken-egg problem where the component can't decide who is right. The key-stroke fires an update which is update the outer state which triggers an update again. When we type too fast, the cursor jumps, because the update-order is not correct (react update is too slow).

From my point of view monaco-editor must drive the correctness of the content and not react, what is against the react paradigm (parent->child). I currently don't have a good solution for this particular problem. It did not exist in the past, because the codeResource text did not directly drive the editor content (only on init). Any thought/idea is welcome.

[martin-fleck-at]

@kaisalmen That is indeed a very annoying problem. I tried to fix it myself and what seems to work in my case is a set of boolean flags that track whether the update is local (from the user typing) or external (through React prop update) and making sure that we remember the last properly synced value (independent of whether it was local or external). This is part of a very simple React Editor component I proposed as part of our project. Since our initialization of Monaco and the language client is already handled by other parts of the application, the component is more focused on the rendering part. Maybe a similar approach can be used in your React component. Overall, my hope would be to get rid of our React component and simply use yours.

[kaisalmen]

@martin-fleck-at I came up with a very similar idea in parallel. Please have a look at #997 The text/model/editor options are only re-processed if the flag is passed.

[kaisalmen]

@martin-fleck-at a new next release is available (only the component this time):
https://www.npmjs.com/package/@typefox/monaco-editor-react/v/7.4.0-next.0

[martin-fleck-at]

@kaisalmen Is there a monaco-languageclient release that goes along with that? Otherwise I do run into some issues with the different versions of the codingame packages:

Another version of monaco-vscode-api has already been loaded. Trying to load 1.106.2-dc007c06-eb99-4473-b2ba-a238007d1803, 1.106.0-caa205c1-2dea-4ce4-b106-ec3a1e3ec31f is already loaded

I tried to fix it with npm override but somehow I couldn't really get that to work.

[kaisalmen]

@martin-fleck-at that should not be, because we use ^23. Anyway, give me twenty minutes for a new release

[kaisalmen]

New next releases are available:
https://www.npmjs.com/package/monaco-languageclient/v/10.4.0-next.1
https://www.npmjs.com/package/@typefox/monaco-editor-react/v/7.4.0-next.1

[martin-fleck-at]

Fantastic, thank you very much! I can confirm that with the latest version I don't see any issues with typing fast or external updates! Will have a deeper look into the code now.