diff --git a/app/assets/javascripts/editor/editor_lite.js b/app/assets/javascripts/editor/editor_lite.js index 136a232d9d0e451dcd6f45c5a28d750f1e098b1a..bbd5461ae4d195d2dd544a0ad3531972dc0b6f82 100644 --- a/app/assets/javascripts/editor/editor_lite.js +++ b/app/assets/javascripts/editor/editor_lite.js @@ -9,11 +9,7 @@ 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.instances = []; - this.model = null; this.options = { extraEditorClassName: 'gl-editor-lite', ...defaultEditorOptions, @@ -32,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. * @@ -51,19 +58,18 @@ export default class Editor { if (!el) { throw new Error(EDITOR_LITE_INSTANCE_ERROR_NO_EL); } - this.editorEl = el; - this.blobContent = blobContent; - this.blobPath = blobPath; - clearDomElement(this.editorEl); + clearDomElement(el); const uriFilePath = joinPaths(URI_PREFIX, blobGlobalId, blobPath); - const model = monacoEditor.createModel(this.blobContent, undefined, Uri.file(uriFilePath)); + const model = monacoEditor.createModel(blobContent, undefined, Uri.file(uriFilePath)); - monacoEditor.onDidCreateEditor(this.renderEditor.bind(this)); + monacoEditor.onDidCreateEditor(() => { + delete el.dataset.editorLoading; + }); - const instance = monacoEditor.create(this.editorEl, { + const instance = monacoEditor.create(el, { ...this.options, ...instanceOptions, }); @@ -73,13 +79,7 @@ export default class Editor { this.instances.splice(index, 1); model.dispose(); }); - instance.updateModelLanguage = path => this.updateModelLanguage(path); - - // Reference to the model on the editor level will go away in - // https://gitlab.com/gitlab-org/gitlab/-/issues/241023 - // After that, the references to the model will be routed through - // instance exclusively - this.model = model; + instance.updateModelLanguage = path => Editor.updateModelLanguage(path, instance); this.instances.push(instance); return instance; @@ -89,21 +89,6 @@ export default class Editor { this.instances.forEach(instance => instance.dispose()); } - renderEditor() { - delete this.editorEl.dataset.editorLoading; - } - - 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); - } - use(exts = [], instance = null) { const extensions = Array.isArray(exts) ? exts : [exts]; if (instance) { diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue index 4c586f6c3a69eb1bf3fd4e70d29dc684e5713e9c..e4cfde1a9f74ec157f0544344b28f8c1d15b551f 100644 --- a/app/assets/javascripts/issue_show/components/description.vue +++ b/app/assets/javascripts/issue_show/components/description.vue @@ -1,6 +1,6 @@