Race condition: undo doesn't work correctly when interacting with handlers

[sorawee]

Consider:

import React, {useState} from 'react';
import MonacoEditor from 'react-monaco-editor';

const Child = ({code, handleChange, i}) =>
  <>
    <div>{i + ""}</div>
    <MonacoEditor width="800" height="600" value={code} onChange={handleChange} />
  </>;

const App = () => {
  const [code, setCode] = useState('hello world');
  const [i, setI] = useState(0);
  const handleChange = (e) => {
    // variant 1
    setCode(e);
    setI(i + 1);

    // variant 2
    // setI(i + 1);
    // setCode(e);
  };
  return <Child i={i} code={code} handleChange={handleChange} />;
};

export default App;

Variant 1 works correctly. If you type text and then undo, it reverts back to the previous state correctly.

Variant 2 doesn't work correctly, even though it looks equivalent to variant 2. If you type text and then undo, it does revert back to the previous state. However, because we call setI first, there's a discrepancy of this.__current_value and this.props.value at that particular moment, causing the editor to immediately update this.__current_value with undo stops added. Consequently:

• the cursor is reset back to the beginning
• undo stack is totally broken. The more you undo, the more you put stuff in undo stack.

[sorawee]

In case this is useful.

[domoritz]

Can you try before and after https://github.com/react-monaco-editor/react-monaco-editor/pull/212 was merged?

[sorawee]

Before #212, we have an amalgam of two problems. The second variant makes it impossible to undo.

[domoritz]

Thanks for the issue report. Do you know this is an issue with Monaco react or just monaco itself?

[sorawee]

I believe it's an issue with react-monaco-editor. componentDidUpdate didn't consider the case where it itself is called prematurely (by React).

[domoritz]

This is still an issue even after the recent updates.

[pastudan]

Just a note that a possible side-step is using editor.setValue() instead of passing a value prop to <MonacoEditor>.