🎨 Add data-id attributes to elements in the font appearance menu (#16162)

fix https://github.com/siyuan-note/siyuan/issues/12518
This commit is contained in:
Jeffrey Chen 2025-10-22 09:30:13 +08:00 committed by GitHub
parent f37b8461ad
commit f41b72ddc5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 25 deletions

View file

@ -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>