From 686ed18dacd39dade54d6ad9175919ca929648d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com>
Date: Thu, 1 Jul 2021 18:54:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BC=98=E5=8C=96=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E6=8C=89=E9=92=AE=E5=90=8E=E7=9A=84=E5=85=89?=
 =?UTF-8?q?=E6=A0=87=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                           |  5 +++--
 src/assets/js/utils.js                 |  5 +++++
 src/components/content/md-preview.vue  |  2 +-
 src/components/content/md-textarea.vue | 20 +++++++++++++++++++-
 src/components/header/md-header.vue    | 18 +++++++++++-------
 src/components/header/tool-button.vue  |  7 ++++---
 6 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index b7ff65b..762aa91 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
   "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",
diff --git a/src/assets/js/utils.js b/src/assets/js/utils.js
index 255b7de..a42aeb3 100644
--- a/src/assets/js/utils.js
+++ b/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/, "");
+}
diff --git a/src/components/content/md-preview.vue b/src/components/content/md-preview.vue
index 8aecc57..8f71927 100644
--- a/src/components/content/md-preview.vue
+++ b/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);
     }
diff --git a/src/components/content/md-textarea.vue b/src/components/content/md-textarea.vue
index 61be8ec..6f4ff86 100644
--- a/src/components/content/md-textarea.vue
+++ b/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);
diff --git a/src/components/header/md-header.vue b/src/components/header/md-header.vue
index 57ebb1e..7865085 100644
--- a/src/components/header/md-header.vue
+++ b/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>
diff --git a/src/components/header/tool-button.vue b/src/components/header/tool-button.vue
index cb65937..53b0537 100644
--- a/src/components/header/tool-button.vue
+++ b/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);
-- 
GitLab