summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js
blob: d270bee25c776d86846a8e2498708fe1de37e0ee (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import createFlash from '~/flash';
import { BLOB_EDITOR_ERROR } from '~/blob_edit/constants';

export default class CILintEditor {
  constructor() {
    const monacoEnabled = window?.gon?.features?.monacoCi;
    this.clearYml = document.querySelector('.clear-yml');
    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();
    });
  }
}