Commit 4653820d authored by Mike Greiling's avatar Mike Greiling

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

parent 204d78e7
import _ from 'underscore'; import _ from 'underscore';
import * as monaco from 'monaco-editor'; import { editor as monacoEditor, KeyCode, KeyMod } from 'monaco-editor';
import store from '../stores'; import store from '../stores';
import DecorationsController from './decorations/controller'; import DecorationsController from './decorations/controller';
import DirtyDiffController from './diff/controller'; import DirtyDiffController from './diff/controller';
...@@ -9,6 +9,11 @@ import editorOptions, { defaultEditorOptions } from './editor_options'; ...@@ -9,6 +9,11 @@ import editorOptions, { defaultEditorOptions } from './editor_options';
import gitlabTheme from './themes/gl_theme'; import gitlabTheme from './themes/gl_theme';
import keymap from './keymap.json'; import keymap from './keymap.json';
function setupMonacoTheme() {
monacoEditor.defineTheme(gitlabTheme.themeName, gitlabTheme.monacoTheme);
monacoEditor.setTheme('gitlab');
}
export const clearDomElement = el => { export const clearDomElement = el => {
if (!el || !el.firstChild) return; if (!el || !el.firstChild) return;
...@@ -26,7 +31,6 @@ export default class Editor { ...@@ -26,7 +31,6 @@ export default class Editor {
} }
constructor() { constructor() {
this.monaco = monaco;
this.currentModel = null; this.currentModel = null;
this.instance = null; this.instance = null;
this.dirtyDiffController = null; this.dirtyDiffController = null;
...@@ -34,7 +38,7 @@ export default class Editor { ...@@ -34,7 +38,7 @@ export default class Editor {
this.modelManager = new ModelManager(); this.modelManager = new ModelManager();
this.decorationsController = new DecorationsController(this); this.decorationsController = new DecorationsController(this);
this.setupMonacoTheme(); setupMonacoTheme();
this.debouncedUpdate = _.debounce(() => { this.debouncedUpdate = _.debounce(() => {
this.updateDimensions(); this.updateDimensions();
...@@ -46,7 +50,7 @@ export default class Editor { ...@@ -46,7 +50,7 @@ export default class Editor {
clearDomElement(domElement); clearDomElement(domElement);
this.disposable.add( this.disposable.add(
(this.instance = this.monaco.editor.create(domElement, { (this.instance = monacoEditor.create(domElement, {
...defaultEditorOptions, ...defaultEditorOptions,
})), })),
(this.dirtyDiffController = new DirtyDiffController( (this.dirtyDiffController = new DirtyDiffController(
...@@ -66,7 +70,7 @@ export default class Editor { ...@@ -66,7 +70,7 @@ export default class Editor {
clearDomElement(domElement); clearDomElement(domElement);
this.disposable.add( this.disposable.add(
(this.instance = this.monaco.editor.createDiffEditor(domElement, { (this.instance = monacoEditor.createDiffEditor(domElement, {
...defaultEditorOptions, ...defaultEditorOptions,
quickSuggestions: false, quickSuggestions: false,
occurrencesHighlight: false, occurrencesHighlight: false,
...@@ -122,17 +126,11 @@ export default class Editor { ...@@ -122,17 +126,11 @@ export default class Editor {
modified: model.getModel(), modified: model.getModel(),
}); });
this.monaco.editor.createDiffNavigator(this.instance, { monacoEditor.createDiffNavigator(this.instance, {
alwaysRevealFirst: true, alwaysRevealFirst: true,
}); });
} }
setupMonacoTheme() {
this.monaco.editor.defineTheme(gitlabTheme.themeName, gitlabTheme.monacoTheme);
this.monaco.editor.setTheme('gitlab');
}
clearEditor() { clearEditor() {
if (this.instance) { if (this.instance) {
this.instance.setModel(null); this.instance.setModel(null);
...@@ -200,7 +198,7 @@ export default class Editor { ...@@ -200,7 +198,7 @@ export default class Editor {
const getKeyCode = key => { const getKeyCode = key => {
const monacoKeyMod = key.indexOf('KEY_') === 0; 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 => { keymap.forEach(command => {
......
import { editor as monacoEditor } from 'monaco-editor';
import Editor from '~/ide/lib/editor'; import Editor from '~/ide/lib/editor';
import { file } from '../helpers'; import { file } from '../helpers';
...@@ -32,11 +33,11 @@ describe('Multi-file editor library', () => { ...@@ -32,11 +33,11 @@ describe('Multi-file editor library', () => {
describe('createInstance', () => { describe('createInstance', () => {
it('creates editor instance', () => { it('creates editor instance', () => {
spyOn(instance.monaco.editor, 'create').and.callThrough(); spyOn(monacoEditor, 'create').and.callThrough();
instance.createInstance(holder); instance.createInstance(holder);
expect(instance.monaco.editor.create).toHaveBeenCalled(); expect(monacoEditor.create).toHaveBeenCalled();
}); });
it('creates dirty diff controller', () => { it('creates dirty diff controller', () => {
...@@ -54,11 +55,11 @@ describe('Multi-file editor library', () => { ...@@ -54,11 +55,11 @@ describe('Multi-file editor library', () => {
describe('createDiffInstance', () => { describe('createDiffInstance', () => {
it('creates editor instance', () => { it('creates editor instance', () => {
spyOn(instance.monaco.editor, 'createDiffEditor').and.callThrough(); spyOn(monacoEditor, 'createDiffEditor').and.callThrough();
instance.createDiffInstance(holder); instance.createDiffInstance(holder);
expect(instance.monaco.editor.createDiffEditor).toHaveBeenCalledWith(holder, { expect(monacoEditor.createDiffEditor).toHaveBeenCalledWith(holder, {
model: null, model: null,
contextmenu: true, contextmenu: true,
minimap: { minimap: {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment