Replace ACE with Editor Lite

Replaced ACE with the Editor Lite for resolving the merge
conflicts

app/assets/javascripts/merge_conflicts/components/diff_file_editor.js

 /* eslint-disable no-param-reassign */
-/* global ace */
 
 import Vue from 'vue';
+import { debounce } from 'lodash';
 import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import { __ } from '~/locale';
-import getModeByFileExtension from '~/lib/utils/ace_utils';
 
 (global => {
   global.mergeConflicts = global.mergeConflicts || {};
@@ -28,7 +27,6 @@ import getModeByFileExtension from '~/lib/utils/ace_utils';
     data() {
       return {
         saved: false,
-        loading: false,
         fileLoaded: false,
         originalContent: '',
       };
@@ -37,7 +35,6 @@ import getModeByFileExtension from '~/lib/utils/ace_utils';
       classObject() {
         return {
           saved: this.saved,
-          'is-loading': this.loading,
         };
       },
     },
@@ -45,7 +42,7 @@ import getModeByFileExtension from '~/lib/utils/ace_utils';
       'file.showEditor': function showEditorWatcher(val) {
         this.resetEditorContent();
 
-        if (!val || this.fileLoaded || this.loading) {
+        if (!val || this.fileLoaded) {
           return;
         }
 
@@ -59,30 +56,26 @@ import getModeByFileExtension from '~/lib/utils/ace_utils';
     },
     methods: {
       loadEditor() {
-        this.loading = true;
+        const EditorPromise = import(/* webpackChunkName: 'EditorLite' */ '~/editor/editor_lite');
+        const DataPromise = axios.get(this.file.content_path);
 
-        axios
-          .get(this.file.content_path)
-          .then(({ data }) => {
-            const content = this.$el.querySelector('pre');
-            const fileContent = document.createTextNode(data.content);
+        Promise.all([EditorPromise, DataPromise])
+          .then(([{ default: EditorLite }, { data }]) => {
+            const { content, new_path: path } = data;
+            const contentEl = this.$el.querySelector('.editor');
 
-            content.textContent = fileContent.textContent;
-
-            this.originalContent = data.content;
+            this.originalContent = content;
             this.fileLoaded = true;
-            this.editor = ace.edit(content);
-            this.editor.$blockScrolling = Infinity; // Turn off annoying warning
-            this.editor.getSession().setMode(getModeByFileExtension(data.new_path));
-            this.editor.on('change', () => {
-              this.saveDiffResolution();
+
+            this.editor = new EditorLite().createInstance({
+              el: contentEl,
+              blobPath: path || '',
+              blobContent: content || '',
             });
-            this.saveDiffResolution();
-            this.loading = false;
+            this.editor.onDidChangeModelContent(debounce(this.saveDiffResolution.bind(this), 250));
           })
           .catch(() => {
             flash(__('An error occurred while loading the file'));
-            this.loading = false;
           });
       },
       saveDiffResolution() {
@@ -95,7 +88,7 @@ import getModeByFileExtension from '~/lib/utils/ace_utils';
       },
       resetEditorContent() {
         if (this.fileLoaded) {
-          this.editor.setValue(this.originalContent, -1);
+          this.editor.setValue(this.originalContent);
         }
       },
       cancelDiscardConfirmation(file) {

app/assets/stylesheets/pages/editor.scss

@@ -8,18 +8,18 @@
     background: $gray-normal;
   }
 
-  #editor {
-    border: 0;
-    border-radius: 0;
+  #editor,
+  .editor {
+    @include gl-border-0;
+    @include gl-m-0;
+    @include gl-p-0;
+    @include gl-relative;
+    @include gl-w-full;
     height: 500px;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    width: 100%;
 
     .editor-loading-content {
-      height: 100%;
-      border: 0;
+      @include gl-h-full;
+      @include gl-border-0;
     }
   }
 

app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml

@@ -7,7 +7,4 @@
           %button.btn.btn-sm.btn-close{ "@click" => "acceptDiscardConfirmation(file)" } Discard changes
           %button.btn.btn-sm{ "@click" => "cancelDiscardConfirmation(file)" } Cancel
     .editor-wrap{ ":class" => "classObject" }
-      .loading
-        .spinner.spinner-md
-      .editor
-        %pre{ "style" => "height: 350px" }
+      .editor{ "style" => "height: 350px", data: { 'editor-loading': true } }

spec/features/merge_request/user_resolves_conflicts_spec.rb

@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 RSpec.describe 'Merge request > User resolves conflicts', :js do
+  include Spec::Support::Helpers::Features::EditorLiteSpecHelpers
+
   let(:project) { create(:project, :repository) }
   let(:user) { project.creator }
 
@@ -64,15 +66,13 @@ RSpec.describe 'Merge request > User resolves conflicts', :js do
       within find('.files-wrapper .diff-file', text: 'files/ruby/popen.rb') do
         click_button 'Edit inline'
         wait_for_requests
-        find('.files-wrapper .diff-file pre')
-        execute_script('ace.edit($(".files-wrapper .diff-file pre")[0]).setValue("One morning");')
+        editor_set_value("One morning")
       end
 
       within find('.files-wrapper .diff-file', text: 'files/ruby/regex.rb') do
         click_button 'Edit inline'
         wait_for_requests
-        find('.files-wrapper .diff-file pre')
-        execute_script('ace.edit($(".files-wrapper .diff-file pre")[1]).setValue("Gregor Samsa woke from troubled dreams");')
+        editor_set_value("Gregor Samsa woke from troubled dreams")
       end
 
       find_button('Commit to source branch').send_keys(:return)