🎨 Add data-id attributes to elements in the font appearance menu

fix #12518

Author: TCOTC

app/src/mobile/util/keyboardToolbar.ts

@@ -67,7 +67,7 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
         lastColorHTML = `<div data-id="lastUsed" class="keyboard__slash-title">
     ${window.siyuan.languages.lastUsed}
 </div>
-<div class="keyboard__slash-block">`;
+<div data-id="lastUsedWrap" class="keyboard__slash-block">`;
         lastFonts.forEach((item: string) => {
             const lastFontStatus = item.split(Constants.ZWSP);
             switch (lastFontStatus[0]) {
@@ -138,7 +138,7 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
     const utilElement = toolbarElement.querySelector(".keyboard__util") as HTMLElement;
     utilElement.innerHTML = `${lastColorHTML}
 <div data-id="color" class="keyboard__slash-title">${window.siyuan.languages.color}</div>
-<div class="keyboard__slash-block">
+<div data-id="colorWrap" class="keyboard__slash-block">
     <button class="keyboard__slash-item" data-type="style1">
         <span class="keyboard__slash-icon">A</span>
         <span class="keyboard__slash-text">${window.siyuan.languages.color} ${window.siyuan.languages.default}</span>
@@ -161,15 +161,15 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
     </button>
 </div>
 <div data-id="colorFont" class="keyboard__slash-title">${window.siyuan.languages.colorFont}</div>
-<div class="keyboard__slash-block">
+<div data-id="colorFontWrap" class="keyboard__slash-block">
     ${colorHTML}
 </div>
 <div data-id="colorPrimary" class="keyboard__slash-title">${window.siyuan.languages.colorPrimary}</div>
-<div class="keyboard__slash-block">
+<div data-id="colorPrimaryWrap" class="keyboard__slash-block">
     ${bgHTML}
 </div>
 <div data-id="fontStyle" class="keyboard__slash-title">${window.siyuan.languages.fontStyle}</div>
-<div class="keyboard__slash-block">
+<div data-id="fontStyleWrap" class="keyboard__slash-block">
     <button class="keyboard__slash-item" data-type="style2">
         <span class="keyboard__slash-text" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</span>
     </button>
@@ -182,7 +182,7 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
     </button>
 </div>
 <div data-id="fontSize" class="keyboard__slash-title${disableFont ? " fn__none" : ""}">${window.siyuan.languages.fontSize}</div>
-<div class="keyboard__slash-block${disableFont ? " fn__none" : ""}">
+<div data-id="fontSizeWrap" class="keyboard__slash-block${disableFont ? " fn__none" : ""}">
     <select class="b3-select fn__block" style="width: calc(50% - 8px);margin: 4px 0 8px 0;">
         <option ${fontSize === "12px" ? "selected" : ""} value="12px">12px</option>
         <option ${fontSize === "13px" ? "selected" : ""} value="13px">13px</option>

app/src/protyle/toolbar/Font.ts

@@ -64,7 +64,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
     <kbd class="fn__kbd fn__flex-center${window.siyuan.config.keymap.editor.insert.lastUsed.custom ? "" : " fn__none"}">${updateHotkeyTip(window.siyuan.config.keymap.editor.insert.lastUsed.custom)}</kbd>
 </div>
 <div class="fn__hr--small"></div>
-<div class="fn__flex fn__flex-wrap" style="align-items: center">`;
+<div data-id="lastUsedWrap" class="fn__flex fn__flex-wrap" style="align-items: center">`;
         lastFonts.forEach((item: string) => {
             const lastFontStatus = item.split(Constants.ZWSP);
             switch (lastFontStatus[0]) {
@@ -112,7 +112,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
 <div class="fn__hr"></div>
 <div data-id="color">${window.siyuan.languages.color}</div>
 <div class="fn__hr--small"></div>
-<div class="fn__flex fn__flex-wrap">
+<div data-id="colorWrap" class="fn__flex fn__flex-wrap">
     <button class="color__square ariaLabel" data-position="3south" data-type="style1" aria-label="${window.siyuan.languages.default}">A</button>
     <button class="color__square" data-type="style1" style="color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);">A</button>
     <button class="color__square" data-type="style1" style="color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);">A</button>
@@ -122,19 +122,19 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
 <div class="fn__hr"></div>
 <div data-id="colorFont">${window.siyuan.languages.colorFont}</div>
 <div class="fn__hr--small"></div>
-<div class="fn__flex fn__flex-wrap">
+<div data-id="colorFontWrap" class="fn__flex fn__flex-wrap">
     ${colorHTML}
 </div>
 <div class="fn__hr"></div>
 <div data-id="colorPrimary">${window.siyuan.languages.colorPrimary}</div>
 <div class="fn__hr--small"></div>
-<div class="fn__flex fn__flex-wrap">
+<div data-id="colorPrimaryWrap" class="fn__flex fn__flex-wrap"${textColor ? `style="--b3-color-text: ${textColor};"` : ""}>
     ${bgHTML}
 </div>
 <div class="fn__hr"></div>
 <div data-id="fontStyle">${window.siyuan.languages.fontStyle}</div>
 <div class="fn__hr--small"></div>
-<div class="fn__flex">
+<div data-id="fontStyleWrap" class="fn__flex">
     <button data-type="style2" class="protyle-font__style" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</button>
     <button data-type="style4" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)">${window.siyuan.languages.shadow}</button>
 </div>
@@ -149,7 +149,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
         <span class="fn__space--small"></span>
     </label>
 </div>
-<div class="${disableFont ? " fn__none" : ""}">
+<div data-id="fontSizeWrap" class="${disableFont ? " fn__none" : ""}">
     <div class="fn__hr"></div>
     <div class="b3-tooltips b3-tooltips__n fn__flex${fontSize.endsWith("em") ? " fn__none" : ""}" aria-label="${fontSize}">   
         <input class="b3-slider fn__block" id="fontSizePX" max="72" min="9" step="1" type="range" value="${parseInt(fontSize)}">