Update index.vue

src/components/MarkdownEditor/index.vue

@@ -4,115 +4,123 @@
 
 <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' // codemirror
+// import 'tui-editor/dist/tui-editor.css' // editor ui
+// import 'tui-editor/dist/tui-editor-contents.css' // editor content
 
-import Editor from 'tui-editor'
-import defaultOptions from './default-options'
+// import Editor from 'tui-editor'
+
+import "codemirror/lib/codemirror.css";
+import "@toast-ui/editor/dist/toastui-editor.css";
+import Editor from "@toast-ui/editor";
+import defaultOptions from "./default-options";
 
 export default {
-  name: 'MarkdownEditor',
+  name: "MarkdownEditor",
   props: {
     value: {
       type: String,
-      default: ''
+      default: ""
     },
     id: {
       type: String,
       required: false,
       default() {
-        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
+        return (
+          "markdown-editor-" +
+          +new Date() +
+          ((Math.random() * 1000).toFixed(0) + "")
+        );
       }
     },
     options: {
       type: Object,
       default() {
-        return defaultOptions
+        return defaultOptions;
       }
     },
     mode: {
       type: String,
-      default: 'markdown'
+      default: "markdown"
     },
     height: {
       type: String,
       required: false,
-      default: '300px'
+      default: "300px"
     },
     language: {
       type: String,
       required: false,
-      default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
+      default: "en_US" // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
     }
   },
   data() {
     return {
       editor: null
-    }
+    };
   },
   computed: {
     editorOptions() {
-      const options = Object.assign({}, defaultOptions, this.options)
-      options.initialEditType = this.mode
-      options.height = this.height
-      options.language = this.language
-      return options
+      const options = Object.assign({}, defaultOptions, this.options);
+      options.initialEditType = this.mode;
+      options.height = this.height;
+      options.language = this.language;
+      return options;
     }
   },
   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) {
-      this.destroyEditor()
-      this.initEditor()
+      this.destroyEditor();
+      this.initEditor();
     },
     height(newValue) {
-      this.editor.height(newValue)
+      this.editor.height(newValue);
     },
     mode(newValue) {
-      this.editor.changeMode(newValue)
+      this.editor.changeMode(newValue);
     }
   },
   mounted() {
-    this.initEditor()
+    this.initEditor();
   },
   destroyed() {
-    this.destroyEditor()
+    this.destroyEditor();
   },
   methods: {
     initEditor() {
       this.editor = new Editor({
         el: document.getElementById(this.id),
         ...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.editor.on("change", () => {
+        this.$emit("input", this.editor.getMarkdown());
+      });
     },
     destroyEditor() {
-      if (!this.editor) return
-      this.editor.off('change')
-      this.editor.remove()
+      if (!this.editor) return;
+      this.editor.off("change");
+      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)
+      this.editor.setHtml(value);
     },
     getHtml() {
-      return this.editor.getHtml()
+      return this.editor.getHtml();
     }
   }
-}
+};
 </script>