Merge branch '215118-configure-toastui' into 'master'

Configure ToastUI with the correct default options

See merge request gitlab-org/gitlab!30701

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

+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',
+};

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

@@ -2,6 +2,8 @@
 import 'codemirror/lib/codemirror.css';
 import '@toast-ui/editor/dist/toastui-editor.css';
 
+import { EDITOR_OPTIONS, EDITOR_TYPES } from './constants';
+
 export default {
   components: {
     ToastEditor: () =>
@@ -23,8 +25,16 @@ export default {
       return this.$refs.editor.invoke('getMarkdown');
     },
   },
+  editorOptions: EDITOR_OPTIONS,
+  initialEditType: EDITOR_TYPES.wysiwyg,
 };
 </script>
 <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>

spec/frontend/__mocks__/@toast-ui/vue-editor/index.js

@@ -4,6 +4,12 @@ export const Editor = {
       type: String,
       required: true,
     },
+    options: {
+      type: Object,
+    },
+    initialEditType: {
+      type: String,
+    },
   },
   render(h) {
     return h('div');

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

@@ -4,6 +4,27 @@ import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_
 describe('Rich Content Editor', () => {
   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 findEditor = () => wrapper.find({ ref: 'editor' });
 
@@ -21,6 +42,14 @@ describe('Rich Content Editor', () => {
     it('renders the correct content', () => {
       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', () => {