From 8844565d2c62e0a4347f7b568de1cfc3d6bd3a79 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sun, 18 Feb 2024 17:11:30 +0800
Subject: [PATCH] :lipstick: fix
 https://github.com/siyuan-note/siyuan/issues/10371

---
 app/src/config/account.ts            |   4 +-
 app/src/protyle/header/Background.ts | 110 ++++++++++++++-------------
 2 files changed, 61 insertions(+), 53 deletions(-)

diff --git a/app/src/config/account.ts b/app/src/config/account.ts
index c12859a96..269f4fc02 100644
--- a/app/src/config/account.ts
+++ b/app/src/config/account.ts
@@ -132,11 +132,11 @@ ${renewHTML}
             </button>
             <span class="fn__flex-1"></span>
             <button class="b3-button b3-button--cancel b3-tooltips b3-tooltips__n" id="refresh" aria-label="${window.siyuan.languages.refresh}">
-                <svg><use xlink:href="#iconRefresh"></use></svg>
+                <svg style="margin-right: 0"><use xlink:href="#iconRefresh"></use></svg>
             </button>
         </div>
         <div class="fn__hr--b"></div>
-        <div class="fn__flex">
+        <div class="fn__flex">  
             <label>
                 ${window.siyuan.languages.accountDisplayTitle}
                 <input class="b3-switch fn__flex-center" id="displayTitle" type="checkbox"${window.siyuan.config.account.displayTitle ? " checked" : ""}/>
diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts
index 5c8a3735b..cee3debb3 100644
--- a/app/src/protyle/header/Background.ts
+++ b/app/src/protyle/header/Background.ts
@@ -15,6 +15,7 @@ import {Dialog} from "../../dialog";
 import {Constants} from "../../constants";
 import {assetMenu} from "../../menus/protyle";
 import {previewImage} from "../preview/image";
+import {MenuItem} from "../../menus/Menu";
 
 const bgs = [
     "background:radial-gradient(black 3px, transparent 4px),radial-gradient(black 3px, transparent 4px),linear-gradient(#fff 4px, transparent 0),linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),#fff;background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;",
@@ -480,64 +481,71 @@ export class Background {
         }, (response) => {
             let html = "";
             response.data.tags.forEach((item: string, index: number) => {
-                html += `<div class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item}</div>`;
+                html += `<div class="b3-list-item b3-list-item--narrow${index === 0 ? " b3-list-item--focus" : ""}">${item}</div>`;
             });
             window.siyuan.menus.menu.remove();
-            window.siyuan.menus.menu.element.lastElementChild.innerHTML = `<div class="fn__flex-column" style="max-height:50vh;margin: 0 -8px"><input style="margin: 0px 8px 4px 8px" class="b3-text-field"/>
-<div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div>
-</div>`;
-
-            const listElement = window.siyuan.menus.menu.element.querySelector(".b3-list--background");
-            const inputElement = window.siyuan.menus.menu.element.querySelector("input");
-            inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
-                event.stopPropagation();
-                if (event.isComposing) {
-                    return;
-                }
-                upDownHint(listElement, event);
-                if (event.key === "Enter") {
-                    const currentElement = listElement.querySelector(".b3-list-item--focus");
-                    if (currentElement) {
-                        this.addTags(currentElement.textContent, protyle);
-                    } else {
-                        this.addTags(inputElement.value, protyle);
-                    }
-                    window.siyuan.menus.menu.remove();
-                } else if (event.key === "Escape") {
-                    window.siyuan.menus.menu.remove();
-                }
-            });
-            inputElement.addEventListener("input", (event) => {
-                event.stopPropagation();
-                fetchPost("/api/search/searchTag", {
-                    k: inputElement.value,
-                }, (response) => {
-                    let searchHTML = "";
-                    let hasKey = false;
-                    response.data.tags.forEach((item: string) => {
-                        searchHTML += `<div class="b3-list-item">${item}</div>`;
-                        if (item === `<mark>${response.data.k}</mark>`) {
-                            hasKey = true;
+            window.siyuan.menus.menu.append(new MenuItem({
+                iconHTML: "",
+                type: "readonly",
+                label: `<div class="fn__flex-column" style="max-height: calc(80vh - 8px)">
+    <input style="margin: 4px 0" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.anchor}">
+    <div class="b3-menu__separator"></div>
+    <div class="b3-list fn__flex-1 b3-list--background">${html}</div>
+</div>`,
+                bind: (element) => {
+                    const inputElement = element.querySelector("input");
+                    const listElement = element.querySelector(".b3-list--background");
+                    inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
+                        event.stopPropagation();
+                        if (event.isComposing) {
+                            return;
+                        }
+                        upDownHint(listElement, event);
+                        if (event.key === "Enter") {
+                            const currentElement = listElement.querySelector(".b3-list-item--focus");
+                            if (currentElement) {
+                                this.addTags(currentElement.textContent, protyle);
+                            } else {
+                                this.addTags(inputElement.value, protyle);
+                            }
+                            window.siyuan.menus.menu.remove();
+                        } else if (event.key === "Escape") {
+                            window.siyuan.menus.menu.remove();
                         }
                     });
-                    if (!hasKey && response.data.k) {
-                        searchHTML = `<div class="b3-list-item"><mark>${response.data.k}</mark></div>` + searchHTML;
-                    }
-                    listElement.innerHTML = searchHTML;
-                    listElement.firstElementChild.classList.add("b3-list-item--focus");
-                });
-            });
-            listElement.addEventListener("click", (event) => {
-                const target = event.target as HTMLElement;
-                const listItemElement = hasClosestByClassName(target, "b3-list-item");
-                if (!listItemElement) {
-                    return;
+                    inputElement.addEventListener("input", (event) => {
+                        event.stopPropagation();
+                        fetchPost("/api/search/searchTag", {
+                            k: inputElement.value,
+                        }, (response) => {
+                            let searchHTML = "";
+                            let hasKey = false;
+                            response.data.tags.forEach((item: string) => {
+                                searchHTML += `<div class="b3-list-item b3-list-item--narrow">${item}</div>`;
+                                if (item === `<mark>${response.data.k}</mark>`) {
+                                    hasKey = true;
+                                }
+                            });
+                            if (!hasKey && response.data.k) {
+                                searchHTML = `<div class="b3-list-item b3-list-item--narrow"><mark>${response.data.k}</mark></div>` + searchHTML;
+                            }
+                            listElement.innerHTML = searchHTML;
+                            listElement.firstElementChild.classList.add("b3-list-item--focus");
+                        });
+                    });
+                    listElement.addEventListener("click", (event) => {
+                        const target = event.target as HTMLElement;
+                        const listItemElement = hasClosestByClassName(target, "b3-list-item");
+                        if (!listItemElement) {
+                            return;
+                        }
+                        this.addTags(listItemElement.textContent, protyle);
+                    });
                 }
-                this.addTags(listItemElement.textContent, protyle);
-            });
+            }).element);
             const rect = this.iconElement.nextElementSibling.getBoundingClientRect();
             window.siyuan.menus.menu.popup({x: rect.left, y: rect.top + rect.height});
-            inputElement.focus();
+            window.siyuan.menus.menu.element.querySelector("input").focus();
         });
     }