1 files changed, 50 insertions, 63 deletions

diff --git a/app/assets/javascripts/editor/editor_lite.js b/app/assets/javascripts/editor/editor_lite.js
index 0af0c3ecdcf..bbd5461ae4d 100644
--- a/app/assets/javascripts/editor/editor_lite.js
+++ b/app/assets/javascripts/editor/editor_lite.js
@@ -1,18 +1,15 @@
-import { editor as monacoEditor, languages as monacoLanguages, Position, Uri } from 'monaco-editor';
+import { editor as monacoEditor, languages as monacoLanguages, Uri } from 'monaco-editor';
 import { DEFAULT_THEME, themes } from '~/ide/lib/themes';
 import languages from '~/ide/lib/languages';
 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.model = null;
+    this.instances = [];
     this.options = {
       extraEditorClassName: 'gl-editor-lite',
       ...defaultEditorOptions,
@@ -31,6 +28,17 @@ export default class Editor {
     monacoEditor.setTheme(theme ? themeName : DEFAULT_THEME);
   }
 
+  static updateModelLanguage(path, instance) {
+    if (!instance) return;
+    const model = instance.getModel();
+    const ext = `.${path.split('.').pop()}`;
+    const language = monacoLanguages
+      .getLanguages()
+      .find(lang => lang.extensions.indexOf(ext) !== -1);
+    const id = language ? language.id : 'plaintext';
+    monacoEditor.setModelLanguage(model, id);
+  }
+
   /**
    * Creates a monaco instance with the given options.
    *
@@ -40,74 +48,53 @@ 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;
-    this.editorEl = el;
-    this.blobContent = blobContent;
-    this.blobPath = blobPath;
-
-    clearDomElement(this.editorEl);
-
-    const uriFilePath = joinPaths('gitlab', blobGlobalId, blobPath);
-
-    this.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);
-  }
-
-  dispose() {
-    if (this.model) {
-      this.model.dispose();
-      this.model = null;
+  createInstance({
+    el = undefined,
+    blobPath = '',
+    blobContent = '',
+    blobGlobalId = '',
+    ...instanceOptions
+  } = {}) {
+    if (!el) {
+      throw new Error(EDITOR_LITE_INSTANCE_ERROR_NO_EL);
     }
 
-    return this.instance && this.instance.dispose();
-  }
+    clearDomElement(el);
 
-  renderEditor() {
-    delete this.editorEl.dataset.editorLoading;
-  }
+    const uriFilePath = joinPaths(URI_PREFIX, blobGlobalId, blobPath);
 
-  onChangeContent(fn) {
-    return this.model.onDidChangeContent(fn);
-  }
+    const model = monacoEditor.createModel(blobContent, undefined, Uri.file(uriFilePath));
 
-  updateModelLanguage(path) {
-    if (path === this.blobPath) return;
-    this.blobPath = path;
-    const ext = `.${path.split('.').pop()}`;
-    const language = monacoLanguages
-      .getLanguages()
-      .find(lang => lang.extensions.indexOf(ext) !== -1);
-    const id = language ? language.id : 'plaintext';
-    monacoEditor.setModelLanguage(this.model, id);
-  }
+    monacoEditor.onDidCreateEditor(() => {
+      delete el.dataset.editorLoading;
+    });
 
-  getValue() {
-    return this.instance.getValue();
-  }
-
-  setValue(val) {
-    this.instance.setValue(val);
-  }
+    const instance = monacoEditor.create(el, {
+      ...this.options,
+      ...instanceOptions,
+    });
+    instance.setModel(model);
+    instance.onDidDispose(() => {
+      const index = this.instances.findIndex(inst => inst === instance);
+      this.instances.splice(index, 1);
+      model.dispose();
+    });
+    instance.updateModelLanguage = path => Editor.updateModelLanguage(path, instance);
 
-  focus() {
-    this.instance.focus();
+    this.instances.push(instance);
+    return instance;
   }
 
-  navigateFileStart() {
-    this.instance.setPosition(new Position(1, 1));
-  }
-
-  updateOptions(options = {}) {
-    this.instance.updateOptions(options);
+  dispose() {
+    this.instances.forEach(instance => instance.dispose());
   }
 
-  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));
+    }
   }
 }