Re-organization of the editor

Here, we update all existing usages of Editor
Lite to communicate with instances instead of the
global editor

app/assets/javascripts/blob/components/blob_edit_content.vue

@@ -46,7 +46,7 @@ export default {
       blobGlobalId: this.fileGlobalId,
     });
 
-    this.editor.onChangeContent(debounce(this.onFileChange.bind(this), 250));
+    this.editor.onDidChangeModelContent(debounce(this.onFileChange.bind(this), 250));
 
     window.requestAnimationFrame(() => {
       if (!performance.getEntriesByName(SNIPPET_MARK_BLOBS_CONTENT).length) {

app/assets/javascripts/blob/utils.js

@@ -6,12 +6,11 @@ export function initEditorLite({ el, ...args }) {
       alwaysConsumeMouseWheel: false,
     },
   });
-  editor.createInstance({
+
+  return editor.createInstance({
     el,
     ...args,
   });
-
-  return editor;
 }
 
 export default () => ({});

app/assets/javascripts/blob_edit/edit_blob.js

@@ -63,7 +63,7 @@ export default class EditBlob {
         }
 
         fileNameEl.addEventListener('change', () => {
-          rootEditor.updateModelLanguage(fileNameEl.value);
+          this.editor.updateModelLanguage(fileNameEl.value);
         });
 
         form.addEventListener('submit', () => {

app/assets/javascripts/editor/editor_lite.js

@@ -74,6 +74,8 @@ export default class Editor {
       model.dispose();
     });
 
+    instance.updateModelLanguage = path => this.updateModelLanguage(path);
+
     // 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
@@ -92,10 +94,6 @@ export default class Editor {
     delete this.editorEl.dataset.editorLoading;
   }
 
-  onChangeContent(fn) {
-    return this.model.onDidChangeContent(fn);
-  }
-
   updateModelLanguage(path) {
     if (path === this.blobPath) return;
     this.blobPath = path;

spec/frontend/blob/components/blob_edit_content_spec.js

@@ -2,12 +2,14 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import BlobEditContent from '~/blob/components/blob_edit_content.vue';
 import * as utils from '~/blob/utils';
-import Editor from '~/editor/editor_lite';
 
 jest.mock('~/editor/editor_lite');
 
 describe('Blob Header Editing', () => {
   let wrapper;
+  const onDidChangeModelContent = jest.fn();
+  const updateModelLanguage = jest.fn();
+  const getValue = jest.fn();
   const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
   const fileName = 'lorem.txt';
   const fileGlobalId = 'snippet_777';
@@ -24,7 +26,12 @@ describe('Blob Header Editing', () => {
   }
 
   beforeEach(() => {
-    jest.spyOn(utils, 'initEditorLite');
+    jest.spyOn(utils, 'initEditorLite').mockImplementation(() => ({
+      onDidChangeModelContent,
+      updateModelLanguage,
+      getValue,
+      dispose: jest.fn(),
+    }));
 
     createComponent();
   });
@@ -34,8 +41,8 @@ describe('Blob Header Editing', () => {
   });
 
   const triggerChangeContent = val => {
-    jest.spyOn(Editor.prototype, 'getValue').mockReturnValue(val);
-    const [cb] = Editor.prototype.onChangeContent.mock.calls[0];
+    getValue.mockReturnValue(val);
+    const [cb] = onDidChangeModelContent.mock.calls[0];
 
     cb();
 
@@ -79,12 +86,12 @@ describe('Blob Header Editing', () => {
       });
 
       return nextTick().then(() => {
-        expect(Editor.prototype.updateModelLanguage).toHaveBeenCalledWith(newFileName);
+        expect(updateModelLanguage).toHaveBeenCalledWith(newFileName);
       });
     });
 
     it('registers callback with editor onChangeContent', () => {
-      expect(Editor.prototype.onChangeContent).toHaveBeenCalledWith(expect.any(Function));
+      expect(onDidChangeModelContent).toHaveBeenCalledWith(expect.any(Function));
     });
 
     it('emits input event when the blob content is changed', () => {