🐛 fix #703

Vanessa219 · Aug 11, 2020 · 69fc5f1 · 69fc5f1
1 parent 85f686b
commit 69fc5f1
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -76,9 +76,11 @@
 
 * [open issues](https://github.com/Vanessa219/vditor/issues)
 * [346](https://github.com/Vanessa219/vditor/issues/346) 内容主题推荐（长期有效） `改进功能`
+* [706](https://github.com/Vanessa219/vditor/issues/706) 光标非正常移动 `修复缺陷`
 
 ### v3.4.6 / 2020-08-xx
 
+* [703](https://github.com/Vanessa219/vditor/issues/703) codeblock with backspace(IR) `修复缺陷`
 * [708](https://github.com/Vanessa219/vditor/issues/708) linkToImgUrl 方法添加 token `改进功能`
 * [701](https://github.com/Vanessa219/vditor/issues/701) 复制到微信、知乎的改进 `改进功能`
 

diff --git a/src/ts/ir/input.ts b/src/ts/ir/input.ts
@@ -75,20 +75,11 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false) => {
         blockElement = vditor.ir.element;
     }
 
+    // document.exeComment insertHTML 会插入 wbr
     if (!blockElement.querySelector("wbr")) {
-        const previewRenderElement = hasClosestByClassName(range.startContainer, "vditor-ir__preview");
-        if (previewRenderElement && previewRenderElement.previousElementSibling) {
-            // 光标如果落在预览区域中，则重置到代码区域
-            if (previewRenderElement.previousElementSibling.firstElementChild) {
-                range.selectNodeContents(previewRenderElement.previousElementSibling.firstElementChild);
-            } else {
-                range.selectNodeContents(previewRenderElement.previousElementSibling);
-            }
-            range.collapse(false);
-        }
-        // document.exeComment insertHTML 会插入 wbr
         range.insertNode(document.createElement("wbr"));
     }
+
     // 清除浏览器自带的样式
     blockElement.querySelectorAll("[style]").forEach((item) => {
         item.removeAttribute("style");

diff --git a/src/ts/ir/processKeydown.ts b/src/ts/ir/processKeydown.ts
@@ -19,6 +19,9 @@ import {
 } from "../util/hasClosest";
 import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
 import {getEditorRange, getSelectPosition, setSelectionFocus} from "../util/selection";
+import {Constants} from "../constants";
+import {processAfterRender} from "./process";
+import {expandMarker} from "./expandMarker";
 
 export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     vditor.ir.composingLock = event.isComposing;
@@ -159,10 +162,30 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
         return true;
     }
 
+    const blockElement = hasClosestBlock(startContainer);
     if (event.key === "Backspace" && !isCtrl(event) && !event.shiftKey && !event.altKey && range.toString() === "") {
         if (fixDelete(vditor, range, event, pElement)) {
             return true;
         }
+
+        if (blockElement && blockElement.previousElementSibling
+            && blockElement.previousElementSibling.getAttribute("data-type") === "code-block") {
+            const rangeStart = getSelectPosition(blockElement, vditor.ir.element, range).start;
+            if (rangeStart === 0 || (rangeStart === 1 && blockElement.innerText.startsWith(Constants.ZWSP))) {
+                // 当前块删除后光标落于代码渲染块上，当前块会被删除，因此需要阻止事件，不能和 keyup 中的代码块处理合并
+                range.selectNodeContents(blockElement.previousElementSibling.querySelector(".vditor-ir__marker--pre code"));
+                range.collapse(false);
+                expandMarker(range, vditor);
+                if (blockElement.textContent.trim().replace(Constants.ZWSP, "") === "") {
+                    // 当前块为空且不是最后一个时，需要删除
+                    blockElement.remove();
+                    processAfterRender(vditor);
+                }
+                event.preventDefault();
+                return true;
+            }
+        }
+
         // 光标位于标题前，marker 后
         const headingElement = hasClosestByHeadings(startContainer);
         if (headingElement) {
@@ -175,7 +198,6 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
         }
     }
 
-    const blockElement = hasClosestBlock(startContainer);
     if ((event.key === "ArrowUp" || event.key === "ArrowDown") && blockElement) {
         // https://github.com/Vanessa219/vditor/issues/358
         blockElement.querySelectorAll(".vditor-ir__node").forEach((item: HTMLElement) => {

diff --git a/src/ts/wysiwyg/processKeydown.ts b/src/ts/wysiwyg/processKeydown.ts
@@ -267,7 +267,7 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
                 if (rangeStart === 0 || (rangeStart === 1 && blockElement.innerText.startsWith(Constants.ZWSP))) {
                     // 当前块删除后光标落于代码渲染块上，当前块会被删除，因此需要阻止事件，不能和 keyup 中的代码块处理合并
                     showCode(blockElement.previousElementSibling.lastElementChild as HTMLElement, vditor, false);
-                    if (blockElement.innerHTML.trim() === "") {
+                    if (blockElement.innerHTML.trim().replace(Constants.ZWSP, "") === "") {
                         // 当前块为空且不是最后一个时，需要删除
                         blockElement.remove();
                         afterRenderEvent(vditor);