Add latest changes from gitlab-org/gitlab@master

3 files changed, 79 insertions, 31 deletions

diff --git a/app/assets/javascripts/editor/constants.js b/app/assets/javascripts/editor/constants.js
new file mode 100644
index 00000000000..9ee692e953a
--- /dev/null
+++ b/app/assets/javascripts/editor/constants.js
@@ -0,0 +1,7 @@
+import { __ } from '~/locale';
+
+export const EDITOR_LITE_INSTANCE_ERROR_NO_EL = __(
+  '"el" parameter is required for createInstance()',
+);
+
+export const URI_PREFIX = 'gitlab';
diff --git a/app/assets/javascripts/editor/editor_lite.js b/app/assets/javascripts/editor/editor_lite.js
index 0af0c3ecdcf..d275cf3a205 100644
--- a/app/assets/javascripts/editor/editor_lite.js
+++ b/app/assets/javascripts/editor/editor_lite.js
@@ -5,13 +5,14 @@ import { defaultEditorOptions } from '~/ide/lib/editor_options';
 import { registerLanguages } from '~/ide/utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { clearDomElement } from './utils';
+import { EDITOR_LITE_INSTANCE_ERROR_NO_EL, URI_PREFIX } from './constants';
 
 export default class Editor {
   constructor(options = {}) {
     this.editorEl = null;
     this.blobContent = '';
     this.blobPath = '';
-    this.instance = null;
+    this.instances = [];
     this.model = null;
     this.options = {
       extraEditorClassName: 'gl-editor-lite',
@@ -40,31 +41,51 @@ export default class Editor {
    * @param {string} options.blobContent The content to initialize the monacoEditor.
    * @param {string} options.blobGlobalId This is used to help globally identify monaco instances that are created with the same blobPath.
    */
-  createInstance({ el = undefined, blobPath = '', blobContent = '', blobGlobalId = '' } = {}) {
-    if (!el) return;
+  createInstance({
+    el = undefined,
+    blobPath = '',
+    blobContent = '',
+    blobGlobalId = '',
+    ...instanceOptions
+  } = {}) {
+    if (!el) {
+      throw new Error(EDITOR_LITE_INSTANCE_ERROR_NO_EL);
+    }
     this.editorEl = el;
     this.blobContent = blobContent;
     this.blobPath = blobPath;
 
     clearDomElement(this.editorEl);
 
-    const uriFilePath = joinPaths('gitlab', blobGlobalId, blobPath);
+    const uriFilePath = joinPaths(URI_PREFIX, blobGlobalId, blobPath);
 
-    this.model = monacoEditor.createModel(this.blobContent, undefined, Uri.file(uriFilePath));
+    const model = monacoEditor.createModel(this.blobContent, undefined, Uri.file(uriFilePath));
 
     monacoEditor.onDidCreateEditor(this.renderEditor.bind(this));
 
-    this.instance = monacoEditor.create(this.editorEl, this.options);
-    this.instance.setModel(this.model);
+    const instance = monacoEditor.create(this.editorEl, {
+      ...this.options,
+      ...instanceOptions,
+    });
+    instance.setModel(model);
+    instance.onDidDispose(() => {
+      const index = this.instances.findIndex(inst => inst === instance);
+      this.instances.splice(index, 1);
+      model.dispose();
+    });
+
+    // Reference to the model on the editor level will go away in
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/241023
+    // After that, the references to the model will be routed through
+    // instance exclusively
+    this.model = model;
+
+    this.instances.push(instance);
+    return instance;
   }
 
   dispose() {
-    if (this.model) {
-      this.model.dispose();
-      this.model = null;
-    }
-
-    return this.instance && this.instance.dispose();
+    this.instances.forEach(instance => instance.dispose());
   }
 
   renderEditor() {
@@ -86,28 +107,52 @@ export default class Editor {
     monacoEditor.setModelLanguage(this.model, id);
   }
 
+  /**
+   * @deprecated do not use .getValue() directly on the editor.
+   * This proxy-method will be removed in https://gitlab.com/gitlab-org/gitlab/-/issues/241025
+   * Rather use it on the exact instance
+   */
   getValue() {
-    return this.instance.getValue();
+    return this.instances[0].getValue();
   }
 
+  /**
+   * @deprecated do not use .setValue() directly on the editor.
+   * This proxy-method will be removed in https://gitlab.com/gitlab-org/gitlab/-/issues/241025
+   * Rather use it on the exact instance
+   */
   setValue(val) {
-    this.instance.setValue(val);
+    this.instances[0].setValue(val);
   }
 
+  /**
+   * @deprecated do not use .focus() directly on the editor.
+   * This proxy-method will be removed in https://gitlab.com/gitlab-org/gitlab/-/issues/241025
+   * Rather use it on the exact instance
+   */
   focus() {
-    this.instance.focus();
+    this.instances[0].focus();
   }
 
-  navigateFileStart() {
-    this.instance.setPosition(new Position(1, 1));
+  /**
+   * @deprecated do not use .updateOptions() directly on the editor.
+   * This proxy-method will be removed in https://gitlab.com/gitlab-org/gitlab/-/issues/241025
+   * Rather use it on the exact instance
+   */
+  updateOptions(options = {}) {
+    this.instances[0].updateOptions(options);
   }
 
-  updateOptions(options = {}) {
-    this.instance.updateOptions(options);
+  navigateFileStart() {
+    this.instances[0].setPosition(new Position(1, 1));
   }
 
-  use(exts = []) {
+  use(exts = [], instance = null) {
     const extensions = Array.isArray(exts) ? exts : [exts];
-    Object.assign(this, ...extensions);
+    if (instance) {
+      Object.assign(instance, ...extensions);
+    } else {
+      this.instances.forEach(inst => Object.assign(inst, ...extensions));
+    }
   }
 }
diff --git a/app/assets/javascripts/editor/editor_markdown_ext.js b/app/assets/javascripts/editor/editor_markdown_ext.js
index 9d09663e643..c46f5736912 100644
--- a/app/assets/javascripts/editor/editor_markdown_ext.js
+++ b/app/assets/javascripts/editor/editor_markdown_ext.js
@@ -1,7 +1,7 @@
 export default {
   getSelectedText(selection = this.getSelection()) {
     const { startLineNumber, endLineNumber, startColumn, endColumn } = selection;
-    const valArray = this.instance.getValue().split('\n');
+    const valArray = this.getValue().split('\n');
     let text = '';
     if (startLineNumber === endLineNumber) {
       text = valArray[startLineNumber - 1].slice(startColumn - 1, endColumn - 1);
@@ -20,20 +20,16 @@ export default {
     return text;
   },
 
-  getSelection() {
-    return this.instance.getSelection();
-  },
-
   replaceSelectedText(text, select = undefined) {
     const forceMoveMarkers = !select;
-    this.instance.executeEdits('', [{ range: this.getSelection(), text, forceMoveMarkers }]);
+    this.executeEdits('', [{ range: this.getSelection(), text, forceMoveMarkers }]);
   },
 
   moveCursor(dx = 0, dy = 0) {
-    const pos = this.instance.getPosition();
+    const pos = this.getPosition();
     pos.column += dx;
     pos.lineNumber += dy;
-    this.instance.setPosition(pos);
+    this.setPosition(pos);
   },
 
   /**
@@ -94,6 +90,6 @@ export default {
       .setStartPosition(newStartLineNumber, newStartColumn)
       .setEndPosition(newEndLineNumber, newEndColumn);
 
-    this.instance.setSelection(newSelection);
+    this.setSelection(newSelection);
   },
 };