:sparkles: https://github.com/siyuan-note/siyuan/issues/8665

app/src/protyle/hint/extend.ts

@@ -317,6 +317,35 @@ export const hintTag = (key: string, protyle: IProtyle): IHintData[] => {
     return [];
 };
 
+export const genHintItemHTML = (item: IBlock) => {
+    let iconHTML;
+    if (item.type === "NodeDocument" && item.ial.icon) {
+        iconHTML = unicode2Emoji(item.ial.icon, "b3-list-item__graphic popover__block", true);
+        iconHTML = iconHTML.replace('popover__block"', `popover__block" data-id="${item.id}"`);
+    } else {
+        iconHTML = `<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type)}"></use></svg>`;
+    }
+    let attrHTML = "";
+    if (item.name) {
+        attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconN"></use></svg><span>${item.name}</span></span><span class="fn__space"></span>`;
+    }
+    if (item.alias) {
+        attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconA"></use></svg><span>${item.alias}</span></span><span class="fn__space"></span>`;
+    }
+    if (item.memo) {
+        attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconM"></use></svg><span>${item.memo}</span></span>`;
+    }
+    if (attrHTML) {
+        attrHTML = `<div class="fn__flex b3-list-item__meta b3-list-item__showall">${attrHTML}</div>`;
+    }
+
+    return `${attrHTML}<div class="b3-list-item__first">
+    ${iconHTML}
+    <span class="b3-list-item__text">${item.content}</span>
+</div>
+<div class="b3-list-item__meta b3-list-item__showall" style="margin-bottom: 4px">${item.hPath}</div>`;
+}
+
 export const hintRef = (key: string, protyle: IProtyle, isQuick = false): IHintData[] => {
     const nodeElement = hasClosestBlock(getEditorRange(protyle.wysiwyg.element).startContainer);
     protyle.hint.genLoading(protyle);
@@ -337,37 +366,13 @@ export const hintRef = (key: string, protyle: IProtyle, isQuick = false): IHintD
             });
         }
         response.data.blocks.forEach((item: IBlock) => {
-            let iconHTML;
-            if (item.type === "NodeDocument" && item.ial.icon) {
-                iconHTML = unicode2Emoji(item.ial.icon, "b3-list-item__graphic popover__block", true);
-                iconHTML = iconHTML.replace('popover__block"', `popover__block" data-id="${item.id}"`);
-            } else {
-                iconHTML = `<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type)}"></use></svg>`;
-            }
-            let attrHTML = "";
-            if (item.name) {
-                attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconN"></use></svg><span>${item.name}</span></span><span class="fn__space"></span>`;
-            }
-            if (item.alias) {
-                attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconA"></use></svg><span>${item.alias}</span></span><span class="fn__space"></span>`;
-            }
-            if (item.memo) {
-                attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconM"></use></svg><span>${item.memo}</span></span>`;
-            }
-            if (attrHTML) {
-                attrHTML = `<div class="fn__flex b3-list-item__meta b3-list-item__showall">${attrHTML}</div>`;
-            }
             let value = `<span data-type="block-ref" data-id="${item.id}" data-subtype="d">${item.name || item.refText}</span>`;
             if (isQuick) {
                 value = `<span data-type="block-ref" data-id="${item.id}" data-subtype="s">${key}</span>`;
             }
             dataList.push({
                 value,
-                html: `${attrHTML}<div class="b3-list-item__first">
-    ${iconHTML}
-    <span class="b3-list-item__text">${item.content}</span>
-</div>
-<div class="b3-list-item__meta b3-list-item__showall" style="margin-bottom: 4px">${item.hPath}</div>`,
+                html: genHintItemHTML(item),
             });
         });
         if (isQuick) {
@@ -401,33 +406,9 @@ export const hintEmbed = (key: string, protyle: IProtyle): IHintData[] => {
     }, (response) => {
         const dataList: IHintData[] = [];
         response.data.blocks.forEach((item: IBlock) => {
-            let iconHTML;
-            if (item.type === "NodeDocument" && item.ial.icon) {
-                iconHTML = unicode2Emoji(item.ial.icon, "b3-list-item__graphic popover__block", true);
-                iconHTML = iconHTML.replace('popover__block"', `popover__block" data-id="${item.id}"`);
-            } else {
-                iconHTML = `<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type)}"></use></svg>`;
-            }
-            let attrHTML = "";
-            if (item.name) {
-                attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconN"></use></svg>${item.name}</span><span class="fn__space"></span>`;
-            }
-            if (item.alias) {
-                attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconA"></use></svg>${item.alias}</span><span class="fn__space"></span>`;
-            }
-            if (item.memo) {
-                attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconM"></use></svg>${item.memo}</span>`;
-            }
-            if (attrHTML) {
-                attrHTML = `<div class="fn__flex b3-list-item__meta b3-list-item__showall">${attrHTML}</div>`;
-            }
             dataList.push({
                 value: `{{select * from blocks where id='${item.id}'}}`,
-                html: `${attrHTML}<div class="b3-list-item__first">
-    ${iconHTML}
-    <span class="b3-list-item__text">${item.content}</span>
-</div>
-<div class="b3-list-item__meta b3-list-item__showall" style="margin-bottom: 4px">${item.hPath}</div>`,
+                html: genHintItemHTML(item),
             });
         });
         if (dataList.length === 0) {

app/src/protyle/hint/index.ts

@@ -8,7 +8,7 @@ import {
     getSelectionOffset,
     getSelectionPosition
 } from "../util/selection";
-import {hintEmbed, hintRef, hintSlash} from "./extend";
+import {genHintItemHTML, hintEmbed, hintRef, hintSlash} from "./extend";
 import {getSavePath} from "../../util/newFile";
 import {upDownHint} from "../../util/upDownHint";
 import {setPosition} from "../../util/setPosition";
@@ -238,7 +238,7 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
         }
     }
 
-    public getHTMLByData(data: IHintData[], hasSearch = false) {
+    private getHTMLByData(data: IHintData[], hasSearch = false) {
         let hintsHTML = "";
         if (hasSearch) {
             hintsHTML = '<input style="margin: 0 4px 4px 4px" class="b3-text-field"><div style="flex: 1;overflow:auto;">';
@@ -338,39 +338,17 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
             let searchHTML = "";
             if (response.data.newDoc) {
                 const blockRefText = `((newFile "${oldValue}"${Constants.ZWSP}'${response.data.k}${Lute.Caret}'))`;
-                searchHTML += `<button class="b3-list-item b3-list-item--two fn__block${response.data.blocks.length === 0 ? " b3-list-item--focus" : ""}" data-value="${encodeURIComponent(blockRefText)}"><div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconFile"></use></svg>
+                searchHTML += `<button style="width: calc(100% - 16px)" class="b3-list-item b3-list-item--two${response.data.blocks.length === 0 ? " b3-list-item--focus" : ""}" data-value="${encodeURIComponent(blockRefText)}"><div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconFile"></use></svg>
 <span class="b3-list-item__text">${window.siyuan.languages.newFile} <mark>${response.data.k}</mark></span></div></button>`;
             }
             response.data.blocks.forEach((item: IBlock, index: number) => {
-                let iconHTML;
-                if (item.type === "NodeDocument" && item.ial.icon) {
-                    iconHTML = unicode2Emoji(item.ial.icon, "b3-list-item__graphic popover__block", true);
-                    iconHTML = iconHTML.replace('popover__block"', `popover__block" data-id="${item.id}"`);
-                } else {
-                    iconHTML = `<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type)}"></use></svg>`;
-                }
-                let attrHTML = "";
-                if (item.name) {
-                    attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconN"></use></svg><span>${item.name}</span></span><span class="fn__space"></span>`;
-                }
-                if (item.alias) {
-                    attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconA"></use></svg><span>${item.alias}</span></span><span class="fn__space"></span>`;
-                }
-                if (item.memo) {
-                    attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconM"></use></svg><span>${item.memo}</span></span>`;
-                }
-                if (attrHTML) {
-                    attrHTML = `<div class="fn__flex b3-list-item__meta b3-list-item__showall">${attrHTML}</div>`;
-                }
                 const blockRefHTML = `<span data-type="block-ref" data-id="${item.id}" data-subtype="s">${oldValue}</span>`;
-                searchHTML += `<button class="b3-list-item b3-list-item--two fn__block${index === 0 ? " b3-list-item--focus" : ""}" data-value="${encodeURIComponent(blockRefHTML)}">${attrHTML}<div class="b3-list-item__first">
-    ${iconHTML}
-    <span class="b3-list-item__text">${item.content}</span>
-</div>
-<div class="b3-list-item__meta b3-list-item__showall" style="margin-bottom: 4px">${item.hPath}</div></button>`;
+                searchHTML += `<button style="width: calc(100% - 16px)" class="b3-list-item b3-list-item--two${index === 0 ? " b3-list-item--focus" : ""}" data-value="${encodeURIComponent(blockRefHTML)}">
+${genHintItemHTML(item)}
+</button>`;
             });
             if (searchHTML === "") {
-                searchHTML = `<button class="b3-list-item b3-list-item--two fn__block" data-value="">${window.siyuan.languages.emptyContent}</button>`;
+                searchHTML = `<button style="width: calc(100% - 16px)" class="b3-list-item b3-list-item--two" data-value="">${window.siyuan.languages.emptyContent}</button>`;
             }
             this.element.lastElementChild.innerHTML = searchHTML;
         });

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

