Merge branch '216640-insert-image-via-sse' into 'master'

Add ability to handle custom events on the ToastUI editor

See merge request gitlab-org/gitlab!32945

app/assets/javascripts/vue_shared/components/rich_content_editor/constants.js

 import { __ } from '~/locale';
-import { generateToolbarItem } from './toolbar_service';
+import { generateToolbarItem } from './editor_service';
+
+export const CUSTOM_EVENTS = {
+  openAddImageModal: 'gl_openAddImageModal',
+};
 
 /* eslint-disable @gitlab/require-i18n-strings */
 const TOOLBAR_ITEM_CONFIGS = [

app/assets/javascripts/vue_shared/components/rich_content_editor/toolbar_service.js → app/assets/javascripts/vue_shared/components/rich_content_editor/editor_service.js

@@ -12,7 +12,6 @@ const buildWrapper = propsData => {
   return instance.$el;
 };
 
-// eslint-disable-next-line import/prefer-default-export
 export const generateToolbarItem = config => {
   const { icon, classes, event, command, tooltip, isDivider } = config;
 
@@ -30,3 +29,8 @@ export const generateToolbarItem = config => {
     },
   };
 };
+
+export const addCustomEventListener = (editorInstance, event, handler) => {
+  editorInstance.eventManager.addEventType(event);
+  editorInstance.eventManager.listen(event, handler);
+};

app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue

@@ -2,7 +2,15 @@
 import 'codemirror/lib/codemirror.css';
 import '@toast-ui/editor/dist/toastui-editor.css';
 
-import { EDITOR_OPTIONS, EDITOR_TYPES, EDITOR_HEIGHT, EDITOR_PREVIEW_STYLE } from './constants';
+import {
+  EDITOR_OPTIONS,
+  EDITOR_TYPES,
+  EDITOR_HEIGHT,
+  EDITOR_PREVIEW_STYLE,
+  CUSTOM_EVENTS,
+} from './constants';
+
+import { addCustomEventListener } from './editor_service';
 
 export default {
   components: {
@@ -49,6 +57,16 @@ export default {
     getMarkdown() {
       return this.$refs.editor.invoke('getMarkdown');
     },
+    onLoad(editorInstance) {
+      addCustomEventListener(
+        editorInstance,
+        CUSTOM_EVENTS.openAddImageModal,
+        this.onOpenAddImageModal,
+      );
+    },
+    onOpenAddImageModal() {
+      // TODO - add image modal (next MR)
+    },
   },
 };
 </script>
@@ -61,5 +79,6 @@ export default {
     :initial-edit-type="initialEditType"
     :height="height"
     @change="onContentChanged"
+    @load="onLoad"
   />
 </template>

spec/frontend/vue_shared/components/rich_content_editor/editor_service_spec.js

+import {
+  generateToolbarItem,
+  addCustomEventListener,
+} from '~/vue_shared/components/rich_content_editor/editor_service';
+
+describe('Editor Service', () => {
+  describe('generateToolbarItem', () => {
+    const config = {
+      icon: 'bold',
+      command: 'some-command',
+      tooltip: 'Some Tooltip',
+      event: 'some-event',
+    };
+    const generatedItem = generateToolbarItem(config);
+
+    it('generates the correct command', () => {
+      expect(generatedItem.options.command).toBe(config.command);
+    });
+
+    it('generates the correct tooltip', () => {
+      expect(generatedItem.options.tooltip).toBe(config.tooltip);
+    });
+
+    it('generates the correct event', () => {
+      expect(generatedItem.options.event).toBe(config.event);
+    });
+
+    it('generates a divider when isDivider is set to true', () => {
+      const isDivider = true;
+
+      expect(generateToolbarItem({ isDivider })).toBe('divider');
+    });
+  });
+
+  describe('addCustomEventListener', () => {
+    const mockInstance = { eventManager: { addEventType: jest.fn(), listen: jest.fn() } };
+    const event = 'someCustomEvent';
+    const handler = jest.fn();
+
+    it('registers an event type on the instance and adds an event handler', () => {
+      addCustomEventListener(mockInstance, event, handler);
+
+      expect(mockInstance.eventManager.addEventType).toHaveBeenCalledWith(event);
+      expect(mockInstance.eventManager.listen).toHaveBeenCalledWith(event, handler);
+    });
+  });
+});

spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js

@@ -5,8 +5,16 @@ import {
   EDITOR_TYPES,
   EDITOR_HEIGHT,
   EDITOR_PREVIEW_STYLE,
+  CUSTOM_EVENTS,
 } from '~/vue_shared/components/rich_content_editor/constants';
 
+import { addCustomEventListener } from '~/vue_shared/components/rich_content_editor/editor_service';
+
+jest.mock('~/vue_shared/components/rich_content_editor/editor_service', () => ({
+  ...jest.requireActual('~/vue_shared/components/rich_content_editor/editor_service'),
+  addCustomEventListener: jest.fn(),
+}));
+
 describe('Rich Content Editor', () => {
   let wrapper;
 
@@ -56,4 +64,17 @@ describe('Rich Content Editor', () => {
       expect(wrapper.emitted().input[0][0]).toBe(changedMarkdown);
     });
   });
+
+  describe('when editor is loaded', () => {
+    it('adds the CUSTOM_EVENTS.openAddImageModal custom event listener', () => {
+      const mockInstance = { eventManager: { addEventType: jest.fn(), listen: jest.fn() } };
+      findEditor().vm.$emit('load', mockInstance);
+
+      expect(addCustomEventListener).toHaveBeenCalledWith(
+        mockInstance,
+        CUSTOM_EVENTS.openAddImageModal,
+        wrapper.vm.onOpenAddImageModal,
+      );
+    });
+  });
 });

spec/frontend/vue_shared/components/rich_content_editor/toolbar_service_spec.js

-import { generateToolbarItem } from '~/vue_shared/components/rich_content_editor/toolbar_service';
-
-describe('Toolbar Service', () => {
-  const config = {
-    icon: 'bold',
-    command: 'some-command',
-    tooltip: 'Some Tooltip',
-    event: 'some-event',
-  };
-  const generatedItem = generateToolbarItem(config);
-
-  it('generates the correct command', () => {
-    expect(generatedItem.options.command).toBe(config.command);
-  });
-
-  it('generates the correct tooltip', () => {
-    expect(generatedItem.options.tooltip).toBe(config.tooltip);
-  });
-
-  it('generates the correct event', () => {
-    expect(generatedItem.options.event).toBe(config.event);
-  });
-
-  it('generates a divider when isDivider is set to true', () => {
-    const isDivider = true;
-
-    expect(generateToolbarItem({ isDivider })).toBe('divider');
-  });
-});