1 files changed, 17 insertions, 19 deletions

diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 9c3bb9cc17d..02038fcb534 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import { editor as monacoEditor, KeyCode, KeyMod } from 'monaco-editor';
 import store from '../stores';
 import DecorationsController from './decorations/controller';
 import DirtyDiffController from './diff/controller';
@@ -8,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;
 
@@ -17,24 +23,22 @@ export const clearDomElement = el => {
 };
 
 export default class Editor {
-  static create(monaco) {
-    if (this.editorInstance) return this.editorInstance;
-
-    this.editorInstance = new Editor(monaco);
-
+  static create() {
+    if (!this.editorInstance) {
+      this.editorInstance = new Editor();
+    }
     return this.editorInstance;
   }
 
-  constructor(monaco) {
-    this.monaco = monaco;
+  constructor() {
     this.currentModel = null;
     this.instance = null;
     this.dirtyDiffController = null;
     this.disposable = new Disposable();
-    this.modelManager = new ModelManager(this.monaco);
+    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 => {