Replace textarea with Ace editor

4 files changed, 30 insertions, 8 deletions

diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6 b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
index 570d9ff877c..abdf73febb4 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
@@ -4,7 +4,7 @@
     template: '#diff-file-editor',
     data() {
       return {
-        originalState: '',
+        originalContent: '',
         saved: false,
         loading: false,
         fileLoaded: false
@@ -23,6 +23,8 @@
       loadFile(val) {
         const self = this;
 
+        this.resetEditorContent();
+
         if (!val || this.fileLoaded || this.loading) {
           return
         }
@@ -31,10 +33,19 @@
 
         $.get(this.file.content_path)
           .done((file) => {
-            $(self.$el).find('textarea').val(file.content);
 
-            self.originalState = file.content;
+            let content = self.$el.querySelector('pre');
+            let fileContent = document.createTextNode(file.content);
+
+            content.textContent = fileContent.textContent;
+
+            self.originalContent = file.content;
             self.fileLoaded = true;
+            self.editor = ace.edit(content);
+            self.editor.$blockScrolling = Infinity; // Turn off annoying warning
+            self.editor.on('change', () => {
+              self.saveDiffResolution();
+            });
             self.saveDiffResolution();
           })
           .fail(() => {
@@ -50,12 +61,14 @@
         this.saved = true;
 
         // This probably be better placed in the data provider
-        this.file.content = this.$el.querySelector('textarea').value;
-        this.file.resolveEditChanged = this.file.content !== this.originalState;
+        this.file.content = this.editor.getValue();
+        this.file.resolveEditChanged = this.file.content !== this.originalContent;
         this.file.promptDiscardConfirmation = false;
       },
-      onInput() {
-        this.saveDiffResolution();
+      resetEditorContent() {
+        if (this.fileLoaded) {
+          this.editor.setValue(this.originalContent, -1);
+        }
       }
     }
   });
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index 577a97e8c0e..2a8c693b2a8 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -255,6 +255,13 @@ $colors: (
     
     .editor {
       border-top: solid 1px yellow;
+
+      pre {
+        height: 350px;
+        border: none;
+        border-radius: 0;
+        margin-bottom: 0;
+      }
     }
 
     .loading-text {
diff --git a/app/views/projects/merge_requests/conflicts.html.haml b/app/views/projects/merge_requests/conflicts.html.haml
index e3add1f799f..ff641b90b86 100644
--- a/app/views/projects/merge_requests/conflicts.html.haml
+++ b/app/views/projects/merge_requests/conflicts.html.haml
@@ -6,6 +6,8 @@
     'unselected': line.isUnselected }"
 
 - page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/ace.js')
 = render "projects/merge_requests/show/mr_title"
 
 .merge-request-details.issuable-details
diff --git a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
index 0556341fd64..940558e02e0 100644
--- a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
+++ b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
@@ -3,4 +3,4 @@
     .editor-wrap{ ":class" => "classObject" }
       %p.loading-text Loading...
       .editor
-        %textarea{ "@input" => "onInput", cols: '80', rows: '20' }
+        %pre{ "style" => "height: 350px" }