refactor monaco-editor import and stop storing as class property within editor

2 files changed, 16 insertions, 17 deletions

diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 30254b25c1e..02038fcb534 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import * as monaco from 'monaco-editor';
+import { editor as monacoEditor, KeyCode, KeyMod } from 'monaco-editor';
 import store from '../stores';
 import DecorationsController from './decorations/controller';
 import DirtyDiffController from './diff/controller';
@@ -9,6 +9,11 @@ import editorOptions, { defaultEditorOptions } from './editor_options';
 import gitlabTheme from './themes/gl_theme';
 import keymap from './keymap.json';
 
+function setupMonacoTheme() {
+  monacoEditor.defineTheme(gitlabTheme.themeName, gitlabTheme.monacoTheme);
+  monacoEditor.setTheme('gitlab');
+}
+
 export const clearDomElement = el => {
   if (!el || !el.firstChild) return;
 
@@ -26,7 +31,6 @@ export default class Editor {
   }
 
   constructor() {
-    this.monaco = monaco;
     this.currentModel = null;
     this.instance = null;
     this.dirtyDiffController = null;
@@ -34,7 +38,7 @@ export default class Editor {
     this.modelManager = new ModelManager();
     this.decorationsController = new DecorationsController(this);
 
-    this.setupMonacoTheme();
+    setupMonacoTheme();
 
     this.debouncedUpdate = _.debounce(() => {
       this.updateDimensions();
@@ -46,7 +50,7 @@ export default class Editor {
       clearDomElement(domElement);
 
       this.disposable.add(
-        (this.instance = this.monaco.editor.create(domElement, {
+        (this.instance = monacoEditor.create(domElement, {
           ...defaultEditorOptions,
         })),
         (this.dirtyDiffController = new DirtyDiffController(
@@ -66,7 +70,7 @@ export default class Editor {
       clearDomElement(domElement);
 
       this.disposable.add(
-        (this.instance = this.monaco.editor.createDiffEditor(domElement, {
+        (this.instance = monacoEditor.createDiffEditor(domElement, {
           ...defaultEditorOptions,
           quickSuggestions: false,
           occurrencesHighlight: false,
@@ -122,17 +126,11 @@ export default class Editor {
       modified: model.getModel(),
     });
 
-    this.monaco.editor.createDiffNavigator(this.instance, {
+    monacoEditor.createDiffNavigator(this.instance, {
       alwaysRevealFirst: true,
     });
   }
 
-  setupMonacoTheme() {
-    this.monaco.editor.defineTheme(gitlabTheme.themeName, gitlabTheme.monacoTheme);
-
-    this.monaco.editor.setTheme('gitlab');
-  }
-
   clearEditor() {
     if (this.instance) {
       this.instance.setModel(null);
@@ -200,7 +198,7 @@ export default class Editor {
     const getKeyCode = key => {
       const monacoKeyMod = key.indexOf('KEY_') === 0;
 
-      return monacoKeyMod ? this.monaco.KeyCode[key] : this.monaco.KeyMod[key];
+      return monacoKeyMod ? KeyCode[key] : KeyMod[key];
     };
 
     keymap.forEach(command => {
diff --git a/spec/javascripts/ide/lib/editor_spec.js b/spec/javascripts/ide/lib/editor_spec.js
index cf867d021e6..c1932284d53 100644
--- a/spec/javascripts/ide/lib/editor_spec.js
+++ b/spec/javascripts/ide/lib/editor_spec.js
@@ -1,3 +1,4 @@
+import { editor as monacoEditor } from 'monaco-editor';
 import Editor from '~/ide/lib/editor';
 import { file } from '../helpers';
 
@@ -32,11 +33,11 @@ describe('Multi-file editor library', () => {
 
   describe('createInstance', () => {
     it('creates editor instance', () => {
-      spyOn(instance.monaco.editor, 'create').and.callThrough();
+      spyOn(monacoEditor, 'create').and.callThrough();
 
       instance.createInstance(holder);
 
-      expect(instance.monaco.editor.create).toHaveBeenCalled();
+      expect(monacoEditor.create).toHaveBeenCalled();
     });
 
     it('creates dirty diff controller', () => {
@@ -54,11 +55,11 @@ describe('Multi-file editor library', () => {
 
   describe('createDiffInstance', () => {
     it('creates editor instance', () => {
-      spyOn(instance.monaco.editor, 'createDiffEditor').and.callThrough();
+      spyOn(monacoEditor, 'createDiffEditor').and.callThrough();
 
       instance.createDiffInstance(holder);
 
-      expect(instance.monaco.editor.createDiffEditor).toHaveBeenCalledWith(holder, {
+      expect(monacoEditor.createDiffEditor).toHaveBeenCalledWith(holder, {
         model: null,
         contextmenu: true,
         minimap: {