1 files changed, 49 insertions, 29 deletions
diff --git a/app/assets/javascripts/ide/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js
index 73cd684351c..78e6f632728 100644
--- a/app/assets/javascripts/ide/lib/common/model.js
+++ b/app/assets/javascripts/ide/lib/common/model.js
@@ -1,37 +1,45 @@
-/* global monaco */
+import { editor as monacoEditor, Uri } from 'monaco-editor';
 import Disposable from './disposable';
 import eventHub from '../../eventhub';
 
 export default class Model {
-  constructor(monaco, file) {
-    this.monaco = monaco;
+  constructor(file, head = null) {
     this.disposable = new Disposable();
     this.file = file;
+    this.head = head;
     this.content = file.content !== '' ? file.content : file.raw;
 
     this.disposable.add(
-      (this.originalModel = this.monaco.editor.createModel(
-        this.file.raw,
+      (this.originalModel = monacoEditor.createModel(
+        head ? head.content : this.file.raw,
         undefined,
-        new this.monaco.Uri(null, null, `original/${this.file.path}`),
+        new Uri(false, false, `original/${this.path}`),
       )),
-      (this.model = this.monaco.editor.createModel(
+      (this.model = monacoEditor.createModel(
         this.content,
         undefined,
-        new this.monaco.Uri(null, null, this.file.path),
+        new Uri(false, false, this.path),
       )),
     );
-
-    this.events = new Map();
+    if (this.file.mrChange) {
+      this.disposable.add(
+        (this.baseModel = monacoEditor.createModel(
+          this.file.baseRaw,
+          undefined,
+          new Uri(false, false, `target/${this.path}`),
+        )),
+      );
+    }
+
+    this.events = new Set();
 
     this.updateContent = this.updateContent.bind(this);
+    this.updateNewContent = this.updateNewContent.bind(this);
     this.dispose = this.dispose.bind(this);
 
-    eventHub.$on(`editor.update.model.dispose.${this.file.path}`, this.dispose);
-    eventHub.$on(
-      `editor.update.model.content.${this.file.path}`,
-      this.updateContent,
-    );
+    eventHub.$on(`editor.update.model.dispose.${this.file.key}`, this.dispose);
+    eventHub.$on(`editor.update.model.content.${this.file.key}`, this.updateContent);
+    eventHub.$on(`editor.update.model.new.content.${this.file.key}`, this.updateNewContent);
   }
 
   get url() {
@@ -47,7 +55,7 @@ export default class Model {
   }
 
   get path() {
-    return this.file.path;
+    return this.file.key;
   }
 
   getModel() {
@@ -58,33 +66,45 @@ export default class Model {
     return this.originalModel;
   }
 
+  getBaseModel() {
+    return this.baseModel;
+  }
+
   setValue(value) {
     this.getModel().setValue(value);
   }
 
   onChange(cb) {
-    this.events.set(
-      this.path,
-      this.disposable.add(this.model.onDidChangeContent(e => cb(this, e))),
-    );
+    this.events.add(this.disposable.add(this.model.onDidChangeContent(e => cb(this, e))));
+  }
+
+  onDispose(cb) {
+    this.events.add(cb);
   }
 
-  updateContent(content) {
+  updateContent({ content, changed }) {
     this.getOriginalModel().setValue(content);
+
+    if (!changed) {
+      this.getModel().setValue(content);
+    }
+  }
+
+  updateNewContent(content) {
     this.getModel().setValue(content);
   }
 
   dispose() {
     this.disposable.dispose();
+
+    this.events.forEach(cb => {
+      if (typeof cb === 'function') cb();
+    });
+
     this.events.clear();
 
-    eventHub.$off(
-      `editor.update.model.dispose.${this.file.path}`,
-      this.dispose,
-    );
-    eventHub.$off(
-      `editor.update.model.content.${this.file.path}`,
-      this.updateContent,
-    );
+    eventHub.$off(`editor.update.model.dispose.${this.file.key}`, this.dispose);
+    eventHub.$off(`editor.update.model.content.${this.file.key}`, this.updateContent);
+    eventHub.$off(`editor.update.model.new.content.${this.file.key}`, this.updateNewContent);
   }
 }