Merge branch '292943-cleanup-se' into 'master'

Source Editor core cleanup

See merge request gitlab-org/gitlab!74996

app/assets/javascripts/editor/source_editor.js

@@ -26,26 +26,6 @@ export default class SourceEditor {
     registerLanguages(...languages);
   }
 
-  static pushToImportsArray(arr, toImport) {
-    arr.push(import(toImport));
-  }
-
-  static loadExtensions(extensions) {
-    if (!extensions) {
-      return Promise.resolve();
-    }
-    const promises = [];
-    const extensionsArray = typeof extensions === 'string' ? extensions.split(',') : extensions;
-
-    extensionsArray.forEach((ext) => {
-      const prefix = ext.includes('/') ? '' : 'editor/';
-      const trimmedExt = ext.replace(/^\//, '').trim();
-      SourceEditor.pushToImportsArray(promises, `~/${prefix}${trimmedExt}`);
-    });
-
-    return Promise.all(promises);
-  }
-
   static mixIntoInstance(source, inst) {
     if (!inst) {
       return;
@@ -71,23 +51,6 @@ export default class SourceEditor {
     });
   }
 
-  static manageDefaultExtensions(instance, el, extensions) {
-    SourceEditor.loadExtensions(extensions, instance)
-      .then((modules) => {
-        if (modules) {
-          modules.forEach((module) => {
-            instance.use(module.default);
-          });
-        }
-      })
-      .then(() => {
-        el.dispatchEvent(new Event(EDITOR_READY_EVENT));
-      })
-      .catch((e) => {
-        throw e;
-      });
-  }
-
   static createEditorModel({
     blobPath,
     blobContent,
@@ -187,7 +150,6 @@ export default class SourceEditor {
     blobContent = '',
     blobOriginalContent = '',
     blobGlobalId = uuids()[0],
-    extensions = [],
     isDiff = false,
     ...instanceOptions
   } = {}) {
@@ -218,9 +180,8 @@ export default class SourceEditor {
       SourceEditor.instanceDisposeModels(this, instance, model);
     });
 
-    SourceEditor.manageDefaultExtensions(instance, el, extensions);
-
     this.instances.push(instance);
+    el.dispatchEvent(new CustomEvent(EDITOR_READY_EVENT, { instance }));
     return instance;
   }
 
@@ -234,11 +195,4 @@ export default class SourceEditor {
   dispose() {
     this.instances.forEach((instance) => instance.dispose());
   }
-
-  use(exts) {
-    this.instances.forEach((inst) => {
-      inst.use(exts);
-    });
-    return this;
-  }
 }

spec/frontend/editor/source_editor_markdown_ext_spec.js

@@ -57,7 +57,7 @@ describe('Markdown Extension for Source Editor', () => {
       blobPath: markdownPath,
       blobContent: text,
     });
-    editor.use(new EditorMarkdownExtension({ instance, previewMarkdownPath }));
+    instance.use(new EditorMarkdownExtension({ instance, previewMarkdownPath }));
     panelSpy = jest.spyOn(EditorMarkdownExtension, 'togglePreviewPanel');
   });
 

spec/frontend/editor/source_editor_spec.js

 /* eslint-disable max-classes-per-file */
 import { editor as monacoEditor, languages as monacoLanguages } from 'monaco-editor';
-import waitForPromises from 'helpers/wait_for_promises';
 import {
   SOURCE_EDITOR_INSTANCE_ERROR_NO_EL,
   URI_PREFIX,
@@ -531,105 +530,19 @@ describe('Base editor', () => {
         instance.use(FunctionExt);
         expect(instance.inst()).toEqual(editor.instances[0]);
       });
-    });
 
