Support ACE in blobs

When :monaco_snippets feature flag is off we still have to fall
back to rendering the ACE editor

app/assets/javascripts/blob/utils.js

+/* global ace */
 import Editor from '~/editor/editor_lite';
 
 export function initEditorLite({ el, blobPath, blobContent }) {
-  if(!el) {
+  if (!el) {
     throw new Error(`"el" parameter is required to initialize Editor`);
   }
-  const editor = new Editor();
-  editor.createInstance({
-    el,
-    blobPath,
-    blobContent,
-  });
+  let editor;
+
+  if (window?.gon?.features?.monacoSnippets) {
+    editor = new Editor();
+    editor.createInstance({
+      el,
+      blobPath,
+      blobContent,
+    });
+  } else {
+    editor = ace.edit(el);
+  }
 
   return editor;
 }

app/assets/javascripts/snippet/snippet_bundle.js

-/* global ace */
 import { initEditorLite } from '~/blob/utils';
 import setupCollapsibleInputs from './collapsible_input';
 
 let editor;
 
 const initAce = () => {
-  editor = ace.edit('editor');
-
+  const editorEl = document.getElementById('editor');
   const form = document.querySelector('.snippet-form-holder form');
   const content = document.querySelector('.snippet-file-content');
+
+  editor = initEditorLite({ el: editorEl });
+
   form.addEventListener('submit', () => {
     content.value = editor.getValue();
   });

spec/frontend/blob/utils_spec.js

 import Editor from '~/editor/editor_lite';
 import * as utils from '~/blob/utils';
 
-const mockCreateInstance = jest.fn();
+const mockCreateMonacoInstance = jest.fn();
 jest.mock('~/editor/editor_lite', () => {
   return jest.fn().mockImplementation(() => {
-    return { createInstance: mockCreateInstance };
+    return { createInstance: mockCreateMonacoInstance };
   });
 });
 
+const mockCreateAceInstance = jest.fn();
+global.ace = {
+  edit: mockCreateAceInstance,
+};
+
 describe('Blob utilities', () => {
   beforeEach(() => {
     Editor.mockClear();
@@ -23,29 +28,68 @@ describe('Blob utilities', () => {
       editorEl = document.getElementById('editor');
     });
 
-    it('initializes the Editor Lite', () => {
-      utils.initEditorLite({ el: editorEl });
-      expect(Editor).toHaveBeenCalled();
+    describe('Monaco editor', () => {
+      let origProp;
+
+      beforeEach(() => {
+        origProp = window.gon;
+        window.gon = {
+          features: {
+            monacoSnippets: true,
+          },
+        };
+      });
+
+      afterEach(() => {
+        window.gon = origProp;
+      });
+
+      it('initializes the Editor Lite', () => {
+        utils.initEditorLite({ el: editorEl });
+        expect(Editor).toHaveBeenCalled();
+      });
+
+      it('creates the instance with the passed parameters', () => {
+        utils.initEditorLite({ el: editorEl });
+        expect(mockCreateMonacoInstance.mock.calls[0]).toEqual([
+          {
+            el: editorEl,
+            blobPath: undefined,
+            blobContent: undefined,
+          },
+        ]);
+
+        utils.initEditorLite({ el: editorEl, blobPath, blobContent });
+        expect(mockCreateMonacoInstance.mock.calls[1]).toEqual([
+          {
+            el: editorEl,
+            blobPath,
+            blobContent,
+          },
+        ]);
+      });
     });
+    describe('ACE editor', () => {
+      let origProp;
+
+      beforeEach(() => {
+        origProp = window.gon;
+        window.gon = {
+          features: {
+            monacoSnippets: false,
+          },
+        };
+      });
+
+      afterEach(() => {
+        window.gon = origProp;
+      });
 
-    it('creates the instance with the passed parameters', () => {
-      utils.initEditorLite({ el: editorEl });
-      expect(mockCreateInstance.mock.calls[0]).toEqual([
-        {
-          el: editorEl,
-          blobPath: undefined,
-          blobContent: undefined,
-        },
-      ]);
-
-      utils.initEditorLite({ el: editorEl, blobPath, blobContent });
-      expect(mockCreateInstance.mock.calls[1]).toEqual([
-        {
-          el: editorEl,
-          blobPath,
-          blobContent,
-        },
-      ]);
+      it('does not initialize the Editor Lite', () => {
+        utils.initEditorLite({ el: editorEl });
+        expect(Editor).not.toHaveBeenCalled();
+        expect(mockCreateAceInstance).toHaveBeenCalledWith(editorEl);
+      });
     });
   });
 });

spec/frontend/snippets/components/snippet_blob_edit_spec.js

-/* eslint-disable no-unused-vars */
 import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
 import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
 import BlobContentEdit from '~/blob/components/blob_edit_content.vue';
 import { shallowMount } from '@vue/test-utils';
-import { initEditorLite } from '~/blob/utils';
 
 jest.mock('~/blob/utils', () => jest.fn());