🎨 fix https://github.com/siyuan-note/siyuan/issues/10189

app/src/protyle/render/av/asset.ts

@@ -226,8 +226,7 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
         menu.addItem({
             iconHTML: "",
             type: "readonly",
-            label: `<div class="b3-menu__label">${window.siyuan.languages.title}</div>
+            label: `${window.siyuan.languages.title}<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea>`,
-<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea>`,
         });
     } else {
         menu.addItem({
@@ -296,10 +295,10 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
     menu.addItem({
         iconHTML: "",
         type: "readonly",
-        label: `<div class="b3-menu__label">${window.siyuan.languages.link}</div>
+        label: `${window.siyuan.languages.link}
 <textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea>
 <div class="fn__hr"></div>
-<div class="b3-menu__label">${window.siyuan.languages.title}</div>
+${window.siyuan.languages.title}
 <textarea style="width: ${isMobile() ? "200" : "360"}px;margin: 4px 0;" rows="1" class="b3-text-field"></textarea>`,
     });
     const rect = target.getBoundingClientRect();

app/src/protyle/render/av/filter.ts

@@ -270,6 +270,7 @@ export const setFilter = async (options: {
     }
     menu.addItem({
         iconHTML: "",
+        type: "readonly",
         label: `<select style="margin: 4px 0" class="b3-select fn__size200">${selectHTML}</select>`
     });
     if (filterType === "select" || filterType === "mSelect") {
@@ -308,21 +309,25 @@ export const setFilter = async (options: {
         }
         menu.addItem({
             iconHTML: "",
+            type: "readonly",
             label: `<input style="margin: 4px 0" value="${value}" class="b3-text-field fn__size200">`
         });
     } else if (filterType === "number") {
         menu.addItem({
             iconHTML: "",
+            type: "readonly",
             label: `<input style="margin: 4px 0" value="${options.filter.value?.number.isNotEmpty ? options.filter.value.number.content : ""}" class="b3-text-field fn__size200">`
         });
     } else if (["date", "updated", "created"].includes(filterType)) {
         const dateValue = options.filter.value ? options.filter.value[filterType as "date"] : null;
         menu.addItem({
             iconHTML: "",
+            type: "readonly",
             label: `<input style="margin: 4px 0" value="${(dateValue.isNotEmpty || filterType !== "date") ? dayjs(dateValue.content).format("YYYY-MM-DD") : ""}" type="date" max="9999-12-31" class="b3-text-field fn__size200">`
         });
         menu.addItem({
             iconHTML: "",
+            type: "readonly",
             label: `<input style="margin: 4px 0" value="${dateValue.isNotEmpty2 ? dayjs(dateValue.content2).format("YYYY-MM-DD") : ""}" type="date" max="9999-12-31" class="b3-text-field fn__size200">`
         });
     }

app/src/protyle/render/av/openMenuPanel.ts

@@ -117,7 +117,12 @@ export const openMenuPanel = (options: {
                     setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height);
                 }, Constants.TIMEOUT_LOAD);  // 等待加载
             } else if (options.type === "relation") {
-                bindRelationEvent({menuElement, cellElements: options.cellElements});
+                bindRelationEvent({
+                    menuElement,
+                    cellElements: options.cellElements,
+                    protyle: options.protyle,
+                    blockElement: options.blockElement
+                });
             } else if (options.type === "rollup") {
                 bindRollupEvent({protyle: options.protyle, data, menuElement});
             }

app/src/protyle/render/av/relation.ts

@@ -214,11 +214,24 @@ const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string,
     }
 };
 
+const filterItem = (listElement: Element, key: string) => {
+    Array.from(listElement.children).forEach((item: HTMLElement) => {
+        if (item.dataset.id) {
+            if (item.textContent.includes(key)) {
+                item.classList.remove("fn__none");
+            } else {
+                item.classList.add("fn__none")
+            }
+        }
+    })
+}
 export const bindRelationEvent = (options: {
     menuElement: HTMLElement,
+    protyle: IProtyle,
+    blockElement: Element,
     cellElements: HTMLElement[]
 }) => {
-    const hasIds = options.menuElement.textContent.split(",");
+    const hasIds = options.menuElement.firstElementChild.getAttribute("data-cell-ids").split(",");
     fetchPost("/api/av/renderAttributeView", {
         id: options.menuElement.firstElementChild.getAttribute("data-av-id"),
     }, response => {
@@ -247,11 +260,51 @@ export const bindRelationEvent = (options: {
                 html += genSelectItemHTML("unselect", item.id, item.cells[cellIndex].value.isDetached, item.cells[cellIndex].value.block.content || "Untitled");
             }
         });
-        options.menuElement.innerHTML = `<div class="b3-menu__items">${selectHTML || genSelectItemHTML("empty")}
+        options.menuElement.innerHTML = `<div class="fn__flex-column">
-<button class="b3-menu__separator"></button>
+<div class="b3-menu__item fn__flex-column" data-type="nobg">
-${html || genSelectItemHTML("empty")}</div>`;
+    <div class="b3-menu__label">${avData.name}</div>
+    <input class="b3-text-field fn__flex-shrink"/>
+</div>
+<div class="fn__hr"></div>
+<div class="b3-menu__items">
+    ${selectHTML || genSelectItemHTML("empty")}
+    <button class="b3-menu__separator"></button>
+    ${html || genSelectItemHTML("empty")}
+</div>`;
         const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect();
-        setPosition( options.menuElement, cellRect.left, cellRect.bottom, cellRect.height);
+        setPosition(options.menuElement, cellRect.left, cellRect.bottom, cellRect.height);
+        options.menuElement.querySelector(".b3-menu__items .b3-menu__item").classList.add("b3-menu__item--current");
+        const inputElement = options.menuElement.querySelector("input")
+        inputElement.focus();
+        const listElement = options.menuElement.querySelector(".b3-menu__items")
+        inputElement.addEventListener("keydown", (event) => {
+            event.stopPropagation();
+            if (event.isComposing) {
+                return;
+            }
+            upDownHint(listElement, event, "b3-menu__item--current");
+            const currentElement = options.menuElement.querySelector(".b3-menu__item--current") as HTMLElement;
+            if (event.key === "Enter" && currentElement && currentElement.getAttribute("data-type") === "setRelationCell") {
+                setRelationCell(options.protyle, options.blockElement as HTMLElement, currentElement, options.cellElements);
+                event.preventDefault();
+                event.stopPropagation();
+            } else if (event.key === "Escape") {
+                options.menuElement.parentElement.remove();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        })
+        inputElement.addEventListener("input", (event: InputEvent) => {
+            if (event.isComposing) {
+                return;
+            }
+            filterItem(listElement, inputElement.value);
+            event.stopPropagation();
+        })
+        inputElement.addEventListener("compositionend", (event) => {
+            event.stopPropagation();
+            filterItem(listElement, inputElement.value);
+        })
     });
 };
 
@@ -268,7 +321,15 @@ export const getRelationHTML = (data: IAV, cellElements?: HTMLElement[]) => {
         cellElements[0].querySelectorAll("span").forEach((item) => {
             ids += `${item.getAttribute("data-id")},`;
         });
-        return `<span data-av-id="${colRelationData.avID}">${ids}</span>`;
+        return `<div data-av-id="${colRelationData.avID}" data-cell-ids="${ids}" class="fn__flex-column">
+<div class="b3-menu__item fn__flex-column" data-type="nobg">
+    <div class="b3-menu__label">&nbsp;</div>
+    <input class="b3-text-field fn__flex-shrink"/>
+</div>
+<div class="fn__hr"></div>
+<div class="b3-menu__items">
+    <img style="margin: 0 auto;display: block;width: 64px;height: 64px" src="/stage/loading-pure.svg">
+</div>`;
     } else {
         return "";
     }
@@ -320,6 +381,7 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
                 separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty"));
             }
         }
+        menuElement.firstElementChild.classList.add("b3-menu__item--current")
     }
     updateCellsValue(protyle, nodeElement, newValue, cellElements);
 };

app/src/util/upDownHint.ts

@@ -1,3 +1,7 @@
+const isNormalItem = (currentHintElement: HTMLElement, className: string) => {
+    return currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className)
+}
+
 export const upDownHint = (listElement: Element, event: KeyboardEvent, classActiveName = "b3-list-item--focus") => {
     let currentHintElement: HTMLElement = listElement.querySelector("." + classActiveName);
     if (!currentHintElement) {
@@ -10,15 +14,13 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent, classActi
         currentHintElement.classList.remove(classActiveName);
 
         currentHintElement = currentHintElement.nextElementSibling as HTMLElement;
-        while (currentHintElement &&
+        while (currentHintElement && isNormalItem(currentHintElement, className)) {
-        (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) {
             currentHintElement = currentHintElement.nextElementSibling as HTMLElement;
         }
 
         if (!currentHintElement) {
             currentHintElement = listElement.children[0] as HTMLElement;
-            while (currentHintElement &&
+            while (currentHintElement && isNormalItem(currentHintElement, className)) {
-            (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) {
                 currentHintElement = currentHintElement.nextElementSibling as HTMLElement;
             }
         }
@@ -37,8 +39,7 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent, classActi
         currentHintElement.classList.remove(classActiveName);
 
         currentHintElement = currentHintElement.previousElementSibling as HTMLElement;
-        while (currentHintElement &&
+        while (currentHintElement && isNormalItem(currentHintElement, className)) {
-        (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) {
             currentHintElement = currentHintElement.previousElementSibling as HTMLElement;
         }
 
@@ -64,8 +65,7 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent, classActi
         event.stopPropagation();
         currentHintElement.classList.remove(classActiveName);
         currentHintElement = listElement.children[0] as HTMLElement;
-        while (currentHintElement &&
+        while (currentHintElement && isNormalItem(currentHintElement, className)) {
-        (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) {
             currentHintElement = currentHintElement.nextElementSibling as HTMLElement;
         }
         if (!currentHintElement) {
@@ -79,8 +79,7 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent, classActi
         event.stopPropagation();
         currentHintElement.classList.remove(classActiveName);
         currentHintElement = listElement.children[listElement.children.length - 1] as HTMLElement;
-        while (currentHintElement &&
+        while (currentHintElement && isNormalItem(currentHintElement, className)) {
-        (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) {
             currentHintElement = currentHintElement.previousElementSibling as HTMLElement;
         }
         if (!currentHintElement) {