diff options
Diffstat (limited to 'app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js')
-rw-r--r-- | app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js | 47 |
1 files changed, 38 insertions, 9 deletions
diff --git a/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js b/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js index 9ab73be80a0..d270bee25c7 100644 --- a/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js +++ b/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js @@ -1,19 +1,48 @@ +import createFlash from '~/flash'; +import { BLOB_EDITOR_ERROR } from '~/blob_edit/constants'; + export default class CILintEditor { constructor() { - this.editor = window.ace.edit('ci-editor'); - this.textarea = document.querySelector('#content'); + const monacoEnabled = window?.gon?.features?.monacoCi; this.clearYml = document.querySelector('.clear-yml'); - - this.editor.getSession().setMode('ace/mode/yaml'); - this.editor.on('input', () => { - const content = this.editor.getSession().getValue(); - this.textarea.value = content; - }); - this.clearYml.addEventListener('click', this.clear.bind(this)); + + return monacoEnabled ? this.initEditorLite() : this.initAce(); } clear() { this.editor.setValue(''); } + + initEditorLite() { + import(/* webpackChunkName: 'monaco_editor_lite' */ '~/editor/editor_lite') + .then(({ default: EditorLite }) => { + const editorEl = document.getElementById('editor'); + const fileContentEl = document.getElementById('content'); + const form = document.querySelector('.js-ci-lint-form'); + + const rootEditor = new EditorLite(); + + this.editor = rootEditor.createInstance({ + el: editorEl, + blobPath: '.gitlab-ci.yml', + blobContent: editorEl.innerText, + }); + + form.addEventListener('submit', () => { + fileContentEl.value = this.editor.getValue(); + }); + }) + .catch(() => createFlash({ message: BLOB_EDITOR_ERROR })); + } + + initAce() { + this.editor = window.ace.edit('ci-editor'); + this.textarea = document.getElementById('content'); + + this.editor.getSession().setMode('ace/mode/yaml'); + this.editor.on('input', () => { + this.textarea.value = this.editor.getSession().getValue(); + }); + } } |