fix

src/App.vue

@@ -4,6 +4,7 @@
     :id="'md_' + id"
   >
     <markdown-header
+      :id="textareaId"
       :ref="'md_header' + id"
       :text.sync="text"
       :selectionInfo.sync="selectionInfo"
@@ -90,7 +91,7 @@ export default {
     // 初始化时赋值
     value: {
       type: [String, Number],
-      default: ""
+      default: " "
     },
     // 全屏时的z-index
     zIndex: {
@@ -102,6 +103,10 @@ export default {
       type: Number,
       default: 0
     },
+    preview: {
+      type: String,
+      default: ""
+    },
     // 是否可以预览
     canPreview: {
       type: Boolean,
@@ -182,6 +187,11 @@ export default {
         }
       }
     },
+    preview: {
+      handler: function(val) {
+        this.showPreview = val === "preview";
+      }
+    },
     text: {
       immediate: true,
       handler: function(val) {
@@ -240,6 +250,7 @@ export default {
               `${url})\n`
             );
             _this.text = newText;
+            _this.$refs.mdUploadFile.value = "";
           }
         });
         this.fileList = [];

src/assets/js/utils.js

@@ -133,24 +133,19 @@ export function initStyle({
   if (codeTheme) {
     switch (codeTheme) {
       case "dark":
-        import("highlight.js/styles/dark.css");
-        break;
-      case "github":
-        import("highlight.js/styles/github.css");
-        break;
-      case "idea":
-        import("highlight.js/styles/idea.css");
+        import("@/assets/style/code/dark.css");
         break;
       case "light":
-        import("highlight.js/styles/lightfair.css");
+        import("@/assets/style/code/lightfair.css");
         break;
-      case "monokai":
-        import("highlight.js/styles/monokai.css");
+      case "atom-one-dark":
+        import("@/assets/style/code/atom-one-dark.css");
         break;
-
       default:
         break;
     }
+  } else {
+    import("@/assets/style/code/lightfair.css");
   }
 }
 

src/assets/style/code/atom-one-dark.less

+/*
+
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+base:    #282c34
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+
+*/
+.md_preview {
+  .md_hljs {
+    color: #abb2bf;
+    background: #282c34;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #5c6370;
+    font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #c678dd;
+  }
+
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+    color: #e06c75;
+  }
+
+  .hljs-literal {
+    color: #56b6c2;
+  }
+
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string {
+    color: #98c379;
+  }
+
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #d19a66;
+  }
+
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+    color: #61aeee;
+  }
+
+  .hljs-built_in,
+  .hljs-title.class_,
+  .hljs-class .hljs-title {
+    color: #e6c07b;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}

src/assets/style/code/dark.less

+/*
+
+Dark style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+
+*/
+.md_preview {
+  .md_hljs {
+    color: #ddd;
+    background: #444;
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-literal,
+  .hljs-section,
+  .hljs-link {
+    color: white;
+  }
+
+  .hljs-subst {
+    /* default */
+  }
+
+  .hljs-string,
+  .hljs-title,
+  .hljs-name,
+  .hljs-type,
+  .hljs-attribute,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-built_in,
+  .hljs-addition,
+  .hljs-variable,
+  .hljs-template-tag,
+  .hljs-template-variable {
+    color: #d88;
+  }
+
+  .hljs-comment,
+  .hljs-quote,
+  .hljs-deletion,
+  .hljs-meta {
+    color: #777;
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-literal,
+  .hljs-title,
+  .hljs-section,
+  .hljs-doctag,
+  .hljs-type,
+  .hljs-name,
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+}

src/assets/style/code/lightfair.less

+/*
+
+Lightfair style (c) Tristian Kelly <tristian.kelly560@gmail.com>
+
+*/
+.md_preview {
+  .md_hljs {
+    color: #444;
+    background: var(--md-editor-code-bg-color);
+  }
+
+  .hljs-name {
+    color: #01a3a3;
+  }
+
+  .hljs-tag,
+  .hljs-meta {
+    color: #778899;
+  }
+
+  .hljs-subst {
+    /* default */
+  }
+
+  .hljs-comment {
+    color: #888888;
+  }
+
+  .hljs-keyword,
+  .hljs-attribute,
+  .hljs-selector-tag,
+  .hljs-meta .hljs-keyword,
+  .hljs-doctag,
+  .hljs-name {
+    font-weight: bold;
+  }
+
+  .hljs-type,
+  .hljs-string,
+  .hljs-number,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-quote,
+  .hljs-template-tag,
+  .hljs-deletion {
+    color: #4286f4;
+  }
+
+  .hljs-title,
+  .hljs-section {
+    color: #4286f4;
+    font-weight: bold;
+  }
+
+  .hljs-regexp,
+  .hljs-symbol,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-link,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo {
+    color: #bc6060;
+  }
+
+  .hljs-literal {
+    color: #62bcbc;
+  }
+
+  .hljs-built_in,
+  .hljs-bullet,
+  .hljs-code,
+  .hljs-addition {
+    color: #25c6c6;
+  }
+
+  .hljs-meta .hljs-string {
+    color: #4d99bf;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+}

src/assets/style/global.less

@@ -27,7 +27,7 @@ textarea {
   padding: 0;
 }
 
-img {
-  display: block;
-  margin: 0;
-}
+// img {
+//   display: block;
+//   margin: 0;
+// }

src/assets/style/markdown.less

@@ -240,19 +240,19 @@
       padding: 8px;
       tab-size: 4;
       code {
-        &.hljs {
+        &.md_hljs {
           padding: 0;
         }
       }
-      &:not(.hljs) {
-        background-color: var(--md-editor-code-bg-color);
+      &:not(.md_hljs) {
+        // background-color: var(--md-editor-code-bg-color);
       }
     }
   }
   code {
     border-radius: 4px;
     display: inline-block;
-    background-color: var(--md-editor-code-bg-color);
+    // background-color: var(--md-editor-code-bg-color);
     padding: 2px 6px;
     font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB,
       Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
@@ -480,7 +480,7 @@ p[align="center"] {
   font-family: Consolas, Inconsolata, Courier, monospace;
   font-size: 14px;
   line-height: 22px;
-  color: #000;
+  // color: #000;
 }
 
 .md_preview code ol li div.hljs-ln-code,

src/components/content/md-preview.vue

@@ -5,7 +5,6 @@
 </template>
 <script>
 import marked from "marked";
-import "highlight.js/styles/github.css";
 export default {
   data() {
     return {
@@ -30,10 +29,23 @@ export default {
       default: false
     }
   },
-  // mounted() {
-  //   this.resetMinHeight();
-  // },
+  mounted() {
+    setTimeout(() => {
+      this.resetMinHeight();
+    }, 0) 
+    this.addClass();
+  },
+  updated() {
+    this.addClass();
+  },
   methods: {
+    addClass() {
+      setTimeout(() => {
+        const previewDom = document.querySelector(".md_preview code");
+        if (!previewDom) return;
+        previewDom.className = "md_hljs";
+      }, 0);
+    },
     transferMarkdown(val) {
       marked.setOptions({
         highlight: function(code, lang, callback) {

src/components/content/md-textarea.vue

@@ -83,6 +83,8 @@ export default {
     text: {
       immediate: true,
       handler: function(val) {
+        const cursorPoint = getPosition(this.id);
+        console.log(cursorPoint);
         this.textContent = val;
       }
     },

src/components/header/md-header.vue

@@ -34,11 +34,15 @@
   </div>
 </template>
 <script>
-import { isNotFalse, formatText } from "@/assets/js/utils";
+import { isNotFalse, formatText, getPosition } from "@/assets/js/utils";
 import toolButton from "./tool-button";
 export default {
   components: { toolButton },
   props: {
+    id: {
+      type: String,
+      default: ""
+    },
     fullScreen: {
       type: Boolean,
       default: false
@@ -98,6 +102,9 @@ export default {
           this.toolButtonList.push(this.fullScreenBtn);
         }
       }
+    },
+    text: {
+      handler: function(newVal, oldVal) {}
     }
   },
   data() {
@@ -200,20 +207,32 @@ export default {
       const originalText = this.text;
       const selectionInfo = this.selectionInfo;
       const newText = formatText(originalText, selectionInfo, startStr, endStr);
-      this.updateText(newText);
-
-      // this.$refs.tool_button.tab();
+      const len = newText.length - originalText.length;
+      // const len = 0;
+      this.updateText(newText, len);
     },
     setShowPreview(val) {
       this.$emit("update:showPreview", val);
     },
-    updateText(val) {
+    updateText(val, len = 0) {
+      console.log(val);
       this.$emit("update:text", val);
+      const cursorPoint = getPosition(this.id);
+      console.log(cursorPoint);
+
       this.$emit("update:selectionInfo", {
         selectorId: "",
-        selectionStart: "",
-        selectionEnd: ""
+        selectionStart: cursorPoint,
+        selectionEnd: cursorPoint
       });
+      console.log(cursorPoint);
+
+      setTimeout(() => {
+        // document.getElementById(this.id).setSelectionRange(0, 0);
+        document
+          .getElementById(this.id)
+          .setSelectionRange(cursorPoint + len, cursorPoint + len);
+      }, 0);
     }
   }
 };

src/main.js

@@ -53,6 +53,7 @@ function initMdEditor(obj) {
     placeholder,
     maxLength,
     zIndex,
+    preview: "",
     focus: false,
     showWordLimit
   };
@@ -60,6 +61,7 @@ function initMdEditor(obj) {
     change(val) {
       onChange(val);
       _this.value = val;
+      props.value = val.text;
     },
     input(val) {
       onInput(val);
@@ -78,11 +80,13 @@ function initMdEditor(obj) {
       onBlur(val);
       _this.value = val;
       props.focus = false;
+      props.value = val.text;
       _this.vEl.$forceUpdate();
     },
     submit(val) {
       onSubmit(val);
       _this.value = val;
+      props.value = val.text;
     },
     upload({ val, callback }) {
       onUpload(val, function(res) {
@@ -119,6 +123,15 @@ function initMdEditor(obj) {
     props.focus = false;
     this.vEl.$forceUpdate();
   };
+
+  this.toggleTab = function(tabName) {
+    if (!tabName) {
+      props.preview = props.preview === "edit" ? "preview" : "edit";
+    } else {
+      props.preview = tabName;
+    }
+    this.vEl.$forceUpdate();
+  };
 }
 
 window.MdEditor = initMdEditor;