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();
+    });
+  }
 }