diff options
Diffstat (limited to 'app/assets/javascripts/editor/editor_lite.js')
-rw-r--r-- | app/assets/javascripts/editor/editor_lite.js | 113 |
1 files changed, 50 insertions, 63 deletions
diff --git a/app/assets/javascripts/editor/editor_lite.js b/app/assets/javascripts/editor/editor_lite.js index 0af0c3ecdcf..bbd5461ae4d 100644 --- a/app/assets/javascripts/editor/editor_lite.js +++ b/app/assets/javascripts/editor/editor_lite.js @@ -1,18 +1,15 @@ -import { editor as monacoEditor, languages as monacoLanguages, Position, Uri } from 'monaco-editor'; +import { editor as monacoEditor, languages as monacoLanguages, Uri } from 'monaco-editor'; import { DEFAULT_THEME, themes } from '~/ide/lib/themes'; import languages from '~/ide/lib/languages'; import { defaultEditorOptions } from '~/ide/lib/editor_options'; import { registerLanguages } from '~/ide/utils'; import { joinPaths } from '~/lib/utils/url_utility'; import { clearDomElement } from './utils'; +import { EDITOR_LITE_INSTANCE_ERROR_NO_EL, URI_PREFIX } from './constants'; export default class Editor { constructor(options = {}) { - this.editorEl = null; - this.blobContent = ''; - this.blobPath = ''; - this.instance = null; - this.model = null; + this.instances = []; this.options = { extraEditorClassName: 'gl-editor-lite', ...defaultEditorOptions, @@ -31,6 +28,17 @@ export default class Editor { monacoEditor.setTheme(theme ? themeName : DEFAULT_THEME); } + static updateModelLanguage(path, instance) { + if (!instance) return; + const model = instance.getModel(); + const ext = `.${path.split('.').pop()}`; + const language = monacoLanguages + .getLanguages() + .find(lang => lang.extensions.indexOf(ext) !== -1); + const id = language ? language.id : 'plaintext'; + monacoEditor.setModelLanguage(model, id); + } + /** * Creates a monaco instance with the given options. * @@ -40,74 +48,53 @@ export default class Editor { * @param {string} options.blobContent The content to initialize the monacoEditor. * @param {string} options.blobGlobalId This is used to help globally identify monaco instances that are created with the same blobPath. */ - createInstance({ el = undefined, blobPath = '', blobContent = '', blobGlobalId = '' } = {}) { - if (!el) return; - this.editorEl = el; - this.blobContent = blobContent; - this.blobPath = blobPath; - - clearDomElement(this.editorEl); - - const uriFilePath = joinPaths('gitlab', blobGlobalId, blobPath); - - this.model = monacoEditor.createModel(this.blobContent, undefined, Uri.file(uriFilePath)); - - monacoEditor.onDidCreateEditor(this.renderEditor.bind(this)); - - this.instance = monacoEditor.create(this.editorEl, this.options); - this.instance.setModel(this.model); - } - - dispose() { - if (this.model) { - this.model.dispose(); - this.model = null; + createInstance({ + el = undefined, + blobPath = '', + blobContent = '', + blobGlobalId = '', + ...instanceOptions + } = {}) { + if (!el) { + throw new Error(EDITOR_LITE_INSTANCE_ERROR_NO_EL); } - return this.instance && this.instance.dispose(); - } + clearDomElement(el); - renderEditor() { - delete this.editorEl.dataset.editorLoading; - } + const uriFilePath = joinPaths(URI_PREFIX, blobGlobalId, blobPath); - onChangeContent(fn) { - return this.model.onDidChangeContent(fn); - } + const model = monacoEditor.createModel(blobContent, undefined, Uri.file(uriFilePath)); - updateModelLanguage(path) { - if (path === this.blobPath) return; - this.blobPath = path; - const ext = `.${path.split('.').pop()}`; - const language = monacoLanguages - .getLanguages() - .find(lang => lang.extensions.indexOf(ext) !== -1); - const id = language ? language.id : 'plaintext'; - monacoEditor.setModelLanguage(this.model, id); - } + monacoEditor.onDidCreateEditor(() => { + delete el.dataset.editorLoading; + }); - getValue() { - return this.instance.getValue(); - } - - setValue(val) { - this.instance.setValue(val); - } + const instance = monacoEditor.create(el, { + ...this.options, + ...instanceOptions, + }); + instance.setModel(model); + instance.onDidDispose(() => { + const index = this.instances.findIndex(inst => inst === instance); + this.instances.splice(index, 1); + model.dispose(); + }); + instance.updateModelLanguage = path => Editor.updateModelLanguage(path, instance); - focus() { - this.instance.focus(); + this.instances.push(instance); + return instance; } - navigateFileStart() { - this.instance.setPosition(new Position(1, 1)); - } - - updateOptions(options = {}) { - this.instance.updateOptions(options); + dispose() { + this.instances.forEach(instance => instance.dispose()); } - use(exts = []) { + use(exts = [], instance = null) { const extensions = Array.isArray(exts) ? exts : [exts]; - Object.assign(this, ...extensions); + if (instance) { + Object.assign(instance, ...extensions); + } else { + this.instances.forEach(inst => Object.assign(inst, ...extensions)); + } } } |