From f41b72ddc5e971ced71e40c1e0fbb123aa555c06 Mon Sep 17 00:00:00 2001
From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com>
Date: Wed, 22 Oct 2025 09:30:13 +0800
Subject: [PATCH] :art: Add `data-id` attributes to elements in the font
 appearance menu (#16162)

fix https://github.com/siyuan-note/siyuan/issues/12518
---
 app/src/mobile/util/keyboardToolbar.ts | 24 ++++++++++++------------
 app/src/protyle/toolbar/Font.ts        | 26 +++++++++++++-------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/app/src/mobile/util/keyboardToolbar.ts b/app/src/mobile/util/keyboardToolbar.ts
index 7da9f0d33..e202de0c2 100644
--- a/app/src/mobile/util/keyboardToolbar.ts
+++ b/app/src/mobile/util/keyboardToolbar.ts
@@ -64,10 +64,10 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
     let lastColorHTML = "";
     const lastFonts = window.siyuan.storage[Constants.LOCAL_FONTSTYLES];
     if (lastFonts.length > 0) {
-        lastColorHTML = `<div class="keyboard__slash-title">
+        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]) {
@@ -137,8 +137,8 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
     }
     const utilElement = toolbarElement.querySelector(".keyboard__util") as HTMLElement;
     utilElement.innerHTML = `${lastColorHTML}
-<div class="keyboard__slash-title">${window.siyuan.languages.color}</div>
-<div class="keyboard__slash-block">
+<div data-id="color" class="keyboard__slash-title">${window.siyuan.languages.color}</div>
+<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>
@@ -160,16 +160,16 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
         <span class="keyboard__slash-text">${window.siyuan.languages.successStyle}</span>
     </button>
 </div>
-<div class="keyboard__slash-title">${window.siyuan.languages.colorFont}</div>
-<div class="keyboard__slash-block">
+<div data-id="colorFont" class="keyboard__slash-title">${window.siyuan.languages.colorFont}</div>
+<div data-id="colorFontWrap" class="keyboard__slash-block">
     ${colorHTML}
 </div>
-<div class="keyboard__slash-title">${window.siyuan.languages.colorPrimary}</div>
-<div class="keyboard__slash-block">
+<div data-id="colorPrimary" class="keyboard__slash-title">${window.siyuan.languages.colorPrimary}</div>
+<div data-id="colorPrimaryWrap" class="keyboard__slash-block">
     ${bgHTML}
 </div>
-<div class="keyboard__slash-title">${window.siyuan.languages.fontStyle}</div>
-<div class="keyboard__slash-block">
+<div data-id="fontStyle" class="keyboard__slash-title">${window.siyuan.languages.fontStyle}</div>
+<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>
@@ -181,8 +181,8 @@ export const renderTextMenu = (protyle: IProtyle, toolbarElement: Element) => {
         <span class="keyboard__slash-text">${window.siyuan.languages.clearFontStyle}</span>
     </button>
 </div>
-<div class="keyboard__slash-title${disableFont ? " fn__none" : ""}">${window.siyuan.languages.fontSize}</div>
-<div class="keyboard__slash-block${disableFont ? " fn__none" : ""}">
+<div data-id="fontSize" class="keyboard__slash-title${disableFont ? " fn__none" : ""}">${window.siyuan.languages.fontSize}</div>
+<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>
diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts
index 33134d37b..806b32fe7 100644
--- a/app/src/protyle/toolbar/Font.ts
+++ b/app/src/protyle/toolbar/Font.ts
@@ -58,13 +58,13 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
     let lastColorHTML = "";
     const lastFonts = window.siyuan.storage[Constants.LOCAL_FONTSTYLES];
     if (lastFonts.length > 0) {
-        lastColorHTML = `<div class="fn__flex">
+        lastColorHTML = `<div data-id="lastUsed" class="fn__flex">
     ${window.siyuan.languages.lastUsed}
     <span class="fn__space"></span>
     <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]) {
@@ -110,9 +110,9 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
     }
     element.innerHTML = `${lastColorHTML}
 <div class="fn__hr"></div>
-<div>${window.siyuan.languages.color}</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>
@@ -120,26 +120,26 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
     <button class="color__square" data-type="style1" style="color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);">A</button>
 </div>
 <div class="fn__hr"></div>
-<div>${window.siyuan.languages.colorFont}</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>${window.siyuan.languages.colorPrimary}</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">
     ${bgHTML}
 </div>
 <div class="fn__hr"></div>
-<div>${window.siyuan.languages.fontStyle}</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>
 <div class="fn__hr${disableFont ? " fn__none" : ""}"></div>
-<div class="fn__flex${disableFont ? " fn__none" : ""}">
+<div data-id="fontSize" class="fn__flex${disableFont ? " fn__none" : ""}">
     ${window.siyuan.languages.fontSize}
     <span class="fn__flex-1"></span>
     <label class="fn__flex">
@@ -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)}">
@@ -159,7 +159,7 @@ export const appearanceMenu = (protyle: IProtyle, nodeElements?: Element[]) => {
     </div>
 </div>
 <div class="fn__hr--b"></div>
-<div class="fn__flex">
+<div data-id="clearFontStyle" class="fn__flex">
     <div class="fn__space--small"></div>
     <button class="b3-button b3-button--remove fn__block" data-type="clear">
         <svg><use xlink:href="#iconTrashcan"></use></svg>${window.siyuan.languages.clearFontStyle}