✨ fix https://github.com/siyuan-note/insider/issues/1045

app/appearance/icons/ant/icon.js

@@ -1,5 +1,8 @@
 document.body.insertAdjacentHTML('afterBegin', `<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
 <defs>
+  <symbol id="iconClear" viewBox="0 0 32 32">
+    <path d="M9.92 2.88h-0.32c0.176 0 0.32-0.144 0.32-0.32v0.32h12.16v-0.32c0 0.176 0.144 0.32 0.32 0.32h-0.32v2.88h2.88v-3.2c0-1.412-1.148-2.56-2.56-2.56h-12.8c-1.412 0-2.56 1.148-2.56 2.56v3.2h2.88v-2.88zM30.080 5.76h-28.16c-0.708 0-1.28 0.572-1.28 1.28v1.28c0 0.176 0.144 0.32 0.32 0.32h2.416l0.988 20.92c0.064 1.364 1.192 2.44 2.556 2.44h18.16c1.368 0 2.492-1.072 2.556-2.44l0.988-20.92h2.416c0.176 0 0.32-0.144 0.32-0.32v-1.28c0-0.708-0.572-1.28-1.28-1.28zM24.772 29.12h-17.544l-0.968-20.48h19.48l-0.968 20.48z"></path>
+  </symbol>
   <symbol id="iconTransform" viewBox="0 0 32 32">
     <path d="M0.333 17.666h2.649c0.183 0 0.333-0.15 0.333-0.333v-10.635h22.019v3.024c0 0.079 0.025 0.154 0.075 0.217 0.064 0.081 0.162 0.133 0.273 0.133 0.081 0 0.156-0.028 0.215-0.075l-0.001 0.001 5.969-4.686c0.179-0.208 0.15-0.429 0-0.55l-5.969-4.682c-0.058-0.047-0.133-0.075-0.214-0.075-0.001 0-0.002 0-0.003 0h0c-0.192 0-0.35 0.158-0.35 0.35v3.024h-22.344c-1.645 0-2.987 1.341-2.987 2.991v10.964c0 0.183 0.15 0.333 0.333 0.333zM31.658 14.334h-2.649c-0.183 0-0.333 0.15-0.333 0.333v10.635h-22.019v-3.024c0-0.079-0.025-0.154-0.075-0.217-0.064-0.081-0.162-0.133-0.273-0.133-0.081 0-0.156 0.028-0.215 0.075l0.001-0.001-5.969 4.686c-0.179 0.208-0.15 0.429 0 0.55l5.969 4.682c0.062 0.050 0.137 0.075 0.217 0.075 0.192 0 0.35-0.158 0.35-0.35v-3.024h22.352c1.645 0 2.987-1.341 2.987-2.991v-10.964c-0.008-0.183-0.158-0.333-0.342-0.333z"></path>
   </symbol>

app/appearance/icons/ant/icon.json

@@ -2,5 +2,5 @@
   "name": "ant",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.0.6"
+  "version": "1.0.7"
 }

app/appearance/icons/index.html

@@ -34,6 +34,12 @@
         </svg>
         iconTransform
     </div>
+    <div>
+        <svg>
+            <use xlink:href="#iconClear"></use>
+        </svg>
+        iconClear
+    </div>
     <div>
         <svg>
             <use xlink:href="#iconFormat"></use>

app/appearance/icons/material/icon.js

@@ -1,5 +1,7 @@
-document.body.insertAdjacentHTML('afterbegin', `
-<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg"><defs>
+document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg"><defs>
+  <symbol id="iconClear" viewBox="0 0 32 32">
+    <path d="M17.023 14.333l-2.917-2.879 0.909-2.121h-2.992l-3.939-3.939h20.038v3.788h-8.902zM28.348 32.061l-13.22-13.258-3.333 7.803h-4.129l4.545-10.682-12.273-12.273 1.591-1.591 28.409 28.409z"></path>
+  </symbol>
   <symbol id="iconTransform" viewBox="0 0 32 32">
     <path d="M30.546 24.727v-2.909h-20.364v-17.455h2.909l-4.364-4.364-4.364 4.364h2.909v2.909h-5.818v2.909h5.818v11.636c0 1.6 1.309 2.909 2.909 2.909h11.636v2.909h-2.909l4.364 4.364 4.364-4.364h-2.909v-2.909h5.818zM13.091 10.182h8.727v8.727h2.909v-8.727c0-1.6-1.309-2.909-2.909-2.909h-8.727v2.909z"></path>
   </symbol>

app/appearance/icons/material/icon.json

@@ -2,5 +2,5 @@
   "name": "material",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.0.6"
+  "version": "1.0.7"
 }

