fix:优化点击快捷按钮后的光标位置

package.json

 {
   "name": "markdown-editor",
   "description": " A open source markdown editor of csdn codechina team contributed",
-  "version": "0.4.1",
+  "version": "0.5.2",
   "publisher": "guoweijia",
   "scripts": {
     "start": "webpack serve --mode=development",
     "build": "webpack --mode=production",
-    "p": "npm run build && ssh -t root@45.76.193.214 rm -rf /test/* exit && scp -r dist/* root@45.76.193.214:/test/"
+    "p": "rm -rf dist/*.js && npm run build && ssh -t root@45.76.193.214 rm -rf /test/* exit && scp -r dist/* root@45.76.193.214:/test/"
   },
   "devDependencies": {
     "chalk": "^4.1.1",
@@ -22,6 +22,7 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
+    "dompurify": "^0.8.2",
     "highlight.js": "^11.0.1",
     "marked": "^2.0.6",
     "vtip": "^1.0.6",

src/assets/js/utils.js

@@ -173,3 +173,8 @@ export function checkBoswer() {
   );
   return agent !== null;
 }
+
+export function removeBlankLine(val) {
+  if (!val) return "";
+  return val.replace(/^\n/, "");
+}

src/components/content/md-preview.vue

@@ -42,7 +42,7 @@ export default {
         const previewDomList = document.querySelectorAll(".md_preview code");
         if (!previewDomList.length) return;
         previewDomList.forEach(item => {
-          item.className = "md_hljs";
+          item.className += " md_hljs";
         });
       }, 0);
     }

src/components/content/md-textarea.vue

@@ -155,15 +155,33 @@ export default {
     },
     transferMarkdown(val) {
       marked.setOptions({
+        breaks: true,
+        gfm: true,
+        langPrefix: "language-",
         highlight: function(code, lang, callback) {
           const html = require("highlight.js").highlightAuto(code).value;
+
+          // const html = require("highlight.js").highlight(code, {
+          //   language: lang || "xml"
+          // }).value;
           return html;
         }
       });
       const str = val + "";
       // if (!str.trim()) return;
       const html = marked(str);
-      this.$emit("update:html", html);
+      const virtualDom = document.createElement("div");
+      virtualDom.innerHTML = html;
+      virtualDom.querySelectorAll("code").forEach(item => {
+        if (!/language-/.test(item.className)) {
+          item.className = "language-xml";
+        }
+      });
+      const DOMPurify = require("dompurify");
+      const cleanHtml = DOMPurify.sanitize(virtualDom.innerHTML, {
+        FORBID_TAGS: ["style", "script"]
+      });
+      this.$emit("update:html", cleanHtml);
     },
     input() {
       this.$emit("update:textLength", this.textContent.length);

src/components/header/md-header.vue

@@ -35,7 +35,12 @@
   </div>
 </template>
 <script>
-import { isNotFalse, formatText, getPosition } from "@/assets/js/utils";
+import {
+  isNotFalse,
+  formatText,
+  getPosition,
+  removeBlankLine
+} from "@/assets/js/utils";
 import toolButton from "./tool-button";
 export default {
   components: { toolButton },
@@ -152,8 +157,8 @@ export default {
           name: "code",
           icon: "code",
           tip: "插入代码块",
-          startStr: "\n```\n",
-          endStr: "\n```"
+          startStr: "\n```",
+          endStr: "\n\n\n```"
         },
         {
           name: "link",
@@ -237,9 +242,10 @@ export default {
     },
     updateText(val, len = 0) {
       const textEl = document.getElementById(this.id);
+      const scrollTop = textEl.scrollTop;
       textEl.blur();
       const cursorPoint = getPosition(this.id);
-      this.$emit("update:text", val);
+      this.$emit("update:text", removeBlankLine(val));
       this.$emit("update:selectionInfo", {
         selectorId: "",
         selectionStart: "",
@@ -247,6 +253,7 @@ export default {
       });
       setTimeout(() => {
         textEl.focus();
+        textEl.scrollTop = scrollTop;
         textEl.setSelectionRange(cursorPoint + len, cursorPoint + len);
       }, 0);
     }
@@ -315,9 +322,6 @@ export default {
     align-items: center;
     padding-bottom: 10px;
     box-sizing: border-box;
-    /deep/.tool_button {
-      margin: 0 8px;
-    }
   }
 }
 </style>

src/components/header/tool-button.vue

@@ -110,8 +110,7 @@ export default {
       const len =
         selectionInfo.selectionEnd -
         selectionInfo.selectionStart +
-        startStr.length +
-        endStr.length;
+        startStr.length;
       this.$emit("updateText", { val: newText, len });
     }
   }
@@ -119,10 +118,12 @@ export default {
 </script>
 <style lang="less" scoped>
 .tool_button {
+  padding: 4px 8px;
+  box-sizing: border-box;
+  cursor: pointer;
   .icon {
     font-size: 18px;
     color: var(--md-editor-text-color);
-    cursor: pointer;
     @media (any-hover: hover) {
       &:hover {
         color: var(--md-editor-text-color-active);