-    describe('extensions as an instance parameter', () => {
-      let editorExtensionSpy;
-      const instanceConstructor = (extensions = []) => {
-        return editor.createInstance({
-          el: editorEl,
-          blobPath,
-          blobContent,
-          extensions,
-        });
+      it('emits the EDITOR_READY_EVENT event after setting up the instance', () => {
+        jest.spyOn(monacoEditor, 'create').mockImplementation(() => {
+          return {
+            setModel: jest.fn(),
+            onDidDispose: jest.fn(),
           };
-
-      beforeEach(() => {
-        editorExtensionSpy = jest
-          .spyOn(SourceEditor, 'pushToImportsArray')
-          .mockImplementation((arr) => {
-            arr.push(
-              Promise.resolve({
-                default: {},
-              }),
-            );
-          });
-      });
-
-      it.each([undefined, [], [''], ''])(
-        'does not fail and makes no fetch if extensions is %s',
-        () => {
-          instance = instanceConstructor(null);
-          expect(editorExtensionSpy).not.toHaveBeenCalled();
-        },
-      );
-
-      it.each`
-        type                  | value             | callsCount
-        ${'simple string'}    | ${'foo'}          | ${1}
-        ${'combined string'}  | ${'foo, bar'}     | ${2}
-        ${'array of strings'} | ${['foo', 'bar']} | ${2}
-      `('accepts $type as an extension parameter', ({ value, callsCount }) => {
-        instance = instanceConstructor(value);
-        expect(editorExtensionSpy).toHaveBeenCalled();
-        expect(editorExtensionSpy.mock.calls).toHaveLength(callsCount);
-      });
-
-      it.each`
-        desc                                     | path                      | expectation
-        ${'~/editor'}                            | ${'foo'}                  | ${'~/editor/foo'}
-        ${'~/CUSTOM_PATH with leading slash'}    | ${'/my_custom_path/bar'}  | ${'~/my_custom_path/bar'}
-        ${'~/CUSTOM_PATH without leading slash'} | ${'my_custom_path/delta'} | ${'~/my_custom_path/delta'}
-      `('fetches extensions from $desc path', ({ path, expectation }) => {
-        instance = instanceConstructor(path);
-        expect(editorExtensionSpy).toHaveBeenCalledWith(expect.any(Array), expectation);
-      });
-
-      it('emits EDITOR_READY_EVENT event after all extensions were applied', async () => {
-        const calls = [];
-        const eventSpy = jest.fn().mockImplementation(() => {
-          calls.push('event');
-        });
-        const useSpy = jest.fn().mockImplementation(() => {
-          calls.push('use');
-        });
-        jest.spyOn(SourceEditor, 'convertMonacoToELInstance').mockImplementation((inst) => {
-          const decoratedInstance = inst;
-          decoratedInstance.use = useSpy;
-          return decoratedInstance;
         });
+        const eventSpy = jest.fn();
         editorEl.addEventListener(EDITOR_READY_EVENT, eventSpy);
-        instance = instanceConstructor('foo, bar');
-        await waitForPromises();
-        expect(useSpy.mock.calls).toHaveLength(2);
-        expect(calls).toEqual(['use', 'use', 'event']);
-      });
-    });
-
-    describe('multiple instances', () => {
-      let inst1;
-      let inst2;
-      let editorEl1;
-      let editorEl2;
-
-      beforeEach(() => {
-        setFixtures('<div id="editor1"></div><div id="editor2"></div>');
-        editorEl1 = document.getElementById('editor1');
-        editorEl2 = document.getElementById('editor2');
-        inst1 = editor.createInstance({ el: editorEl1, blobPath: `foo-${blobPath}` });
-        inst2 = editor.createInstance({ el: editorEl2, blobPath: `bar-${blobPath}` });
-      });
-
-      afterEach(() => {
-        editor.dispose();
-        editorEl1.remove();
-        editorEl2.remove();
-      });
-
-      it('extends all instances if no specific instance is passed', () => {
-        editor.use(AlphaExt);
-        expect(inst1.alpha()).toEqual(alphaRes);
-        expect(inst2.alpha()).toEqual(alphaRes);
+        expect(eventSpy).not.toHaveBeenCalled();
+        instance = editor.createInstance({ el: editorEl });
+        expect(eventSpy).toHaveBeenCalled();
       });
     });
   });