app/src/constants.ts

@@ -182,6 +182,7 @@ export abstract class Constants {
                 check: {default: "⌘L", custom: "⌘L"},
                 table: {default: "⌘O", custom: "⌘O"},
                 code: {default: "⇧⌘K", custom: "⇧⌘K"},
+                clearFontStyle: {default: "⌘\\", custom: "⌘\\"},
             },
             heading: {
                 paragraph: {default: "⌥⌘0", custom: "⌥⌘0"},

app/src/protyle/gutter/index.ts

@@ -1358,17 +1358,16 @@ export class Gutter {
 </div>`,
             click: () => {
                 this.genClick(nodeElements, protyle, (e: HTMLElement) => {
-                    e.style.textShadow = "";
                     e.style.color = "";
-                    e.style.webkitBackgroundClip = "";
-                    e.style.backgroundImage = "";
                     e.style.webkitTextFillColor = "";
                     e.style.webkitTextStroke = "";
                     e.style.textShadow = "";
                     e.style.backgroundColor = "";
+                    e.style.fontSize = "";
                 });
             }
         });
+        // TODO 字体大小
         return styles;
     }
 

app/src/protyle/toolbar/Font.ts

@@ -122,12 +122,15 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => {
     protyle.toolbar.setInlineMark(protyle, "text", "range", {type, color});
 };
 
-export const setFontStyle = (textElement:HTMLElement, textOption:ITextOption) => {
+export const setFontStyle = (textElement: HTMLElement, textOption: ITextOption) => {
     if (textOption) {
         switch (textOption.type) {
             case "color":
                 textElement.style.color = textOption.color;
                 break;
+            case "fontSize":
+                textElement.style.fontSize = textOption.color;
+                break;
             case "backgroundColor":
                 textElement.style.backgroundColor = textOption.color;
                 break;
@@ -151,18 +154,21 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE
     let webkitTextStroke = "";
     let textShadow = "";
     let backgroundColor = "";
+    let fontSize = "";
     if (currentElement.nodeType !== 3) {
         color = currentElement.style.color;
         webkitTextFillColor = currentElement.style.webkitTextFillColor;
         webkitTextStroke = currentElement.style.webkitTextStroke;
         textShadow = currentElement.style.textShadow;
         backgroundColor = currentElement.style.backgroundColor;
+        fontSize = currentElement.style.fontSize;
     }
     if (textObj.type === "color") {
         return textObj.color === sideElement.style.color &&
             webkitTextFillColor === sideElement.style.webkitTextFillColor &&
             webkitTextStroke === sideElement.style.webkitTextStroke &&
             textShadow === sideElement.style.textShadow &&
+            fontSize === sideElement.style.fontSize &&
             backgroundColor === sideElement.style.backgroundColor;
     }
     if (textObj.type === "backgroundColor") {
@@ -170,6 +176,7 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE
             webkitTextFillColor === sideElement.style.webkitTextFillColor &&
             webkitTextStroke === sideElement.style.webkitTextStroke &&
             textShadow === sideElement.style.textShadow &&
+            fontSize === sideElement.style.fontSize &&
             textObj.color === sideElement.style.backgroundColor;
     }
     if (textObj.type === "style2") {
@@ -177,13 +184,23 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE
             "transparent" === sideElement.style.webkitTextFillColor &&
             "0.2px var(--b3-theme-on-background)" === sideElement.style.webkitTextStroke &&
             textShadow === sideElement.style.textShadow &&
+            fontSize === sideElement.style.fontSize &&
             backgroundColor === sideElement.style.backgroundColor;
     }
     if (textObj.type === "style4") {
         return color === sideElement.style.color &&
             webkitTextFillColor === sideElement.style.webkitTextFillColor &&
             webkitTextStroke === sideElement.style.webkitTextStroke &&
+            fontSize === sideElement.style.fontSize &&
             "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)" === sideElement.style.textShadow &&
             backgroundColor === sideElement.style.backgroundColor;
     }
+    if (textObj.type === "fontSize") {
+        return color === sideElement.style.color &&
+            webkitTextFillColor === sideElement.style.webkitTextFillColor &&
+            webkitTextStroke === sideElement.style.webkitTextStroke &&
+            textShadow === sideElement.style.textShadow &&
+            textObj.color === sideElement.style.fontSize &&
+            backgroundColor === sideElement.style.backgroundColor;
+    }
 };

app/src/protyle/toolbar/InlineMemo.ts

@@ -66,6 +66,7 @@ export class InlineMemo extends ToolbarItem {
                 const nextNewNode = newNodes[i + 1] as HTMLElement;
                 if (currentNewNode.nodeType !== 3 && nextNewNode && nextNewNode.nodeType !== 3 &&
                     isArrayEqual(nextNewNode.getAttribute("data-type").split(" "), currentNewNode.getAttribute("data-type").split(" ")) &&
+                    currentNewNode.style.fontSize === nextNewNode.style.fontSize &&
                     currentNewNode.style.color === nextNewNode.style.color &&
                     currentNewNode.style.webkitTextFillColor === nextNewNode.style.webkitTextFillColor &&
                     currentNewNode.style.webkitTextStroke === nextNewNode.style.webkitTextStroke &&

app/src/protyle/toolbar/index.ts

@@ -184,6 +184,7 @@ export class Toolbar {
             case "tag":
             case "u":
             case "sup":
+            case "clear":
             case "sub":
             case "kbd":
                 menuItemObj = new ToolbarItem(protyle, menuItem);
@@ -294,11 +295,15 @@ export class Toolbar {
         const actionBtn = action === "toolbar" ? this.element.querySelector(`[data-type="${type}"]`) : undefined;
         const newNodes: Node[] = [];
 
-        if (actionBtn?.classList.contains("protyle-toolbar__item--current") || (
-            action === "range" && rangeTypes.length > 0 && rangeTypes.includes(type) && (!textObj || textObj.type === "remove")
+        if (type === "clear" || actionBtn?.classList.contains("protyle-toolbar__item--current") || (
+            action === "range" && rangeTypes.length > 0 && rangeTypes.includes(type) && !textObj
         )) {
             // 移除
-            if (actionBtn) {
+            if (type === "clear") {
+                this.element.querySelectorAll('[data-type="em"],[data-type="u"],[data-type="s"],[data-type="mark"],[data-type="sup"],[data-type="sub"],[data-type="strong"]').forEach(item => {
+                    item.classList.remove("protyle-toolbar__item--current");
+                });
+            } else if (actionBtn) {
                 actionBtn.classList.remove("protyle-toolbar__item--current");
             }
             if (contents.childNodes.length === 0) {
@@ -320,24 +325,34 @@ export class Toolbar {
             contents.childNodes.forEach((item: HTMLElement, index) => {
                 if (item.nodeType !== 3 && item.tagName !== "BR") {
                     const types = item.getAttribute("data-type").split(" ");
-                    types.find((itemType, index) => {
-                        if (type === itemType) {
-                            types.splice(index, 1);
-                            return true;
+                    if (type === "clear") {
+                        for (let i = 0; i < types.length; i++) {
+                            if (["strong", "em", "u", "s", "mark", "sup", "sub"].includes(types[i])) {
+                                types.splice(i, 1);
+                                i--;
+                            }
                         }
-                    });
+                    } else {
+                        types.find((itemType, typeIndex) => {
+                            if (type === itemType) {
+                                types.splice(typeIndex, 1);
+                                return true;
+                            }
+                        });
+                    }
                     if (types.length === 0) {
                         if (item.textContent === "") {
                             item.textContent = Constants.ZWSP;
                         }
                         newNodes.push(document.createTextNode(item.textContent));
                     } else {
-                        if (textObj && textObj.type === "remove") {
+                        if (type === "clear") {
                             item.style.color = "";
                             item.style.webkitTextFillColor = "";
                             item.style.webkitTextStroke = "";
                             item.style.textShadow = "";
                             item.style.backgroundColor = "";
+                            item.style.fontSize = "";
                         }
                         if (index === 0 && previousElement && previousElement.nodeType !== 3 &&
                             isArrayEqual(types, previousElement.getAttribute("data-type").split(" ")) &&
@@ -350,17 +365,11 @@ export class Toolbar {
                             nextIndex = item.textContent.length;
                             nextElement.innerHTML = item.innerHTML + nextElement.innerHTML;
                         } else {
-                            if (item.textContent === "") {
-                                item.textContent = Constants.ZWSP;
-                            }
                             item.setAttribute("data-type", types.join(" "));
                             newNodes.push(item);
                         }
                     }
                 } else {
-                    if (item.textContent === "") {
-                        item.textContent = Constants.ZWSP;
-                    }
                     newNodes.push(item);
                 }
             });
@@ -466,6 +475,7 @@ export class Toolbar {
                 currentNewNode.style.webkitTextFillColor === nextNewNode.style.webkitTextFillColor &&
                 currentNewNode.style.webkitTextStroke === nextNewNode.style.webkitTextStroke &&
                 currentNewNode.style.textShadow === nextNewNode.style.textShadow &&
+                currentNewNode.style.fontSize === nextNewNode.style.fontSize &&
                 currentNewNode.style.backgroundColor === nextNewNode.style.backgroundColor) {
                 // 合并相同的 node
                 nextNewNode.innerHTML = currentNewNode.innerHTML + nextNewNode.innerHTML;

app/src/protyle/util/Options.ts

@@ -80,39 +80,37 @@ export class Options {
         toolbar: isMobile() ? [
             "block-ref",
             "a",
+            "text",
             "|",
             "strong",
             "em",
             "u",
-            "s",
-            "mark",
-            "|",
-            "tag",
             "code",
+            "tag",
+            "inline-memo",
             "inline-math",
             "|",
-            "inline-memo",
-            "text",
+            "clear",
         ] : [
             "block-ref",
             "a",
+            "text",
             "|",
             "strong",
             "em",
             "u",
             "s",
             "mark",
-            "|",
             "sup",
             "sub",
-            "kbd",
             "|",
-            "tag",
             "code",
+            "kbd",
+            "tag",
+            "inline-memo",
             "inline-math",
             "|",
-            "inline-memo",
-            "text",
+            "clear"
         ],
         typewriterMode: false,
         upload: {
@@ -236,6 +234,12 @@ export class Options {
             hotkey: window.siyuan.config.keymap.editor.insert.font.custom,
             icon: "iconFont",
             tipPosition: "n",
+        }, {
+            name: "clear",
+            lang: "clearFontStyle",
+            hotkey: window.siyuan.config.keymap.editor.insert.clearFontStyle.custom,
+            icon: "iconClear",
+            tipPosition: "n",
         }, {
             name: "|",
         }];