nteract / nteract

📘 The interactive computing suite for you! ✨

Home Page:https://nteract.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Monaco editor should take into consideration that the value prop changed before calling setValue

barryt2 opened this issue · comments

Application or Package Used
nteract monaco-editor package.

Describe the bug
The Monaco editor should take into consideration that the value prop has changed before calling setValue with a new value.

Current code in componentDidUpdate:

// Ensures that the source contents of the editor (value) is consistent with the state of the editor
if (this.editor.getValue() !== this.props.value) {
  this.editor.setValue(this.props.value);
}

The use case for taking in consideration of "the value prop has changed" is to allow folks who may want to do some performance/scalability optimizations for large notebook scenarios is to cache the typing text externally outside of the editor and later committing the cached text to the redux store versus committing each typed character immediately to the redux store. Each redux store change per character typed could be expensive to re-render. The issue without taking "the value prop has changed" into consideration is that the current code above would cause the Monaco editor to re-render the using the old value prop that we know is not updated in the redux store to reflect what has been typed into the Monaco editor. So based on the current condition statement above, it will see that the Monaco editor text (up-to-date text value) is different from value prop (original text value), so it will call setValue with the old text value reverting what the user has typed. In the new proposal, we will detect that the value has actually changed and the value is different between the prop versus the text shown in the Monaco editor before calling setValue.

New code in componentDidUpdate:

// Ensures that the source contents of the editor (value) is consistent with the state of the editor
// and the value has actually changed.
if (this.editor.getValue() !== this.props.value && prevProps.value !== this.props.value) {
  this.editor.setValue(this.props.value);
}

Screenshots
N/A

Desktop (please complete the following information):

  • Os: Windows
  • Browser Chrome
  • Version 92

Additional context
N/A