From ffdcb4d57e7017e45714e56a8032682312ed501c Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 28 Dec 2024 19:05:24 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/13528

---
 app/src/protyle/util/selection.ts  | 16 ++++++++++++++--
 app/src/protyle/wysiwyg/index.ts   | 12 ++++--------
 app/src/protyle/wysiwyg/keydown.ts | 12 ++----------
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/src/protyle/util/selection.ts b/app/src/protyle/util/selection.ts
index a6487b91f..9875789ae 100644
--- a/app/src/protyle/util/selection.ts
+++ b/app/src/protyle/util/selection.ts
@@ -380,7 +380,7 @@ export const setFirstNodeRange = (editElement: Element, range: Range) => {
     return range;
 };
 
-export const focusByOffset = (container: Element, start: number, end: number) => {
+export const focusByOffset = (container: Element, start: number, end: number, isFocus = true) => {
     if (!container) {
         return false;
     }
@@ -448,10 +448,22 @@ export const focusByOffset = (container: Element, start: number, end: number) =>
             setLastNodeRange(getContenteditableElement(container as Element), range, false);
         }
     }
-    focusByRange(range);
+    if (isFocus) {
+        focusByRange(range);
+    }
     return range;
 };
 
+export const setInsertWbrHTML = (nodeElement: HTMLElement, range: Range, protyle: IProtyle) => {
+    const offset = getSelectionOffset(nodeElement, nodeElement, range)
+    const cloneNode = nodeElement.cloneNode(true) as HTMLElement;
+    const cloneRange = focusByOffset(cloneNode, offset.end, offset.end, false);
+    if (cloneRange) {
+        cloneRange.insertNode(document.createElement("wbr"));
+    }
+    protyle.wysiwyg.lastHTMLs[nodeElement.getAttribute("data-node-id")] = cloneNode.outerHTML;
+}
+
 export const focusByWbr = (element: Element, range: Range) => {
     const wbrElements = element.querySelectorAll("wbr");
     if (wbrElements.length === 0) {
diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
index 80686de84..c97f93efd 100644
--- a/app/src/protyle/wysiwyg/index.ts
+++ b/app/src/protyle/wysiwyg/index.ts
@@ -14,7 +14,7 @@ import {
     focusSideBlock,
     getEditorRange,
     getSelectionOffset,
-    setFirstNodeRange,
+    setFirstNodeRange, setInsertWbrHTML,
     setLastNodeRange,
 } from "../util/selection";
 import {Constants} from "../../constants";
@@ -673,7 +673,7 @@ export class WYSIWYG {
 
                 const imgElement = dragElement.parentElement.parentElement;
                 if (dragElement.tagName === "IMG") {
-                   img3115(imgElement);
+                    img3115(imgElement);
                 }
                 documentSelf.onmousemove = (moveEvent: MouseEvent) => {
                     if (dragElement.tagName === "IMG") {
@@ -2011,9 +2011,7 @@ export class WYSIWYG {
             const range = getEditorRange(protyle.wysiwyg.element);
             const nodeElement = hasClosestBlock(range.startContainer);
             if (!isMac() && nodeElement) {
-                range.insertNode(document.createElement("wbr"));
-                protyle.wysiwyg.lastHTMLs[nodeElement.getAttribute("data-node-id")] = nodeElement.outerHTML;
-                nodeElement.querySelector("wbr").remove();
+                setInsertWbrHTML(nodeElement, range, protyle);
             }
             event.stopPropagation();
         });
@@ -2097,9 +2095,7 @@ export class WYSIWYG {
                     // 微软双拼 keyup 会记录拼音字符，因此在 compositionstart 记录
                     !isComposition &&
                     (typeof protyle.wysiwyg.lastHTMLs[nodeElement.getAttribute("data-node-id")] === "undefined" || range.toString() !== "" || !this.preventKeyup)) {
-                    range.insertNode(document.createElement("wbr"));
-                    protyle.wysiwyg.lastHTMLs[nodeElement.getAttribute("data-node-id")] = nodeElement.outerHTML;
-                    nodeElement.querySelector("wbr").remove();
+                    setInsertWbrHTML(nodeElement, range, protyle);
                 }
                 this.preventKeyup = false;
                 return;
diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts
index 5d9f652f0..3f455f51f 100644
--- a/app/src/protyle/wysiwyg/keydown.ts
+++ b/app/src/protyle/wysiwyg/keydown.ts
@@ -8,7 +8,7 @@ import {
     getSelectionOffset,
     getSelectionPosition,
     selectAll,
-    setFirstNodeRange,
+    setFirstNodeRange, setInsertWbrHTML,
     setLastNodeRange,
 } from "../util/selection";
 import {
@@ -169,15 +169,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
             !isNotEditBlock(nodeElement) && !/^F\d{1,2}$/.test(event.key) &&
             // 微软双拼使用 compositionstart，否则 focusByRange 导致无法输入文字
             event.key !== "Process") {
-            const cloneRange = range.cloneRange();
-            range.collapse(false);
-            range.insertNode(document.createElement("wbr"));
-            protyle.wysiwyg.lastHTMLs[nodeElement.getAttribute("data-node-id")] = nodeElement.outerHTML;
-            nodeElement.querySelector("wbr").remove();
-            // 光标位于引用结尾后 ctrl+b 偶尔会失效
-            range = cloneRange;
-            focusByRange(cloneRange);
-            protyle.toolbar.range = cloneRange;
+            setInsertWbrHTML(nodeElement, range, protyle);
             protyle.wysiwyg.preventKeyup = true;
         }