Fix race condition that's causing preview/console and code to be out of sync (#990) (#1031)

* Fix race condition that's causing preview/console and code to be out of sync (#990)

* Refactor

* Fix undefined prop error

client/modules/IDE/components/PreviewFrame.jsx

@@ -143,10 +143,18 @@ class PreviewFrame extends React.Component {
     return newContent;
   }
 
+  mergeLocalFilesAndEditorActiveFile() {
+    const files = this.props.files.slice();
+    const activeFileInEditor = this.props.cmController.getContent();
+    files.find(file => file.id === activeFileInEditor.id).content = activeFileInEditor.content;
+    return files;
+  }
+
   injectLocalFiles() {
     const htmlFile = this.props.htmlFile.content;
     let scriptOffs = [];
-    const resolvedFiles = this.resolveJSAndCSSLinks(this.props.files);
+    const files = this.mergeLocalFilesAndEditorActiveFile();
+    const resolvedFiles = this.resolveJSAndCSSLinks(files);
     const parser = new DOMParser();
     const sketchDoc = parser.parseFromString(htmlFile, 'text/html');
 
@@ -381,10 +389,14 @@ PreviewFrame.propTypes = {
   stopSketch: PropTypes.func.isRequired,
   expandConsole: PropTypes.func.isRequired,
   clearConsole: PropTypes.func.isRequired,
+  cmController: PropTypes.shape({
+    getContent: PropTypes.func
+  })
 };
 
 PreviewFrame.defaultProps = {
-  fullView: false
+  fullView: false,
+  cmController: {}
 };
 
 export default PreviewFrame;

client/modules/IDE/pages/IDEView.jsx

@@ -345,6 +345,7 @@ class IDEView extends React.Component {
                     setBlobUrl={this.props.setBlobUrl}
                     expandConsole={this.props.expandConsole}
                     clearConsole={this.props.clearConsole}
+                    cmController={this.cmController}
                   />
                 </div>
               </div>