Refactored the Editor Lite a bit

app/assets/javascripts/editor/editor_lite.js

@@ -6,7 +6,12 @@ import { registerLanguages } from '~/ide/utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { uuids } from '~/diffs/utils/uuids';
 import { clearDomElement } from './utils';
-import { EDITOR_LITE_INSTANCE_ERROR_NO_EL, URI_PREFIX, EDITOR_READY_EVENT, EDITOR_TYPE_DIFF } from './constants';
+import {
+  EDITOR_LITE_INSTANCE_ERROR_NO_EL,
+  URI_PREFIX,
+  EDITOR_READY_EVENT,
+  EDITOR_TYPE_DIFF,
+} from './constants';
 
 export default class EditorLite {
   constructor(options = {}) {
@@ -105,7 +110,7 @@ export default class EditorLite {
   static createEditorModel({
     blobPath,
     blobContent,
-    originalBlobContent,
+    blobOriginalContent,
     blobGlobalId,
     instance,
   } = {}) {
@@ -113,20 +118,33 @@ export default class EditorLite {
       return null;
     }
     const uriFilePath = joinPaths(URI_PREFIX, blobGlobalId, blobPath);
-    const existingModel = monacoEditor.getModel(uriFilePath);
-    const model =
-      existingModel || monacoEditor.createModel(blobContent, undefined, Uri.file(uriFilePath));
-    if (!originalBlobContent) {
+    const uri = Uri.file(uriFilePath);
+    const existingModel = monacoEditor.getModel(uri);
+    const model = existingModel || monacoEditor.createModel(blobContent, undefined, uri);
+    if (!blobOriginalContent) {
       instance.setModel(model);
     } else {
       instance.setModel({
-        original: monacoEditor.createModel(originalBlobContent, undefined, Uri.file(uriFilePath)),
+        original: monacoEditor.createModel(blobOriginalContent, undefined, uri),
         modified: model,
       });
     }
     return instance.getModel();
   }
 
+  static decorateInstance = (inst) => {
+    const decoratedInstance = inst;
+    decoratedInstance.updateModelLanguage = (path) => EditorLite.updateModelLanguage(path, inst);
+    decoratedInstance.use = (exts = []) => {
+      const extensions = Array.isArray(exts) ? exts : [exts];
+      extensions.forEach((extension) => {
+        EditorLite.mixIntoInstance(extension, decoratedInstance);
+      });
+      return decoratedInstance;
+    };
+    return decoratedInstance;
+  };
+
   /**
    * Creates a monaco instance with the given options.
    *
@@ -140,7 +158,7 @@ export default class EditorLite {
     el = undefined,
     blobPath = '',
     blobContent = '',
-    originalBlobContent = '',
+    blobOriginalContent = '',
     blobGlobalId = uuids()[0],
     extensions = [],
     diff = false,
@@ -148,38 +166,25 @@ export default class EditorLite {
   } = {}) {
     EditorLite.prepareInstance(el);
 
-    let instance;
     let model;
-
-    if (!diff) {
-      instance = monacoEditor.create(el, {
-        ...this.options,
-        ...instanceOptions,
-      });
-      if (instanceOptions.model !== null) {
-        model = EditorLite.createEditorModel({ blobGlobalId, blobPath, blobContent, instance });
-      }
-    } else {
-      instance = monacoEditor.createDiffEditor(el, {
+    const createEditorFn = diff ? 'createDiffEditor' : 'create';
+    const instance = EditorLite.decorateInstance(
+      monacoEditor[createEditorFn].call(this, el, {
         ...this.options,
         ...instanceOptions,
+      }),
+    );
+
+    if (instanceOptions.model !== null) {
+      model = EditorLite.createEditorModel({
+        blobGlobalId,
+        blobOriginalContent,
+        blobPath,
+        blobContent,
+        instance,
       });
-      if (instanceOptions.model !== null) {
-        model = EditorLite.createEditorModel({
-          blobGlobalId,
-          originalBlobContent,
-          blobPath,
-          blobContent,
-          instance,
-        });
-      }
     }
 
-    Object.assign(instance, {
-      updateModelLanguage: (path) => EditorLite.updateModelLanguage(path, instance),
-      use: (args) => this.use(args, instance),
-    });
-
     instance.onDidDispose(() => {
       const index = this.instances.findIndex((inst) => inst === instance);
       this.instances.splice(index, 1);
@@ -200,6 +205,7 @@ export default class EditorLite {
         model.dispose();
       }
     });
+
     EditorLite.manageDefaultExtensions(instance, el, extensions);
 
     this.instances.push(instance);
@@ -217,19 +223,9 @@ export default class EditorLite {
     this.instances.forEach((instance) => instance.dispose());
   }
 
-  use(exts = [], instance = null) {
-    const extensions = Array.isArray(exts) ? exts : [exts];
-    const initExtensions = (inst) => {
-      extensions.forEach((extension) => {
-        EditorLite.mixIntoInstance(extension, inst);
-      });
-    };
-    if (instance) {
-      initExtensions(instance);
-      return instance;
-    }
+  use(exts) {
     this.instances.forEach((inst) => {
-      initExtensions(inst);
+      inst.use(exts);
     });
     return this;
   }

spec/frontend/editor/editor_lite_spec.js

@@ -45,18 +45,24 @@ describe('Base editor', () => {
   describe('instance of the Editor', () => {
     let modelSpy;
     let instanceSpy;
+    let use;
     let setModel;
+    let getModel;
     let dispose;
     let modelsStorage;
 
     beforeEach(() => {
       setModel = jest.fn();
+      getModel = jest.fn();
       dispose = jest.fn();
+      use = jest.fn();
       modelsStorage = new Map();
       modelSpy = jest.spyOn(monacoEditor, 'createModel').mockImplementation(() => fakeModel);
       instanceSpy = jest.spyOn(monacoEditor, 'create').mockImplementation(() => ({
         setModel,
+        getModel,
         dispose,
+        use,
         onDidDispose: jest.fn(),
       }));
       jest.spyOn(monacoEditor, 'getModel').mockImplementation((uri) => {
@@ -471,9 +477,14 @@ describe('Base editor', () => {
         const eventSpy = jest.fn().mockImplementation(() => {
           calls.push('event');
         });
-        const useSpy = jest.spyOn(editor, 'use').mockImplementation(() => {
+        const useSpy = jest.fn().mockImplementation(() => {
           calls.push('use');
         });
+        jest.spyOn(EditorLite, 'decorateInstance').mockImplementation((inst) => {
+          const decoratedInstance = inst;
+          decoratedInstance.use = useSpy;
+          return decoratedInstance;
+        });
         editorEl.addEventListener(EDITOR_READY_EVENT, eventSpy);
         instance = instanceConstructor('foo, bar');
         await waitForPromises();
@@ -507,12 +518,6 @@ describe('Base editor', () => {
         expect(inst1.alpha()).toEqual(alphaRes);
         expect(inst2.alpha()).toEqual(alphaRes);
       });
-
-      it('extends specific instance if it has been passed', () => {
-        editor.use(AlphaExt, inst2);
-        expect(inst1.alpha).toBeUndefined();
-        expect(inst2.alpha()).toEqual(alphaRes);
-      });
     });
   });