Add toastui editor to the frontend

Added the toastui WYSIWYG editor to the frontend

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

+<script>
+import 'codemirror/lib/codemirror.css';
+import '@toast-ui/editor/dist/toastui-editor.css';
+
+export default {
+  components: {
+    ToastEditor: () =>
+      import(/* webpackChunkName: 'toast_editor' */ '@toast-ui/vue-editor').then(
+        toast => toast.Editor,
+      ),
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    onContentChanged() {
+      this.$emit('input', this.getMarkdown());
+    },
+    getMarkdown() {
+      return this.$refs.editor.invoke('getMarkdown');
+    },
+  },
+};
+</script>
+<template>
+  <toast-editor ref="editor" :initial-value="value" @change="onContentChanged" />
+</template>

package.json

@@ -44,6 +44,8 @@
     "@gitlab/visual-review-tools": "1.6.1",
     "@sentry/browser": "^5.10.2",
     "@sourcegraph/code-host-integration": "0.0.37",
+    "@toast-ui/editor": "^2.0.1",
+    "@toast-ui/vue-editor": "^2.0.1",
     "apollo-cache-inmemory": "^1.6.3",
     "apollo-client": "^2.6.4",
     "apollo-link": "^1.2.11",
@@ -60,6 +62,7 @@
     "chart.js": "2.7.2",
     "classlist-polyfill": "^1.2.0",
     "clipboard": "^1.7.1",
+    "codemirror": "^5.48.4",
     "codesandbox-api": "0.0.23",
     "compression-webpack-plugin": "^3.0.1",
     "copy-webpack-plugin": "^5.0.5",

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

+export const Editor = {
+  props: {
+    initialValue: {
+      type: String,
+      required: true,
+    },
+  },
+  render(h) {
+    return h('div');
+  },
+};
+
+export const Viewer = {
+  render(h) {
+    return h('div');
+  },
+};

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

+import { shallowMount } from '@vue/test-utils';
+import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
+
+describe('Rich Content Editor', () => {
+  let wrapper;
+
+  const value = '## Some Markdown';
+  const findEditor = () => wrapper.find({ ref: 'editor' });
+
+  beforeEach(() => {
+    wrapper = shallowMount(RichContentEditor, {
+      propsData: { value },
+    });
+  });
+
+  describe('when content is loaded', () => {
+    it('renders an editor', () => {
+      expect(findEditor().exists()).toBe(true);
+    });
+
+    it('renders the correct content', () => {
+      expect(findEditor().props().initialValue).toBe(value);
+    });
+  });
+
+  describe('when content is changed', () => {
+    it('emits an input event with the changed content', () => {
+      const changedMarkdown = '## Changed Markdown';
+      const getMarkdownMock = jest.fn().mockReturnValueOnce(changedMarkdown);
+
+      findEditor().setMethods({ invoke: getMarkdownMock });
+      findEditor().vm.$emit('change');
+
+      expect(wrapper.emitted().input[0][0]).toBe(changedMarkdown);
+    });
+  });
+});

yarn.lock

@@ -1041,6 +1041,21 @@
   resolved "https://registry.yarnpkg.com/@sourcegraph/code-host-integration/-/code-host-integration-0.0.37.tgz#87f9a602e2a60520b6038311a67face2ece86827"
   integrity sha512-GQvNuPORLjsMhto57Ue1umeSV3cir+hMEaGxwCKmmq+cc9ZSZpuXa8RVBXuT5azN99K9/8zFps4woyPJ8wrjYA==
 
+"@toast-ui/editor@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@toast-ui/editor/-/editor-2.0.1.tgz#749e5be1f02f42ded51488d1575ab1c19ca59952"
+  integrity sha512-TC481O/zP37boY6H6oVN6KLVMY7yrU8zQu+3xqZ71V3Sr6D2XyaGb2Xub9XqTdqzBmzsf7y4Gi+EXO0IQ3rGVA==
+  dependencies:
+    "@types/codemirror" "0.0.71"
+    codemirror "^5.48.4"
+
+"@toast-ui/vue-editor@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@toast-ui/vue-editor/-/vue-editor-2.0.1.tgz#c9c8c8da4c0a67b9fbc4240464388c67d72a0c22"
+  integrity sha512-sGsApl0n+GVAZbmPA+tTrq9rmmyh2mRgCgg2/mu1/lN7S4vPv/nQH8KXxLG9Y6hG2+kgelqz6wvbOCdzlM/HmQ==
+  dependencies:
+    "@toast-ui/editor" "^2.0.1"
+
 "@types/anymatch@*":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.0.tgz#d1d55958d1fccc5527d4aba29fc9c4b942f563ff"
@@ -1079,6 +1094,18 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/codemirror@0.0.71":
+  version "0.0.71"
+  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-0.0.71.tgz#861f1bcb3100c0a064567c5400f2981cf4ae8ca7"
+  integrity sha512-b2oEEnno1LIGKMR7uBEsr40al1UijF1HEpRn0+Yf1xOLl24iQgB7DBpZVMM7y54G5wCNoclDrRO65E6KHPNO2w==
+  dependencies:
+    "@types/tern" "*"
+
+"@types/estree@*":
+  version "0.0.44"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.44.tgz#980cc5a29a3ef3bea6ff1f7d021047d7ea575e21"
+  integrity sha512-iaIVzr+w2ZJ5HkidlZ3EJM8VTZb2MJLCjw3V+505yVts0gRC4UMvjw0d1HPtGqI/HQC/KdsYtayfzl+AXY2R8g==
+
 "@types/events@*":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-1.2.0.tgz#81a6731ce4df43619e5c8c945383b3e62a89ea86"
@@ -1138,6 +1165,13 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
   integrity sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ==
 
+"@types/tern@*":
+  version "0.23.3"
+  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.3.tgz#4b54538f04a88c9ff79de1f6f94f575a7f339460"
+  integrity sha512-imDtS4TAoTcXk0g7u4kkWqedB3E4qpjXzCpD2LU5M5NAXHzCDsypyvXSaG7mM8DKYkCRa7tFp4tS/lp/Wo7Q3w==
+  dependencies:
+    "@types/estree" "*"
+
 "@types/uglify-js@*":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082"
@@ -2764,6 +2798,11 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+codemirror@^5.48.4:
+  version "5.53.2"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.53.2.tgz#9799121cf8c50809cca487304e9de3a74d33f428"
+  integrity sha512-wvSQKS4E+P8Fxn/AQ+tQtJnF1qH5UOlxtugFLpubEZ5jcdH2iXTVinb+Xc/4QjshuOxRm4fUsU2QPF1JJKiyXA==
+
 codesandbox-api@0.0.23:
   version "0.0.23"
   resolved "https://registry.yarnpkg.com/codesandbox-api/-/codesandbox-api-0.0.23.tgz#bf650a21b5f3c2369e03f0c19d10b4e2ba255b4f"