feat:@用户匹配大小写

package.json

 {
   "name": "markdown-editor",
   "description": " A open source markdown editor of csdn codechina team contributed",
-  "version": "0.6.3",
+  "version": "0.7.2",
   "publisher": "guoweijia",
   "scripts": {
     "start": "webpack serve --mode=development",

src/App.vue

@@ -406,7 +406,6 @@ export default {
           }
         });
       }).then(res => {
-        console.log("返回的列表", res);
         res.forEach(item => {
           item.csdn = true;
           const linkEl = vDom.querySelector("#" + item.id);

src/assets/js/utils.js

@@ -77,7 +77,8 @@ export function initStyle({
   codeBgColor,
   codeTheme,
   helpdocColor,
-  itemActiveBgColor
+  itemActiveBgColor,
+  linkCardBgColor
 }) {
   // 夜晚模式
   if (dark) {
@@ -91,6 +92,13 @@ export function initStyle({
     contentBgColor = "#222226";
     helpdocColor = "#CCCCD8";
     itemActiveBgColor = "#777888";
+    linkCardBgColor = "#222226";
+  }
+  if (linkCardBgColor) {
+    document.documentElement.style.setProperty(
+      "--md-editor-link-card-bg-color",
+      linkCardBgColor
+    );
   }
   if (frameBgColor) {
     document.documentElement.style.setProperty(
@@ -193,9 +201,7 @@ export function checkBoswer() {
 }
 
 export function isAndroid() {
-  const agent = navigator.userAgent.match(
-    /(Android)/i
-  );
+  const agent = navigator.userAgent.match(/(Android)/i);
   return agent !== null;
 }
 // 去除头部空格行
@@ -374,11 +380,15 @@ export function getLinkTitle(linkEl) {
 export function renderLinkCard(title, item) {
   return `
   <span class="md_link_title">${title || item.title || ""}</span>
-  ${item.desc ? `<span class="md_link_desc">${item.desc}</span>` : ""}
+  ${
+    item.description
+      ? `<span class="md_link_desc">${item.description}</span>`
+      : ""
+  }
   <span class="md_flex_card">
   ${
-    item.img
-      ? `<img class="md_link_img" src="${item.img}" />`
+    item.icon
+      ? `<img class="md_link_img" src="${item.icon}" />`
       : "<span class='md_link_img icon iconfont icon-lianjie'></span>"
   }
     <span class="flex-1">

src/assets/style/card.less

@@ -5,7 +5,7 @@
   box-sizing: border-box;
   border-radius: 4px;
   border: 1px solid var(--md-editor-border-color);
-  background: #f5f7fa;
+  background: var(--md-editor-link-card-bg-color);
   transition: border 0.3s;
   margin: 4px 0;
   max-width: 640px;

src/assets/style/variable.less

@@ -10,6 +10,7 @@
   --md-editor-item-active-bg-color: #f5f7fa;
   --md-editor-helpdoc-color: #666666;
   --md-editor-code-bg-color: #f3f4f5;
+  --md-editor-link-card-bg-color: #f5f7fa;
   --md-editor-fullScrren-zIndex: 2000;
   --md-editor-disabled-opacity: 0.5;
 }

src/components/content/components/user-select.vue

@@ -25,7 +25,6 @@
   </div>
 </template>
 <script>
-import { throttle as throttleFn } from "@/assets/js/utils";
 export default {
   props: {
     position: {
@@ -49,8 +48,6 @@ export default {
   computed: {
     list() {
       const list = this.userList;
-      console.log("list", list);
-
       if (!list.length) return [];
       return list.map((item, index) => {
         if (index === 0) {
@@ -60,9 +57,6 @@ export default {
         }
         return item;
       });
-    },
-    throttle() {
-      return throttleFn();
     }
   },
   watch: {
@@ -77,16 +71,17 @@ export default {
   data() {
     return {
       left: 0,
-      top: 0
+      top: 0,
+      selectDisable: false
     };
   },
   methods: {
     selectUser(user) {
-      console.log(this.throttle);
-
-      this.throttle(() => {
-        console.log(111);
-        this.$emit("selectUser", user);
+      if (this.selectDisable) return;
+      this.selectDisable = true;
+      this.$emit("selectUser", user);
+      setTimeout(() => {
+        this.selectDisable = false;
       }, 1000);
     },
     isActive(index) {

src/components/content/md-textarea.vue

@@ -8,7 +8,7 @@
       @keydown.stop.50="handleCallUser"
       @keydown.stop.229="handleCallUser"
       @focus="setFocus(true)"
-      @blur="setFocus(false)"
+      @blur="blur"
       @paste="pasteFile"
       @keydown.stop.up="changeActiveUserIndex($event, 'up')"
       @keydown.stop.down="changeActiveUserIndex($event, 'down')"
@@ -297,6 +297,10 @@ export default {
       this.$emit("update:textLength", this.textContent.length);
       this.emitText();
     },
+    blur() {
+      this.renderUserTags()
+      this.setFocus(false);
+    },
     createHideEl(type) {
       const textEl = document.getElementById(this.id);
       if (!textEl) return;

src/components/content/mixins/select-user-mixins.js

@@ -5,8 +5,9 @@ export default {
       allUserList: []
     };
   },
-  mounted() {
-    setTimeout(() => {
+  methods: {
+    renderUserTags() {
+      if (this.showSelectUser) return;
       const text = this.text;
       if (/(\@\S+\s{0,1})/g.test(text)) {
         this.$emit("queryUserList", "");
@@ -18,9 +19,7 @@ export default {
           });
         });
       }
-    }, 0);
-  },
-  methods: {
+    },
     handleSelectUser(user) {
       const originalText = this.textContent;
       const queryInfo = this.queryInfo;

src/components/header/md-header.vue

@@ -204,7 +204,7 @@ export default {
           icon: "lianjie",
           tip: "添加链接",
           doc: "[标题](链接)",
-          startStr: "[链接标题](",
+          startStr: "[](",
           endStr: ")"
         },
         {

src/main.js

@@ -178,7 +178,7 @@ function initMdEditor(obj) {
         if (!keyWord) return callback(list);
         callback(
           list.filter(item => {
-            return item.nickname.includes(keyWord);
+            return item.nickname.toLowerCase().includes(keyWord.toLowerCase());
           })
         );
       });