Add latest changes from gitlab-org/gitlab@master

2 files changed, 19 insertions, 6 deletions

diff --git a/app/assets/javascripts/blob/components/blob_edit_content.vue b/app/assets/javascripts/blob/components/blob_edit_content.vue
index c53de2e7746..477e8bae399 100644
--- a/app/assets/javascripts/blob/components/blob_edit_content.vue
+++ b/app/assets/javascripts/blob/components/blob_edit_content.vue
@@ -20,6 +20,13 @@ export default {
       required: false,
       default: '',
     },
+    // This is used to help uniquely create a monaco model
+    // even if two blob's share a file path.
+    fileGlobalId: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -36,7 +43,11 @@ export default {
       el: this.$refs.editor,
       blobPath: this.fileName,
       blobContent: this.value,
+      blobGlobalId: this.fileGlobalId,
     });
+
+    this.editor.onChangeContent(debounce(this.onFileChange.bind(this), 250));
+
     window.requestAnimationFrame(() => {
       if (!performance.getEntriesByName(SNIPPET_MARK_BLOBS_CONTENT).length) {
         performance.mark(SNIPPET_MARK_BLOBS_CONTENT);
@@ -45,16 +56,19 @@ export default {
       }
     });
   },
+  beforeDestroy() {
+    this.editor.dispose();
+  },
   methods: {
-    triggerFileChange: debounce(function debouncedFileChange() {
+    onFileChange() {
       this.$emit('input', this.editor.getValue());
-    }, 250),
+    },
   },
 };
 </script>
 <template>
   <div class="file-content code">
-    <div id="editor" ref="editor" data-editor-loading @keyup="triggerFileChange">
+    <div id="editor" ref="editor" data-editor-loading>
       <pre class="editor-loading-content">{{ value }}</pre>
     </div>
   </div>
diff --git a/app/assets/javascripts/blob/utils.js b/app/assets/javascripts/blob/utils.js
index 840a3dbe450..052de0cb9d4 100644
--- a/app/assets/javascripts/blob/utils.js
+++ b/app/assets/javascripts/blob/utils.js
@@ -1,14 +1,13 @@
 import Editor from '~/editor/editor_lite';
 
-export function initEditorLite({ el, blobPath, blobContent }) {
+export function initEditorLite({ el, ...args }) {
   if (!el) {
     throw new Error(`"el" parameter is required to initialize Editor`);
   }
   const editor = new Editor();
   editor.createInstance({
     el,
-    blobPath,
-    blobContent,
+    ...args,
   });
 
   return editor;