From 3057489cc66e17b97a77512c1e3621b96c37a4ba Mon Sep 17 00:00:00 2001
From: likwotsing <likwotsing@gmai.com>
Date: Tue, 30 Jun 2020 16:30:54 +0800
Subject: [PATCH] fix[markdown]: preview on the right is only 50px.

---
 package.json                            |  2 +-
 src/components/MarkdownEditor/index.vue | 19 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 02f68e23..e9017740 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@toast-ui/editor": "^2.2.0",
     "axios": "0.18.1",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
@@ -34,7 +35,6 @@
     "screenfull": "4.2.0",
     "script-loader": "0.7.2",
     "sortablejs": "1.8.4",
-    "tui-editor": "1.3.3",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-router": "3.0.2",
diff --git a/src/components/MarkdownEditor/index.vue b/src/components/MarkdownEditor/index.vue
index 1a8a01ee..c9ae4b73 100644
--- a/src/components/MarkdownEditor/index.vue
+++ b/src/components/MarkdownEditor/index.vue
@@ -4,11 +4,10 @@
 
 <script>
 // deps for editor
-import 'codemirror/lib/codemirror.css' // codemirror
-import 'tui-editor/dist/tui-editor.css' // editor ui
-import 'tui-editor/dist/tui-editor-contents.css' // editor content
+import 'codemirror/lib/codemirror.css' // Editor's Dependency Style
+import '@toast-ui/editor/dist/toastui-editor.css' // Editor's Style
 
-import Editor from 'tui-editor'
+import Editor from '@toast-ui/editor'
 import defaultOptions from './default-options'
 
 export default {
@@ -62,8 +61,8 @@ export default {
   },
   watch: {
     value(newValue, preValue) {
-      if (newValue !== preValue && newValue !== this.editor.getValue()) {
-        this.editor.setValue(newValue)
+      if (newValue !== preValue && newValue !== this.editor.getMarkdown()) {
+        this.editor.setMarkdown(newValue)
       }
     },
     language(val) {
@@ -90,10 +89,10 @@ export default {
         ...this.editorOptions
       })
       if (this.value) {
-        this.editor.setValue(this.value)
+        this.editor.setMarkdown(this.value)
       }
       this.editor.on('change', () => {
-        this.$emit('input', this.editor.getValue())
+        this.$emit('input', this.editor.getMarkdown())
       })
     },
     destroyEditor() {
@@ -102,10 +101,10 @@ export default {
       this.editor.remove()
     },
     setValue(value) {
-      this.editor.setValue(value)
+      this.editor.setMarkdown(value)
     },
     getValue() {
-      return this.editor.getValue()
+      return this.editor.getMarkdown()
     },
     setHtml(value) {
       this.editor.setHtml(value)