From 377f9ef8b84dd0ca41785abf68de3ba7bf89fbb9 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 1 Aug 2022 13:34:15 +0800
Subject: [PATCH] :bug: fix https://github.com/siyuan-note/siyuan/issues/5550

---
 app/src/menus/protyle.ts           | 15 +++++++++++++++
 app/src/protyle/wysiwyg/keydown.ts | 20 +++++++++++++++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts
index 685b762c2..92fdd1ad7 100644
--- a/app/src/menus/protyle.ts
+++ b/app/src/menus/protyle.ts
@@ -35,6 +35,7 @@ import {lineNumberRender} from "../protyle/markdown/highlightRender";
 import * as dayjs from "dayjs";
 import {blockRender} from "../protyle/markdown/blockRender";
 import {renameAsset} from "../editor/rename";
+import {hasNextSibling} from "../protyle/wysiwyg/getBlock";
 
 export const refMenu = (protyle: IProtyle, element: HTMLElement) => {
     const nodeElement = hasClosestBlock(element);
@@ -535,6 +536,17 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
         click() {
             nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
             assetElement.style.display = "block";
+            let nextSibling = assetElement.nextSibling;
+            while (nextSibling) {
+                if (nextSibling.textContent === "") {
+                    nextSibling = nextSibling.nextSibling;
+                } else if (nextSibling.textContent === Constants.ZWSP) {
+                    nextSibling.textContent = "";
+                    break;
+                } else {
+                    break;
+                }
+            }
             updateTransaction(protyle, id, nodeElement.outerHTML, html);
         }
     }).element);
@@ -545,6 +557,9 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
         click() {
             nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
             assetElement.style.display = "";
+            if (!hasNextSibling(assetElement)) {
+                assetElement.insertAdjacentText("afterend", Constants.ZWSP);
+            }
             updateTransaction(protyle, id, nodeElement.outerHTML, html);
         }
     }).element);
diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts
index 424f9ba8c..5579bcd80 100644
--- a/app/src/protyle/wysiwyg/keydown.ts
+++ b/app/src/protyle/wysiwyg/keydown.ts
@@ -971,10 +971,13 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                 const oldHTML = nodeElement.outerHTML;
                 imgSelectElements.forEach((item: HTMLElement) => {
                     item.style.display = "";
+                    if (!hasNextSibling(item)) {
+                        item.insertAdjacentText("afterend", Constants.ZWSP);
+                    }
                 });
                 updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML);
             } else {
-                let selectElements:HTMLElement[] = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
+                let selectElements: HTMLElement[] = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
                 if (selectElements.length === 0) {
                     selectElements = [nodeElement];
                 }
@@ -992,10 +995,21 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                 const oldHTML = nodeElement.outerHTML;
                 imgSelectElements.forEach((item: HTMLElement) => {
                     item.style.display = "block";
+                    let nextSibling = item.nextSibling;
+                    while (nextSibling) {
+                        if (nextSibling.textContent === "") {
+                            nextSibling = nextSibling.nextSibling;
+                        } else if (nextSibling.textContent === Constants.ZWSP) {
+                            nextSibling.textContent = "";
+                            break;
+                        } else {
+                            break;
+                        }
+                    }
                 });
                 updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML);
             } else {
-                let selectElements:HTMLElement[] = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
+                let selectElements: HTMLElement[] = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
                 if (selectElements.length === 0) {
                     selectElements = [nodeElement];
                 }
@@ -1008,7 +1022,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
             return;
         }
         if (matchHotKey(window.siyuan.config.keymap.editor.general.alignRight.custom, event)) {
-            let selectElements:HTMLElement[] = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
+            let selectElements: HTMLElement[] = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
             if (selectElements.length === 0) {
                 selectElements = [nodeElement];
             }