diff --git a/client/src/templates/Challenges/classic/Editor.js b/client/src/templates/Challenges/classic/Editor.js index 14a2145bab..746d43bb7c 100644 --- a/client/src/templates/Challenges/classic/Editor.js +++ b/client/src/templates/Challenges/classic/Editor.js @@ -195,6 +195,18 @@ class Editor extends Component { return { model: this.data[this.currentFileKey].model }; }; + // Updates the model if the contents has changed. This is only necessary for + // changes coming from outside the editor (such as code resets). + updateEditorValues = () => { + const { challengeFiles } = this.props; + Object.keys(challengeFiles).forEach(key => { + const newContents = challengeFiles[key].contents; + if (this.data[key].model.getValue() !== newContents) { + this.data[key].model.setValue(newContents); + } + }); + }; + editorDidMount = (editor, monaco) => { this._editor = editor; editor.updateOptions({ @@ -295,6 +307,12 @@ class Editor extends Component { }; componentDidUpdate(prevProps) { + // If a challenge is reset, it needs to communicate that change to the + // editor. This looks for changes any challenge files and updates if needed. + if (this.props.challengeFiles !== prevProps.challengeFiles) { + this.updateEditorValues(); + } + if (this.props.dimensions !== prevProps.dimensions && this._editor) { this._editor.layout(); } @@ -307,7 +325,6 @@ class Editor extends Component { render() { const { challengeFiles, theme } = this.props; - const contents = challengeFiles[this.currentFileKey].contents; const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom'; // TODO: tabs should be dynamically created from the challengeFiles @@ -357,7 +374,6 @@ class Editor extends Component { onChange={this.onChange} options={this.options} theme={editorTheme} - value={contents} />