:sparkles: https://github.com/siyuan-note/siyuan/issues/2911

app/src/protyle/toolbar/Font.ts

@@ -120,26 +120,28 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => {
             color = fontStyles[1];
         }
     }
-    protyle.toolbar.setInlineMark(protyle, "text", "add", true);
+    protyle.toolbar.setInlineMark(protyle, "text", "add", {type, color});
     const range = protyle.toolbar.range;
-    const fontElement = hasClosestByMatchTag(range.startContainer, "STRONG");
-    if (!fontElement) {
+    const textElement = hasClosestByMatchTag(range.startContainer, "SPAN");
+    if (!textElement) {
         return;
     }
-    const nodeElement = hasClosestBlock(fontElement);
+    const nodeElement = hasClosestBlock(textElement);
     if (!nodeElement) {
         return;
     }
-    fontElement.insertAdjacentHTML("beforeend", "<wbr>");
+    textElement.insertAdjacentHTML("beforeend", "<wbr>");
     const html = nodeElement.outerHTML;
+
+
     if (type === "remove") {
-        fontElement.style.color = "";
-        fontElement.style.webkitTextFillColor = "";
-        fontElement.style.webkitTextStroke = "";
-        fontElement.style.textShadow = "";
-        fontElement.style.backgroundColor = "";
-        const textNode = document.createTextNode(fontElement.textContent);
-        fontElement.parentElement.replaceChild(textNode, fontElement);
+        textElement.style.color = "";
+        textElement.style.webkitTextFillColor = "";
+        textElement.style.webkitTextStroke = "";
+        textElement.style.textShadow = "";
+        textElement.style.backgroundColor = "";
+        const textNode = document.createTextNode(textElement.textContent);
+        textElement.parentElement.replaceChild(textNode, textElement);
         updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html);
         const wbrElement = nodeElement.querySelector("wbr");
         if (wbrElement) {
@@ -153,20 +155,20 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => {
 
     switch (type) {
         case "color":
-            fontElement.style.color = color;
+            textElement.style.color = color;
             break;
         case "backgroundColor":
-            fontElement.style.backgroundColor = color;
+            textElement.style.backgroundColor = color;
             break;
         case "style2":
-            fontElement.style.webkitTextStroke = "0.2px var(--b3-theme-on-background)";
-            fontElement.style.webkitTextFillColor = "transparent";
+            textElement.style.webkitTextStroke = "0.2px var(--b3-theme-on-background)";
+            textElement.style.webkitTextFillColor = "transparent";
             break;
         case "style4":
-            fontElement.style.textShadow = "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)";
+            textElement.style.textShadow = "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)";
             break;
     }
-    fontElement.setAttribute("style", fontElement.getAttribute("style").replace(" background-clip", " -webkit-background-clip"));
+    textElement.setAttribute("style", textElement.getAttribute("style").replace(" background-clip", " -webkit-background-clip"));
     updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html);
     const wbrElement = nodeElement.querySelector("wbr");
     if (wbrElement) {

app/src/protyle/toolbar/ToolbarItem.ts

@@ -12,7 +12,7 @@ export class ToolbarItem {
         this.element.setAttribute("data-type", menuItem.name);
         this.element.setAttribute("aria-label", tip + hotkey);
         this.element.innerHTML = `<svg><use xlink:href="#${menuItem.icon}"></use></svg>`;
-        if (menuItem.name === "font" || menuItem.name === "blockRef" || menuItem.name === "link") {
+        if (menuItem.name === "text" || menuItem.name === "block-ref" || menuItem.name === "a") {
             return;
         }
         this.element.addEventListener(getEventName(), (event) => {

app/src/protyle/toolbar/index.ts

@@ -231,7 +231,7 @@ export class Toolbar {
         });
     }
 
-    public setInlineMark(protyle: IProtyle, type: string, action: "remove" | "add" | "range" | "toolbar", focusAdd = false) {
+    public setInlineMark(protyle: IProtyle, type: string, action: "remove" | "add" | "range" | "toolbar", textObj?: {color?: string, type?:string}) {
         const nodeElement = hasClosestBlock(this.range.startContainer);
         if (!nodeElement) {
             return;
@@ -292,11 +292,7 @@ export class Toolbar {
             if (actionBtn) {
                 actionBtn.classList.remove("protyle-toolbar__item--current");
             }
-            let removeIndex = 0
             contents.childNodes.forEach((item: HTMLElement, index) => {
-                if (item.tagName === "WBR") {
-                    return;
-                }
                 if (item.nodeType !== 3) {
                     const types = item.getAttribute("data-type").split(" ");
                     types.find((itemType, index) => {
@@ -305,11 +301,10 @@ export class Toolbar {
                             return true
                         }
                     })
-
                     if (types.length === 0) {
                         newNodes.push(document.createTextNode(item.textContent));
                     } else {
-                        if (removeIndex === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" "))) {
+                        if (index === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" "))) {
                             previousIndex = previousElement.textContent.length;
                             previousElement.innerHTML = previousElement.innerHTML + item.innerHTML;
                         } else if (index === contents.childNodes.length - 1 && nextElement && nextElement.nodeType !== 3 && isArrayEqual(types, nextElement.getAttribute("data-type").split(" "))) {
@@ -323,16 +318,14 @@ export class Toolbar {
                 } else {
                     newNodes.push(item);
                 }
-                removeIndex++
             });
         } else {
-            if (!this.element.classList.contains("fn__none")) {
+            if (!this.element.classList.contains("fn__none") && type !== "text") {
                 this.element.querySelector(`[data-type="${type}"]`).classList.add("protyle-toolbar__item--current");
             }
-            let addIndex = 0
             contents.childNodes.forEach((item: HTMLElement, index) => {
                 if (item.nodeType === 3) {
-                    if (addIndex === 0 && previousElement && previousElement.nodeType !== 3 && type === previousElement.getAttribute("data-type")) {
+                    if (index === 0 && previousElement && previousElement.nodeType !== 3 && type === previousElement.getAttribute("data-type")) {
                         previousIndex = previousElement.textContent.length;
                         previousElement.innerHTML = previousElement.innerHTML + item.textContent;
                     } else if (index === contents.childNodes.length - 1 && nextElement && nextElement.nodeType !== 3 && type === nextElement.getAttribute("data-type")) {
@@ -344,12 +337,11 @@ export class Toolbar {
                         inlineElement.textContent = item.textContent;
                         newNodes.push(inlineElement);
                     }
-                    addIndex++;
                 } else {
                     let types = (item.getAttribute("data-type") || "").split(" ");
                     types.push(type);
                     types = [...new Set(types)]
-                    if (addIndex === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" "))) {
+                    if (index === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" "))) {
                         previousIndex = previousElement.textContent.length;
                         previousElement.innerHTML = previousElement.innerHTML + item.innerHTML;
                     } else if (index === contents.childNodes.length - 1 && nextElement && nextElement.nodeType !== 3 && isArrayEqual(types, nextElement.getAttribute("data-type").split(" "))) {
@@ -359,7 +351,6 @@ export class Toolbar {
                         item.setAttribute("data-type", types.join(" "));
                         newNodes.push(item);
                     }
-                    addIndex++;
                 }
             });
         }
@@ -411,10 +402,10 @@ export class Toolbar {
             return;
         }
         // 对已有字体样式的文字再次添加字体样式
-        if (focusAdd && action === "add" && types.includes("text") && this.range.startContainer.nodeType === 3 &&
-            this.range.startContainer.parentNode.isSameNode(this.range.endContainer.parentNode)) {
-            return;
-        }
+        // if (focusAdd && action === "add" && types.includes("text") && this.range.startContainer.nodeType === 3 &&
+        //     this.range.startContainer.parentNode.isSameNode(this.range.endContainer.parentNode)) {
+        //     return;
+        // }
         let startElement = this.range.startContainer as Element;
         if (this.range.startContainer.nodeType === 3) {
             startElement = this.range.startContainer.parentElement;