fix: update editor on code reset

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}
           />
         </span>
       </Suspense>