From 1d624dea6072e2f7434dc48daaddd0d2f27c8281 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Tue, 18 Oct 2022 00:03:34 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/6245

---
 app/src/assets/scss/_list.scss |  6 +--
 app/src/config/about.ts        | 32 ++++++++--------
 app/src/config/appearance.ts   | 46 +++++++++++-----------
 app/src/config/editor.ts       | 14 ++++---
 app/src/config/image.ts        |  4 +-
 app/src/config/keymap.ts       | 70 +++++++++++++++++-----------------
 app/src/config/repos.ts        |  4 +-
 7 files changed, 88 insertions(+), 88 deletions(-)

diff --git a/app/src/assets/scss/_list.scss b/app/src/assets/scss/_list.scss
index 26433c4b7..47dc76c63 100644
--- a/app/src/assets/scss/_list.scss
+++ b/app/src/assets/scss/_list.scss
@@ -24,12 +24,12 @@
   }
 
   &--border {
-    ul {
+    div {
       margin-left: 34px;
       position: relative;
     }
 
-    & > ul ul:before {
+    & > div div:before {
       content: "";
       height: 100%;
       top: 0;
@@ -38,7 +38,7 @@
       left: -47px;
     }
 
-    & > ul li:before {
+    & > div label:before {
       content: "";
       height: 100%;
       top: 0;
diff --git a/app/src/config/about.ts b/app/src/config/about.ts
index ca0fa2985..750eae811 100644
--- a/app/src/config/about.ts
+++ b/app/src/config/about.ts
@@ -16,31 +16,31 @@ import {confirmDialog} from "../dialog/confirmDialog";
 export const about = {
     element: undefined as Element,
     genHTML: () => {
-        return `<div class="fn__flex b3-label${isBrowser() || window.siyuan.config.system.isMicrosoftStore ? " fn__none" : ""}">
+        return `<label class="fn__flex b3-label${isBrowser() || window.siyuan.config.system.isMicrosoftStore ? " fn__none" : ""}">
     <div class="fn__flex-1">
         ${window.siyuan.languages.autoDownloadUpdatePkg}
         <div class="b3-label__text">${window.siyuan.languages.autoDownloadUpdatePkgTip}</div>
     </div>
     <div class="fn__space"></div>
     <input class="b3-switch fn__flex-center" id="downloadInstallPkg" type="checkbox"${window.siyuan.config.system.downloadInstallPkg ? " checked" : ""}>
-</div>
-<div class="b3-label fn__flex">
+</label>
+<label class="b3-label fn__flex">
     <div class="fn__flex-1">
         ${window.siyuan.languages.about9}
         <div class="b3-label__text">${window.siyuan.languages.about10}</div>
     </div>
     <div class="fn__space"></div>
     <input class="b3-switch fn__flex-center" id="uploadErrLog" type="checkbox"${window.siyuan.config.system.uploadErrLog ? " checked" : ""}>
-</div>
-<div class="b3-label fn__flex">
+</label>
+<label class="b3-label fn__flex">
     <div class="fn__flex-1">
         ${window.siyuan.languages.about11}
         <div class="b3-label__text">${window.siyuan.languages.about12}</div>
     </div>
     <div class="fn__space"></div>
     <input class="b3-switch fn__flex-center" id="networkServe" type="checkbox"${window.siyuan.config.system.networkServe ? " checked" : ""}>
-</div>
-<div class="fn__flex b3-label${isBrowser() ? " fn__none" : ""}">
+</label>
+<label class="b3-label${isBrowser() ? " fn__none" : " fn__flex"}">
     <div class="fn__flex-1">
        ${window.siyuan.languages.about2}
         <div class="b3-label__text">${window.siyuan.languages.about3}</div>
@@ -50,8 +50,8 @@ export const about = {
     <button data-type="open" data-url="http://${window.siyuan.config.system.networkServe ? window.siyuan.config.localIPs[0] : "127.0.0.1"}:6806" class="b3-button b3-button--outline fn__size200 fn__flex-center">
         <svg><use xlink:href="#iconLink"></use></svg>${window.siyuan.languages.about4}
     </button>
-</div>
-<div class="b3-label fn__flex">
+</label>
+<label class="b3-label fn__flex">
     <div class="fn__flex-1">
         ${window.siyuan.languages.about5}
         <div class="b3-label__text">${window.siyuan.languages.about6}</div>
@@ -60,7 +60,7 @@ export const about = {
     <button class="fn__flex-center b3-button b3-button--outline fn__size200" id="authCode">
         <svg><use xlink:href="#iconLock"></use></svg>${window.siyuan.languages.config}
     </button>
-</div>
+</label>
 <div class="b3-label fn__flex">
     <div class="fn__flex-1 fn__flex-center">
         ${window.siyuan.languages.dataRepoKey}
@@ -91,7 +91,7 @@ export const about = {
         </button>
     </div>
 </div>
-<div class="fn__flex b3-label">
+<label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.systemLog}
         <div class="b3-label__text">${window.siyuan.languages.systemLogTip}</div>
@@ -100,8 +100,8 @@ export const about = {
     <button id="exportLog" class="b3-button b3-button--outline fn__size200 fn__flex-center">
         <svg><use xlink:href="#iconUpload"></use></svg>${window.siyuan.languages.export}
     </button>
-</div>
-<div class="fn__flex b3-label">
+</label>
+<label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.currentVer} v${Constants.SIYUAN_VERSION}
         <span id="isInsider"></span>
@@ -117,8 +117,8 @@ export const about = {
             <svg><use xlink:href="#iconQuit"></use></svg>${window.siyuan.languages.safeQuit}
         </button>
     </div>
-</div>
-<div class="fn__flex b3-label${isBrowser() ? " fn__none" : ""}">
+</label>
+<label class="fn__flex b3-label${isBrowser() ? " fn__none" : ""}">
     <div class="fn__flex-1">
         <div class="fn__flex">
             ${window.siyuan.languages.about7}
@@ -129,7 +129,7 @@ export const about = {
     </div>
     <div class="fn__space"></div>
     <select id="workspaceDir" class="fn__flex-center b3-select fn__size200"></select>
-</div>
+</label>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.about13}
diff --git a/app/src/config/appearance.ts b/app/src/config/appearance.ts
index fb0ac31f5..a064a5488 100644
--- a/app/src/config/appearance.ts
+++ b/app/src/config/appearance.ts
@@ -32,7 +32,7 @@ export const appearance = {
         <a href="javascript:void(0)" ${isBrowser() ? " class='fn__none'" : ""} id="appearanceOpenTheme" class="fn__flex-center">${window.siyuan.languages.appearance9}</a>
     </div>
     <div class="fn__hr"></div>
-    <div class="fn__flex">
+    <label class="fn__flex">
         <div class="fn__flex-center fn__flex-1 ft__on-surface">
             ${window.siyuan.languages.theme11}
         </div>
@@ -40,9 +40,9 @@ export const appearance = {
         <select class="b3-select fn__flex-center fn__size200" id="themeLight">
           ${genOptions(window.siyuan.config.appearance.lightThemes, window.siyuan.config.appearance.themeLight)}
         </select>
-    </div>
+    </label>
     <div class="fn__hr"></div>
-    <div class="fn__flex">
+    <label class="fn__flex">
         <div class="fn__flex-center fn__flex-1 ft__on-surface">
             ${window.siyuan.languages.theme12}
         </div>
@@ -50,7 +50,7 @@ export const appearance = {
         <select class="b3-select fn__flex-center fn__size200" id="themeDark">
            ${genOptions(window.siyuan.config.appearance.darkThemes, window.siyuan.config.appearance.themeDark)}
         </select>
-    </div>
+    </label>
 </div>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
@@ -66,27 +66,27 @@ export const appearance = {
         ${genOptions(window.siyuan.config.appearance.icons, window.siyuan.config.appearance.icon)}
     </select>
 </label>
-<label class="b3-label fn__flex"><div class="fn__block">
+<div class="b3-label fn__flex"><div class="fn__block">
     <div>
         ${window.siyuan.languages.appearance1}
     </div>
     <div class="fn__hr"></div>
-    <div class="fn__flex">
+    <label class="fn__flex">
         <div class="fn__flex-center fn__flex-1 ft__on-surface">${window.siyuan.languages.appearance2}</div>
         <span class="fn__space"></span>
         <select id="codeBlockThemeLight" class="b3-select fn__size200">
             ${genOptions(Constants.SIYUAN_CONFIG_APPEARANCE_LIGHT_CODE, window.siyuan.config.appearance.codeBlockThemeLight)}
         </select>
-    </div>
+    </label>
     <div class="fn__hr"></div>
-    <div class="fn__flex">
+    <label class="fn__flex">
         <div class="fn__flex-center fn__flex-1 ft__on-surface">${window.siyuan.languages.appearance3}</div>
         <span class="fn__space"></span>
         <select id="codeBlockThemeDark" class="b3-select fn__size200">
             ${genOptions(Constants.SIYUAN_CONFIG_APPEARANCE_DARK_CODE, window.siyuan.config.appearance.codeBlockThemeDark)}
         </select>
-    </div>
-</div></label>
+    </label>
+</div></div>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.language}
@@ -95,28 +95,26 @@ export const appearance = {
     <span class="fn__space"></span>
     <select id="lang" class="b3-select fn__flex-center fn__size200">${genOptions(window.siyuan.config.langs, window.siyuan.config.appearance.lang)}</select>
 </label>
-<div class="b3-label${isBrowser() ? " fn__none" : ""}">
-    <div class="fn__block fn__flex">
-        <div class="fn__flex-1">
-            ${window.siyuan.languages.customEmoji}
-            <div class="b3-label__text">${window.siyuan.languages.customEmojiTip}</div>
-        </div>
-        <span class="fn__space"></span>
-        <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="appearanceRefresh">
-            <svg><use xlink:href="#iconRefresh"></use></svg>
-            ${window.siyuan.languages.refresh}
-        </button>
+<label class="b3-label${isBrowser() ? " fn__none" : " fn__flex"}">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.customEmoji}
+        <div class="b3-label__text">${window.siyuan.languages.customEmojiTip}</div>
     </div>
-</div>
+    <span class="fn__space"></span>
+    <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="appearanceRefresh">
+        <svg><use xlink:href="#iconRefresh"></use></svg>
+        ${window.siyuan.languages.refresh}
+    </button>
+</label>
 <div class="b3-label">
-    <div class="fn__block fn__flex">
+    <label class="fn__block fn__flex">
         <div class="fn__flex-1">
             ${window.siyuan.languages.theme13} <b id="appearanceCustomName">${window.siyuan.config.appearance.mode === 0 ? window.siyuan.config.appearance.themeLight : window.siyuan.config.appearance.themeDark}</b>
             <div class="b3-label__text">${window.siyuan.languages.theme14}</div>
         </div>
         <span class="fn__space"></span>
         <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="appearanceCustom">${window.siyuan.config.appearance.customCSS ? window.siyuan.languages.close : window.siyuan.languages.open}</button>
-    </div>
+    </label>
     <div id="appearanceCustomPanel"></div>
 </div>
 <label class="b3-label fn__flex">
diff --git a/app/src/config/editor.ts b/app/src/config/editor.ts
index 84b63577d..cba708db3 100644
--- a/app/src/config/editor.ts
+++ b/app/src/config/editor.ts
@@ -201,12 +201,14 @@ export const editor = {
         <input class="b3-slider fn__size200" id="codeTabSpaces" max="8" min="0" step="2" type="range" value="${window.siyuan.config.editor.codeTabSpaces}">
     </div>
 </label>
-<div class="b3-label">
-    ${window.siyuan.languages.katexMacros}
-    <div class="b3-label__text">${window.siyuan.languages.katexMacrosTip}</div>
-    <div class="fn__hr"></div>
-    <textarea class="b3-text-field fn__block" id="katexMacros">${window.siyuan.config.editor.katexMacros}</textarea>
-</div>`;
+<label class="b3-label fn__flex">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.katexMacros}
+        <div class="b3-label__text">${window.siyuan.languages.katexMacrosTip}</div>
+        <div class="fn__hr"></div>
+        <textarea class="b3-text-field fn__block" id="katexMacros">${window.siyuan.config.editor.katexMacros}</textarea>
+    </div>
+</label>`;
     },
     bindEvent: () => {
         const fontFamilyElement = editor.element.querySelector("#fontFamily") as HTMLSelectElement;
diff --git a/app/src/config/image.ts b/app/src/config/image.ts
index 8b9b9862b..a31256300 100644
--- a/app/src/config/image.ts
+++ b/app/src/config/image.ts
@@ -13,14 +13,14 @@ export const image = {
     genHTML: () => {
         return `
 <div class="b3-label config-assets">
-    <div class="fn__flex">
+    <label class="fn__flex">
         ${window.siyuan.languages.clearUnused}
         <div class="fn__flex-1"></div>
         <button id="removeAll" class="b3-button b3-button--outline fn__flex-center fn__size200">
             <svg class="svg"><use xlink:href="#iconTrashcan"></use></svg>
             ${window.siyuan.languages.delete}
         </button>
-    </div>
+    </label>
     <div class="fn__hr"></div>
     <ul class="b3-list b3-list--background" id="assetsList">
         <li class="ft__center" style="list-style: none"><img src="/stage/loading-pure.svg"></li>
diff --git a/app/src/config/keymap.ts b/app/src/config/keymap.ts
index a4f6e6844..16c4556f5 100644
--- a/app/src/config/keymap.ts
+++ b/app/src/config/keymap.ts
@@ -11,7 +11,7 @@ export const keymap = {
         let html = "";
         Object.keys(keymap).forEach(key => {
             if (window.siyuan.languages[key]) {
-                html += `<li class="b3-list-item b3-list-item--hide-action">
+                html += `<label class="b3-list-item b3-list-item--hide-action">
     <span class="b3-list-item__text">${window.siyuan.languages[key]}</span>
     <span class="fn__space fn__flex-1"></span>
     <input data-key="${keys + Constants.ZWSP + key}" data-value="${keymap[key].custom}" data-default="${keymap[key].default}" class="b3-text-field" value="${updateHotkeyTip(keymap[key].custom)}" spellcheck="false">
@@ -21,21 +21,21 @@ export const keymap = {
     <span data-type="clear" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.remove}">
         <svg><use xlink:href="#iconTrashcan"></use></svg>
     </span>
-</li>`;
+</label>`;
             }
         });
         return html;
     },
     genHTML() {
-        return `<div class="fn__flex b3-label">
+        return `<label class="fn__flex b3-label">
     <span class="fn__flex-center">${window.siyuan.languages.keymapTip}</span>
     <span class="fn__flex-1"></span>
     <button id="keymapRefreshBtn" class="b3-button b3-button--outline fn__flex-center fn__size200">
         <svg><use xlink:href="#iconRefresh"></use></svg>
         ${window.siyuan.languages.refresh}
     </button>
-</div>
-<div class="fn__flex b3-label">
+</label>
+<label class="fn__flex b3-label">
     <span class="fn__flex-center">${window.siyuan.languages.keymapTip2}</span>
     <span class="fn__flex-1"></span>
     <span class="fn__space"></span>
@@ -43,7 +43,7 @@ export const keymap = {
         <svg><use xlink:href="#iconUndo"></use></svg>
         ${window.siyuan.languages.reset}
     </button>
-</div>
+</label>
 <div class="b3-label file-tree config-keymap" id="keymapList">
     <div class="fn__flex">
         <label class="b3-form__icon fn__flex-1">
@@ -62,63 +62,63 @@ export const keymap = {
         </button>
     </div>
     <div class="fn__hr"></div>
-    <ul class="b3-list b3-list--border b3-list--background">
-        <li class="b3-list-item toggle">
+    <div class="b3-list b3-list--border b3-list--background">
+        <div class="b3-list-item toggle">
             <span class="b3-list-item__toggle"><svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg></span>
             <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.general}</span>
-        </li>
-        <ul class="fn__none">${keymap._genItem(window.siyuan.config.keymap.general, "general")}</ul>
-    </ul>
-    <ul class="b3-list b3-list--border b3-list--background">
-        <li class="b3-list-item toggle">
+        </div>
+        <div class="fn__none">${keymap._genItem(window.siyuan.config.keymap.general, "general")}</div>
+    </div>
+    <div class="b3-list b3-list--border b3-list--background">
+        <div class="b3-list-item toggle">
             <span class="b3-list-item__toggle">
                 <svg class="b3-list-item__arrow b3-list-item__arrow--open"><use xlink:href="#iconRight"></use></svg>
             </span>
             <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.editor}</span>
-        </li>
-        <ul>
-            <li class="b3-list-item toggle">
+        </div>
+        <div>
+            <label class="b3-list-item toggle">
                 <span class="b3-list-item__toggle">
                     <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
                 </span>
                 <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.general}</span>
-            </li>
-            <ul class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.general, "editor" + Constants.ZWSP + "general")}</ul>
-            <li class="b3-list-item toggle">
+            </label>
+            <div class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.general, "editor" + Constants.ZWSP + "general")}</div>
+            <label class="b3-list-item toggle">
                 <span class="b3-list-item__toggle">
                     <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
                 </span>
                 <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.insert}</span>
-            </li>
-            <ul class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.insert, "editor" + Constants.ZWSP + "insert")}</ul>
-            <li class="b3-list-item toggle">
+            </label>
+            <div class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.insert, "editor" + Constants.ZWSP + "insert")}</div>
+            <label class="b3-list-item toggle">
                 <span class="b3-list-item__toggle">
                     <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
                 </span>
                 <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.headings}</span>
-            </li>
-            <ul class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.heading, "editor" + Constants.ZWSP + "heading")}</ul>
-            <li class="b3-list-item toggle">
+            </label>
+            <div class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.heading, "editor" + Constants.ZWSP + "heading")}</div>
+            <label class="b3-list-item toggle">
                 <span class="b3-list-item__toggle">
                     <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
                 </span>
                 <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.list1}</span>
-            </li>
-            <ul class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.list, "editor" + Constants.ZWSP + "list")}</ul>
-            <li class="b3-list-item toggle">
+            </label>
+            <div class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.list, "editor" + Constants.ZWSP + "list")}</div>
+            <label class="b3-list-item toggle">
                 <span class="b3-list-item__toggle">
                     <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
                 </span>
                 <span class="b3-list-item__text ft__on-surface">${window.siyuan.languages.table}</span>
-            </li>
-            <ul class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.table, "editor" + Constants.ZWSP + "table")}</ul>
-        </ul>
-    </ul>
+            </label>
+            <div class="fn__none">${keymap._genItem(window.siyuan.config.keymap.editor.table, "editor" + Constants.ZWSP + "table")}</div>
+        </div>
+    </div>
 </div>`;
     },
     _setkeymap() {
         const data: IKeymap = Object.assign({}, Constants.SIYUAN_KEYMAP);
-        keymap.element.querySelectorAll("ul input").forEach((item) => {
+        keymap.element.querySelectorAll("label.b3-list-item input").forEach((item) => {
             const keys = item.getAttribute("data-key").split(Constants.ZWSP);
             if (keys[0] === "general") {
                 data[keys[0]][keys[1]].custom = item.getAttribute("data-value");
@@ -256,7 +256,7 @@ export const keymap = {
             }
         });
         let timeout: number;
-        keymapListElement.querySelectorAll("ul input").forEach(item => {
+        keymapListElement.querySelectorAll("label.b3-list-item input").forEach(item => {
             item.addEventListener("keydown", function (event: KeyboardEvent) {
                 event.stopPropagation();
                 event.preventDefault();
@@ -280,7 +280,7 @@ export const keymap = {
                         showMessage(tip + "] " + window.siyuan.languages.invalid);
                         return;
                     }
-                    const hasConflict = Array.from(keymap.element.querySelectorAll("ul input")).find(inputItem => {
+                    const hasConflict = Array.from(keymap.element.querySelectorAll("label.b3-list-item input")).find(inputItem => {
                         if (!inputItem.isSameNode(this) && inputItem.getAttribute("data-value") === keymapStr) {
                             const inputValueList = inputItem.getAttribute("data-key").split(Constants.ZWSP);
                             if (inputValueList[1] === "list") {
diff --git a/app/src/config/repos.ts b/app/src/config/repos.ts
index 84b0c12d4..fb3d90e5a 100644
--- a/app/src/config/repos.ts
+++ b/app/src/config/repos.ts
@@ -118,13 +118,13 @@ export const repos = {
 </label>
 ${syncModeHTML}
 <div class="b3-label">
-    <div class="fn__flex">
+    <label class="fn__flex">
         <div class="fn__flex-center">${window.siyuan.languages.cloudSyncDir}</div>
         <div class="fn__flex-1"></div>
         <button class="b3-button b3-button--outline fn__flex-center${isMobile() ? "" : " fn__size200"}" data-type="config">
             <svg><use xlink:href="#iconSettings"></use></svg>${window.siyuan.languages.config}
         </button>
-    </div>
+    </label>
     <div id="reposCloudSyncList" class="fn__none config-repos__sync"><img style="margin: 0 auto;display: block;width: 64px;height: 100%" src="/stage/loading-pure.svg"></div>
 </div>
 <div class="b3-label fn__flex">