Commit f01672e5 authored by Enrique Alcántara's avatar Enrique Alcántara

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
parents 860f2b0a bb412bac
import { __ } from '~/locale'; 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 */ /* eslint-disable @gitlab/require-i18n-strings */
const TOOLBAR_ITEM_CONFIGS = [ const TOOLBAR_ITEM_CONFIGS = [
......
...@@ -12,7 +12,6 @@ const buildWrapper = propsData => { ...@@ -12,7 +12,6 @@ const buildWrapper = propsData => {
return instance.$el; return instance.$el;
}; };
// eslint-disable-next-line import/prefer-default-export
export const generateToolbarItem = config => { export const generateToolbarItem = config => {
const { icon, classes, event, command, tooltip, isDivider } = config; const { icon, classes, event, command, tooltip, isDivider } = config;
...@@ -30,3 +29,8 @@ export const generateToolbarItem = config => { ...@@ -30,3 +29,8 @@ export const generateToolbarItem = config => {
}, },
}; };
}; };
export const addCustomEventListener = (editorInstance, event, handler) => {
editorInstance.eventManager.addEventType(event);
editorInstance.eventManager.listen(event, handler);
};
...@@ -2,7 +2,15 @@ ...@@ -2,7 +2,15 @@
import 'codemirror/lib/codemirror.css'; import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.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 { export default {
components: { components: {
...@@ -49,6 +57,16 @@ export default { ...@@ -49,6 +57,16 @@ export default {
getMarkdown() { getMarkdown() {
return this.$refs.editor.invoke('getMarkdown'); return this.$refs.editor.invoke('getMarkdown');
}, },
onLoad(editorInstance) {
addCustomEventListener(
editorInstance,
CUSTOM_EVENTS.openAddImageModal,
this.onOpenAddImageModal,
);
},
onOpenAddImageModal() {
// TODO - add image modal (next MR)
},
}, },
}; };
</script> </script>
...@@ -61,5 +79,6 @@ export default { ...@@ -61,5 +79,6 @@ export default {
:initial-edit-type="initialEditType" :initial-edit-type="initialEditType"
:height="height" :height="height"
@change="onContentChanged" @change="onContentChanged"
@load="onLoad"
/> />
</template> </template>
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);
});
});
});
...@@ -5,8 +5,16 @@ import { ...@@ -5,8 +5,16 @@ import {
EDITOR_TYPES, EDITOR_TYPES,
EDITOR_HEIGHT, EDITOR_HEIGHT,
EDITOR_PREVIEW_STYLE, EDITOR_PREVIEW_STYLE,
CUSTOM_EVENTS,
} from '~/vue_shared/components/rich_content_editor/constants'; } 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', () => { describe('Rich Content Editor', () => {
let wrapper; let wrapper;
...@@ -56,4 +64,17 @@ describe('Rich Content Editor', () => { ...@@ -56,4 +64,17 @@ describe('Rich Content Editor', () => {
expect(wrapper.emitted().input[0][0]).toBe(changedMarkdown); 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,
);
});
});
}); });
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');
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment