diff --git a/src/ts/ir/index.ts b/src/ts/ir/index.ts index 0b9431bb6..e1fdc719a 100644 --- 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 index 3a9388f4f..20a93e60b 100644 --- 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;