🎨 Vanessa219#27

stevapple · Apr 8, 2020 · 9c2db2f · 9c2db2f
1 parent 9b49f7c
commit 9c2db2f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git a/src/ts/ir/index.ts b/src/ts/ir/index.ts
@@ -2,9 +2,9 @@ import {uploadFiles} from "../upload";
 import {setHeaders} from "../upload/setHeaders";
 import {isCtrl} from "../util/compatibility";
 import {focusEvent, hotkeyEvent, selectEvent} from "../util/editorCommenEvent";
-import {hasClosestByMatchTag} from "../util/hasClosest";
+import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {processPasteCode} from "../util/processPasteCode";
-import {getSelectPosition, insertHTML, setSelectionByPosition} from "../util/selection";
+import {getSelectPosition, insertHTML, setSelectionByPosition, setSelectionFocus} from "../util/selection";
 import {expandMarker} from "./expandMarker";
 import {input} from "./input";
 import {processAfterRender, processCodeRender} from "./process";
@@ -185,6 +185,19 @@ class IR {
             }
 
             expandMarker(getSelection().getRangeAt(0), vditor);
+
+            // 点击后光标落于预览区
+            const range = getSelection().getRangeAt(0);
+            let previewElement = hasClosestByClassName(event.target, "vditor-ir__preview");
+            if (!previewElement) {
+                previewElement = hasClosestByClassName(
+                    range.startContainer, "vditor-ir__preview");
+            }
+            if (previewElement) {
+                range.selectNodeContents(previewElement.previousElementSibling.firstElementChild);
+                range.collapse(true);
+                setSelectionFocus(range);
+            }
         });
 
         this.element.addEventListener("keyup", (event) => {
@@ -199,9 +212,23 @@ class IR {
                 vditor.ir.element.innerHTML = "";
                 return;
             }
+
             if (event.key.indexOf("Arrow") > -1) {
                 expandMarker(getSelection().getRangeAt(0), vditor);
             }
+
+            const range = getSelection().getRangeAt(0);
+            const previewRenderElement = hasClosestByClassName(range.startContainer, "vditor-ir__preview");
+            if (previewRenderElement && event.key.indexOf("Arrow") > -1) {
+                if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+                    range.selectNodeContents(previewRenderElement.parentElement.querySelector('[data-type="code-block-close-marker-zwsp"]'));
+                } else {
+                    range.selectNodeContents(previewRenderElement.previousElementSibling.firstElementChild);
+                }
+                range.collapse(false);
+                event.preventDefault();
+                return true;
+            }
         });
     }
 }

diff --git a/src/ts/ir/processKeydown.ts b/src/ts/ir/processKeydown.ts
@@ -1,7 +1,7 @@
 import {Constants} from "../constants";
 import {isCtrl} from "../util/compatibility";
 import {scrollCenter} from "../util/editorCommenEvent";
-import {hasClosestByAttribute, hasClosestByMatchTag, hasClosestByTag} from "../util/hasClosest";
+import {hasClosestByAttribute, hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {getSelectPosition, setRangeByWbr} from "../util/selection";
 import {processAfterRender} from "./process";
 
@@ -43,8 +43,7 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     }
 
     const pElement = hasClosestByMatchTag(startContainer, "P");
-
-    const preRenderElement = hasClosestByTag(startContainer, "PRE");
+    const preRenderElement = hasClosestByClassName(startContainer, "vditor-ir__marker--pre");
     if (preRenderElement) {
         const codeRenderElement = preRenderElement.firstChild as HTMLElement;