@@ -344,7 +344,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[]) => {
     const style = `style="position:absolute;left: ${cellRect.left}px;top: ${cellRect.top}px;width:${Math.max(cellRect.width, 200)}px;height: ${cellRect.height}px"`;
     const blockElement = hasClosestBlock(cellElements[0]);
     if (type === "block" || type === "text") {
-        html = `<textarea ${style} class="b3-text-field">${cellElements[0].textContent}</textarea>`;
+        html = `<textarea ${style} class="b3-text-field">${cellElements[0].firstElementChild.textContent}</textarea>`;
     } else if (type === "number") {
         html = `<input type="number" value="${cellElements[0].textContent}" ${style} class="b3-text-field">`;
     } else if (["select", "mSelect"].includes(type) && blockElement) {

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

@@ -64,7 +64,7 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                         } else if (cell.valueType === "block") {
                             text = `<span class="av__celltext">${cell.value?.block.content || ""}</span>`;
                             if (cell.value?.block.id) {
-                                text += `<span class="b3-chip b3-chip--small" data-type="block-ref" data-id="${cell.value.block.id}" data-subtype="s">${window.siyuan.languages.openBy}</span>`;
+                                text += `<span class="b3-chip b3-chip--info b3-chip--small" data-type="block-ref" data-id="${cell.value.block.id}" data-subtype="s">${window.siyuan.languages.openBy}</span>`;
                             }
                         } else if (cell.valueType === "number") {
                             text = `<span class="av__celltext">${cell.value?.number.content || ""}</span>`;