Add latest changes from gitlab-org/gitlab@master

1 files changed, 42 insertions, 6 deletions

diff --git a/app/assets/javascripts/snippet/snippet_bundle.js b/app/assets/javascripts/snippet/snippet_bundle.js
index 652531a1289..8e952fe9358 100644
--- a/app/assets/javascripts/snippet/snippet_bundle.js
+++ b/app/assets/javascripts/snippet/snippet_bundle.js
@@ -1,14 +1,50 @@
 /* global ace */
-
-import $ from 'jquery';
+import Editor from '~/editor/editor_lite';
 import setupCollapsibleInputs from './collapsible_input';
 
-export default () => {
-  const editor = ace.edit('editor');
+let editor;
+
+const initAce = () => {
+  editor = ace.edit('editor');
+
+  const form = document.querySelector('.snippet-form-holder form');
+  const content = document.querySelector('.snippet-file-content');
+  form.addEventListener('submit', () => {
+    content.value = editor.getValue();
+  });
+};
 
-  $('.snippet-form-holder form').on('submit', () => {
-    $('.snippet-file-content').val(editor.getValue());
+const initMonaco = () => {
+  const editorEl = document.getElementById('editor');
+  const contentEl = document.querySelector('.snippet-file-content');
+  const fileNameEl = document.querySelector('.snippet-file-name');
+  const form = document.querySelector('.snippet-form-holder form');
+
+  editor = new Editor();
+  editor.createInstance({
+    el: editorEl,
+    blobPath: fileNameEl.value,
+    blobContent: contentEl.value,
   });
 
+  fileNameEl.addEventListener('change', () => {
+    editor.updateModelLanguage(fileNameEl.value);
+  });
+
+  form.addEventListener('submit', () => {
+    contentEl.value = editor.getValue();
+  });
+};
+
+export const initEditor = () => {
+  if (window?.gon?.features?.monacoSnippets) {
+    initMonaco();
+  } else {
+    initAce();
+  }
   setupCollapsibleInputs();
 };
+
+export default () => {
+  initEditor();
+};