🎨 fix #33 fix #30

Vanessa219 · Jan 5, 2020 · 78cc8ed · 78cc8ed
1 parent 6f6cf5b
commit 78cc8ed
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -41,6 +41,7 @@
 
 ### v2.0.12 / 2020-01-05
 
+* [32](https://github.com/Vanessa219/vditor/issues/32) 反斜杠转义处理 `修复缺陷`
 * [33](https://github.com/Vanessa219/vditor/issues/33) 插入链接优化 `improvement`
 * [30](https://github.com/Vanessa219/vditor/issues/30) 添加 option.value `enhancement`
 * [29](https://github.com/Vanessa219/vditor/issues/29) 添加 debugger，为开发时显示日志 `enhancement`

diff --git a/src/assets/scss/_wysiwyg.scss b/src/assets/scss/_wysiwyg.scss
@@ -94,4 +94,10 @@
   details {
     white-space: initial;
   }
+
+  span[data-type="backslash"] > span {
+    display: none;
+    color: rgba($toolbarIcon, .36);
+  }
+
 }
diff --git a/src/ts/wysiwyg/highlightToolbar.ts b/src/ts/wysiwyg/highlightToolbar.ts
@@ -11,7 +11,13 @@ import {enableToolbar} from "../toolbar/enableToolbar";
 import {removeCurrentToolbar} from "../toolbar/removeCurrentToolbar";
 import {setCurrentToolbar} from "../toolbar/setCurrentToolbar";
 import {getText} from "../util/getText";
-import {hasClosestByClassName, hasClosestByMatchTag, hasClosestByTag, hasTopClosestByTag} from "../util/hasClosest";
+import {
+    hasClosestByAttribute,
+    hasClosestByClassName,
+    hasClosestByMatchTag,
+    hasClosestByTag,
+    hasTopClosestByTag,
+} from "../util/hasClosest";
 import {processCodeRender} from "./processCodeRender";
 
 export const highlightToolbar = (vditor: IVditor) => {
@@ -495,6 +501,16 @@ export const highlightToolbar = (vditor: IVditor) => {
         if (!vditor.wysiwyg.element.contains(vditor.wysiwyg.popover)) {
             vditor.wysiwyg.element.insertAdjacentElement("beforeend", vditor.wysiwyg.popover);
         }
+
+        // 反斜杠特殊处理
+        vditor.wysiwyg.element.querySelectorAll('span[data-type="backslash"] > span').forEach((item: HTMLElement) => {
+            item.style.display = "none";
+        });
+        const backslashElement = hasClosestByAttribute(range.startContainer, "data-type", "backslash");
+        if (backslashElement) {
+            backslashElement.querySelector("span").style.display = "inline";
+        }
+
     }, 500);
 };
 

diff --git a/src/ts/wysiwyg/index.ts b/src/ts/wysiwyg/index.ts
@@ -254,6 +254,7 @@ class WYSIWYG {
                 && event.key !== "ArrowLeft" && event.key !== "ArrowUp") {
                 return;
             }
+
             // 上下左右遇到块预览的处理
             const range = getSelection().getRangeAt(0);
             const previewElement = hasClosestByClassName(range.startContainer, "vditor-wysiwyg__preview");