From dcee38bcfa3662c80045748cab60f4d7b8db8c8c Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Fri, 16 Sep 2022 17:29:04 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20https://github.com/siyuan-note/siy?=
 =?UTF-8?q?uan/issues/2911=20=E9=80=89=E6=8B=A9=20span=20=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E4=B8=80=E9=83=A8=E5=88=86=E9=9C=80=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E5=8C=85=E8=A3=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/protyle/toolbar/index.ts | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts
index a77f4a09e..7cae8a15d 100644
--- a/app/src/protyle/toolbar/index.ts
+++ b/app/src/protyle/toolbar/index.ts
@@ -309,11 +309,22 @@ export class Toolbar {
             // aaa**bbb** 选中 aaa 加粗
             nextElement = nextSibling as HTMLElement;
         }
-        const wbrElement = document.createElement("wbr");
-        this.range.insertNode(wbrElement);
+        this.range.insertNode(document.createElement("wbr"));
         const html = nodeElement.outerHTML;
         const contents = this.range.extractContents();
         this.mergeNode(contents.childNodes);
+        // 选择 span 中的一部分需进行包裹
+        if (previousElement && nextElement && previousElement.isSameNode(nextElement) && contents.firstChild.nodeType === 3) {
+            const attributes = previousElement.attributes;
+            contents.childNodes.forEach(item => {
+                const spanElement = document.createElement("span");
+                for (let i = 0; i < attributes.length; i++) {
+                    spanElement.setAttribute(attributes[i].name, attributes[i].value);
+                }
+                spanElement.innerHTML = item.textContent;
+                item.replaceWith(spanElement);
+            })
+        }
         const actionBtn = action === "toolbar" ? this.element.querySelector(`[data-type="${type}"]`) : undefined;
         const newNodes: Node[] = [];
         if (actionBtn?.classList.contains("protyle-toolbar__item--current") || (
@@ -506,7 +517,10 @@ export class Toolbar {
         }
         nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
         updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html);
-        wbrElement.remove();
+        const wbrElement = nodeElement.querySelector("wbr")
+        if (wbrElement) {
+            wbrElement.remove();
+        }
     }
 
     public showFileAnnotationRef(protyle: IProtyle, refElement: HTMLElement) {