From 4d4b6933e3b99c5ecb266e946376baa038803355 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 26 Feb 2024 16:22:36 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/10430

---
 app/src/protyle/wysiwyg/keydown.ts | 14 +++-----------
 app/src/protyle/wysiwyg/remove.ts  | 19 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts
index bdc6992f5..af3a7772f 100644
--- a/app/src/protyle/wysiwyg/keydown.ts
+++ b/app/src/protyle/wysiwyg/keydown.ts
@@ -14,7 +14,7 @@ import {
     hasClosestByMatchTag,
     hasTopClosestByAttribute
 } from "../util/hasClosest";
-import {removeBlock} from "./remove";
+import {removeBlock, removeImage} from "./remove";
 import {
     getContenteditableElement,
     getFirstBlock,
@@ -766,11 +766,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
             if (imgSelectElement) {
                 imgSelectElement.classList.remove("img--select");
                 if (nodeElement.contains(imgSelectElement)) {
-                    imgSelectElement.insertAdjacentHTML("afterend", "<wbr>");
-                    const oldHTML = nodeElement.outerHTML;
-                    imgSelectElement.remove();
-                    updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML);
-                    focusByWbr(nodeElement, range);
+                    removeImage(imgSelectElement, nodeElement, range, protyle);
                     event.stopPropagation();
                     event.preventDefault();
                     return;
@@ -828,11 +824,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                     }
                     // 图片后为 br，在 br 后删除 https://github.com/siyuan-note/siyuan/issues/4963
                     if (currentNode && currentNode.nodeType !== 3 && currentNode.classList.contains("img")) {
-                        range.insertNode(document.createElement("wbr"));
-                        const oldHTML = nodeElement.outerHTML;
-                        currentNode.remove();
-                        updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML);
-                        focusByWbr(nodeElement, range);
+                        removeImage(currentNode, nodeElement, range, protyle);
                         event.stopPropagation();
                         event.preventDefault();
                         return;
diff --git a/app/src/protyle/wysiwyg/remove.ts b/app/src/protyle/wysiwyg/remove.ts
index b1883b824..77160736c 100644
--- a/app/src/protyle/wysiwyg/remove.ts
+++ b/app/src/protyle/wysiwyg/remove.ts
@@ -11,7 +11,7 @@ import {
     getNextBlock,
     getPreviousBlock,
     getTopAloneElement,
-    getTopEmptyElement, hasNextSibling
+    getTopEmptyElement, hasNextSibling, hasPreviousSibling
 } from "./getBlock";
 import {transaction, turnsIntoTransaction, updateTransaction} from "./transaction";
 import {cancelSB, genEmptyElement} from "../../block/util";
@@ -563,3 +563,20 @@ export const moveToPrevious = (blockElement: Element, range: Range, isDelete: bo
         }
     }
 };
+
+// https://github.com/siyuan-note/siyuan/issues/10393
+export const removeImage = (imgSelectElement: Element, nodeElement:HTMLElement, range:Range, protyle:IProtyle) => {
+    const oldHTML = nodeElement.outerHTML;
+    const imgPreviousSibling = hasPreviousSibling(imgSelectElement);
+    if (imgPreviousSibling && imgPreviousSibling.textContent.endsWith(Constants.ZWSP)) {
+        imgPreviousSibling.textContent = imgPreviousSibling.textContent.substring(0, imgPreviousSibling.textContent.length - 1);
+    }
+    const imgNextSibling = hasNextSibling(imgSelectElement);
+    if (imgNextSibling && imgNextSibling.textContent.startsWith(Constants.ZWSP)) {
+        imgNextSibling.textContent = imgNextSibling.textContent.replace(Constants.ZWSP, "");
+    }
+    imgSelectElement.insertAdjacentHTML("afterend", "<wbr>");
+    imgSelectElement.remove();
+    updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML);
+    focusByWbr(nodeElement, range);
+}