Fixing model's disposal

app/assets/javascripts/editor/editor_lite.js

@@ -103,11 +103,11 @@ export default class EditorLite {
   }
 
   static createEditorModel({
-    blobPath = '',
-    blobContent = '',
-    originalBlobContent = null,
-    blobGlobalId = uuids()[0],
-    instance = null,
+    blobPath,
+    blobContent,
+    originalBlobContent,
+    blobGlobalId,
+    instance,
   } = {}) {
     if (!instance) {
       return null;
@@ -116,7 +116,7 @@ export default class EditorLite {
     const existingModel = monacoEditor.getModel(uriFilePath);
     const model =
       existingModel || monacoEditor.createModel(blobContent, undefined, Uri.file(uriFilePath));
-    if (originalBlobContent === null) {
+    if (!originalBlobContent) {
       instance.setModel(model);
     } else {
       instance.setModel({
@@ -124,6 +124,7 @@ export default class EditorLite {
         modified: model,
       });
     }
+    return instance.getModel();
   }
 
   /**
@@ -148,6 +149,7 @@ export default class EditorLite {
     EditorLite.prepareInstance(el);
 
     let instance;
+    let model;
 
     if (!diff) {
       instance = monacoEditor.create(el, {
@@ -155,7 +157,7 @@ export default class EditorLite {
         ...instanceOptions,
       });
       if (instanceOptions.model !== null) {
-        EditorLite.createEditorModel({ blobGlobalId, blobPath, blobContent, instance });
+        model = EditorLite.createEditorModel({ blobGlobalId, blobPath, blobContent, instance });
       }
     } else {
       instance = monacoEditor.createDiffEditor(el, {
@@ -163,7 +165,7 @@ export default class EditorLite {
         ...instanceOptions,
       });
       if (instanceOptions.model !== null) {
-        EditorLite.createEditorModel({
+        model = EditorLite.createEditorModel({
           blobGlobalId,
           originalBlobContent,
           blobPath,
@@ -194,6 +196,8 @@ export default class EditorLite {
         } else {
           instanceModel.dispose();
         }
+      } else if (model) {
+        model.dispose();
       }
     });
     EditorLite.manageDefaultExtensions(instance, el, extensions);

spec/frontend/editor/editor_lite_spec.js

 /* eslint-disable max-classes-per-file */
 import { editor as monacoEditor, languages as monacoLanguages, Uri } from 'monaco-editor';
 import waitForPromises from 'helpers/wait_for_promises';
-import Editor from '~/editor/editor_lite';
+import EditorLite from '~/editor/editor_lite';
 import { EditorLiteExtension } from '~/editor/extensions/editor_lite_extension_base';
 import { DEFAULT_THEME, themes } from '~/ide/lib/themes';
 import {
@@ -21,7 +21,7 @@ describe('Base editor', () => {
   beforeEach(() => {
     setFixtures('<div id="editor" data-editor-loading></div>');
     editorEl = document.getElementById('editor');
-    editor = new Editor();
+    editor = new EditorLite();
   });
 
   afterEach(() => {
@@ -148,16 +148,14 @@ describe('Base editor', () => {
       editorEl2 = document.getElementById('editor2');
       inst1Args = {
         el: editorEl1,
-        blobGlobalId,
       };
       inst2Args = {
         el: editorEl2,
         blobContent,
         blobPath,
-        blobGlobalId,
       };
 
-      editor = new Editor();
+      editor = new EditorLite();
       instanceSpy = jest.spyOn(monacoEditor, 'create');
     });
 
@@ -188,7 +186,7 @@ describe('Base editor', () => {
     });
 
     it('shares global editor options among all instances', () => {
-      editor = new Editor({
+      editor = new EditorLite({
         readOnly: true,
       });
 
@@ -200,7 +198,7 @@ describe('Base editor', () => {
     });
 
     it('allows overriding editor options on the instance level', () => {
-      editor = new Editor({
+      editor = new EditorLite({
         readOnly: true,
       });
       inst1 = editor.createInstance({
@@ -423,13 +421,14 @@ describe('Base editor', () => {
           el: editorEl,
           blobPath,
           blobContent,
-          blobGlobalId,
           extensions,
         });
       };
 
       beforeEach(() => {
-        editorExtensionSpy = jest.spyOn(Editor, 'pushToImportsArray').mockImplementation((arr) => {
+        editorExtensionSpy = jest
+          .spyOn(EditorLite, 'pushToImportsArray')
+          .mockImplementation((arr) => {
             arr.push(
               Promise.resolve({
                 default: {},
@@ -547,7 +546,7 @@ describe('Base editor', () => {
     it('sets default syntax highlighting theme', () => {
       const expectedTheme = themes.find((t) => t.name === DEFAULT_THEME);
 
-      editor = new Editor();
+      editor = new EditorLite();
 
       expect(themeDefineSpy).toHaveBeenCalledWith(DEFAULT_THEME, expectedTheme.data);
       expect(themeSetSpy).toHaveBeenCalledWith(DEFAULT_THEME);
@@ -559,7 +558,7 @@ describe('Base editor', () => {
       expect(expectedTheme.name).not.toBe(DEFAULT_THEME);
 
       window.gon.user_color_scheme = expectedTheme.name;
-      editor = new Editor();
+      editor = new EditorLite();
 
       expect(themeDefineSpy).toHaveBeenCalledWith(expectedTheme.name, expectedTheme.data);
       expect(themeSetSpy).toHaveBeenCalledWith(expectedTheme.name);
@@ -570,7 +569,7 @@ describe('Base editor', () => {
       const nonExistentTheme = { name };
 
       window.gon.user_color_scheme = nonExistentTheme.name;
-      editor = new Editor();
+      editor = new EditorLite();
 
       expect(themeDefineSpy).not.toHaveBeenCalled();
       expect(themeSetSpy).toHaveBeenCalledWith(DEFAULT_THEME);