Commit 1505dc14 authored by Jacques Erasmus's avatar Jacques Erasmus Committed by Natalia Tepluhina

Add default editor options

Added default editor options to match our design mockups
parent 4095185d
export const EDITOR_OPTIONS = {
toolbarItems: [
'heading',
'bold',
'italic',
'strike',
'divider',
'quote',
'link',
'codeblock',
'divider',
'ul',
'ol',
'task',
'divider',
'hr',
'table',
'divider',
'code',
],
};
export const EDITOR_TYPES = {
wysiwyg: 'wysiwyg',
};
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
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 } from './constants';
export default { export default {
components: { components: {
ToastEditor: () => ToastEditor: () =>
...@@ -23,8 +25,16 @@ export default { ...@@ -23,8 +25,16 @@ export default {
return this.$refs.editor.invoke('getMarkdown'); return this.$refs.editor.invoke('getMarkdown');
}, },
}, },
editorOptions: EDITOR_OPTIONS,
initialEditType: EDITOR_TYPES.wysiwyg,
}; };
</script> </script>
<template> <template>
<toast-editor ref="editor" :initial-value="value" @change="onContentChanged" /> <toast-editor
ref="editor"
:initial-edit-type="$options.initialEditType"
:initial-value="value"
:options="$options.editorOptions"
@change="onContentChanged"
/>
</template> </template>
...@@ -4,6 +4,12 @@ export const Editor = { ...@@ -4,6 +4,12 @@ export const Editor = {
type: String, type: String,
required: true, required: true,
}, },
options: {
type: Object,
},
initialEditType: {
type: String,
},
}, },
render(h) { render(h) {
return h('div'); return h('div');
......
...@@ -4,6 +4,27 @@ import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_ ...@@ -4,6 +4,27 @@ import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_
describe('Rich Content Editor', () => { describe('Rich Content Editor', () => {
let wrapper; let wrapper;
const editorOptions = {
toolbarItems: [
'heading',
'bold',
'italic',
'strike',
'divider',
'quote',
'link',
'codeblock',
'divider',
'ul',
'ol',
'task',
'divider',
'hr',
'table',
'divider',
'code',
],
};
const value = '## Some Markdown'; const value = '## Some Markdown';
const findEditor = () => wrapper.find({ ref: 'editor' }); const findEditor = () => wrapper.find({ ref: 'editor' });
...@@ -21,6 +42,14 @@ describe('Rich Content Editor', () => { ...@@ -21,6 +42,14 @@ describe('Rich Content Editor', () => {
it('renders the correct content', () => { it('renders the correct content', () => {
expect(findEditor().props().initialValue).toBe(value); expect(findEditor().props().initialValue).toBe(value);
}); });
it('provides the correct editor options', () => {
expect(findEditor().props().options).toEqual(editorOptions);
});
it('has the correct initial edit type', () => {
expect(findEditor().props().initialEditType).toBe('wysiwyg');
});
}); });
describe('when content is changed', () => { describe('when content is changed', () => {
......
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