:art: https://github.com/siyuan-note/siyuan/issues/10396

app/src/search/unRef.ts

@@ -1,7 +1,7 @@
 import {Constants} from "../constants";
 import {fetchPost} from "../util/fetch";
 import {setStorageVal, updateHotkeyTip} from "../protyle/util/compatibility";
-import {getAttr} from "./util";
+import {getArticle, getAttr} from "./util";
 import {MenuItem} from "../menus/Menu";
 import {isPaidUser} from "../util/needSubscribe";
 import {showMessage} from "../dialog/message";
@@ -9,8 +9,11 @@ import {escapeAriaLabel, escapeGreat} from "../util/escape";
 import {getIconByType} from "../editor/getIcon";
 import {unicode2Emoji} from "../emoji";
 import {getDisplayName, getNotebookName} from "../util/pathName";
+import {Protyle} from "../protyle";
+import {App} from "../index";
+import {resize} from "../protyle/util/resize";
 
-export const openSearchUnRef = (element: Element, isStick: boolean) => {
+export const openSearchUnRef = (app: App, element: Element, isStick: boolean) => {
     window.siyuan.menus.menu.remove();
     element.previousElementSibling.previousElementSibling.classList.add("fn__none");
     element.classList.remove("fn__none");
@@ -49,16 +52,22 @@ export const openSearchUnRef = (element: Element, isStick: boolean) => {
     if (element.querySelector("#searchUnRefList").innerHTML !== "") {
         return;
     }
-    const previewElement = element.querySelector("#searchUnRefPreview") as HTMLElement;
+    const edit = new Protyle(app, element.querySelector("#searchUnRefPreview") as HTMLElement, {
+        blockId: "",
+        render: {
+            gutter: true,
+            breadcrumbDocName: true
+        },
+    });
     if (localSearch.layout === 1) {
         if (localSearch.col) {
-            previewElement.style.width = localSearch.col;
-            previewElement.classList.remove("fn__flex-1");
+            edit.protyle.element.style.width = localSearch.col;
+            edit.protyle.element.classList.remove("fn__flex-1");
         }
     } else {
         if (localSearch.row) {
-            previewElement.classList.remove("fn__flex-1");
-            previewElement.style.height = localSearch.row;
+            edit.protyle.element.classList.remove("fn__flex-1");
+            edit.protyle.element.style.height = localSearch.row;
         }
     }
 
@@ -94,12 +103,16 @@ export const openSearchUnRef = (element: Element, isStick: boolean) => {
             documentSelf.onselect = null;
             window.siyuan.storage[Constants.LOCAL_SEARCHUNREF][direction === "lr" ? "col" : "row"] = nextElement[direction === "lr" ? "clientWidth" : "clientHeight"] + "px";
             setStorageVal(Constants.LOCAL_SEARCHUNREF, window.siyuan.storage[Constants.LOCAL_SEARCHUNREF]);
+            if (direction === "lr") {
+                resize(edit.protyle);
+            }
         };
     });
-    getList(element);
+    getList(element, edit);
+    return edit;
 };
 
-const getList = (element: Element, page = 1) => {
+const getList = (element: Element, edit: Protyle, page = 1) => {
     fetchPost("/api/search/listInvalidBlockRefs", {
         page,
     }, (response) => {
@@ -111,7 +124,7 @@ const getList = (element: Element, page = 1) => {
             nextElement.setAttribute("disabled", "disabled");
         }
         let resultHTML = "";
-        response.data.blocks.forEach((item:IBlock, index: number) => {
+        response.data.blocks.forEach((item: IBlock, index: number) => {
             const title = getNotebookName(item.box) + getDisplayName(item.hPath, false);
             resultHTML += `<div data-type="search-item" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}" data-node-id="${item.id}" data-root-id="${item.rootID}">
 <svg class="b3-list-item__graphic"><use xlink:href="#${getIconByType(item.type)}"></use></svg>
@@ -121,13 +134,15 @@ ${getAttr(item)}
 <span class="b3-list-item__meta b3-list-item__meta--ellipsis ariaLabel" aria-label="${escapeAriaLabel(title)}">${escapeGreat(title)}</span>
 </div>`;
         });
-        const previewElement = element.querySelector("#searchUnRefPreview");
         if (response.data.blocks.length > 0) {
-            previewElement.classList.remove("fn__none");
+            edit.protyle.element.classList.remove("fn__none");
             element.querySelector(".search__drag")?.classList.remove("fn__none");
-            renderPreview(previewElement, response.data.blocks[0].id);
+            getArticle({
+                edit,
+                id: response.data.blocks[0].id,
+            });
         } else {
-            previewElement.classList.add("fn__none");
+            edit.protyle.element.classList.add("fn__none");
             element.querySelector(".search__drag")?.classList.add("fn__none");
         }
         element.querySelector("#searchUnRefResult").innerHTML = `${page}/${response.data.pageCount || 1}<span class="fn__space"></span>
@@ -162,7 +177,6 @@ export const renderNextAssetMark = (element: Element) => {
     }
 };
 
-
 export const assetMoreMenu = (target: Element, element: Element, cb: () => void) => {
     if (!window.siyuan.menus.menu.element.classList.contains("fn__none") &&
         window.siyuan.menus.menu.element.getAttribute("data-name") === "searchAssetMore") {

app/src/search/util.ts

@@ -451,6 +451,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
     const localSearch = window.siyuan.storage[Constants.LOCAL_SEARCHASSET] as ISearchAssetOption;
     const assetsElement = element.querySelector("#searchAssets");
     const unRefPanelElement = element.querySelector("#searchUnRefPanel");
+    let unRefEdit: Protyle;
     element.addEventListener("click", (event: MouseEvent) => {
         let target = event.target as HTMLElement;
         const searchPathInputElement = element.querySelector("#searchPathInput");
@@ -637,7 +638,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
                 event.preventDefault();
                 break;
             } else if (target.id === "searchUnRef") {
-                openSearchUnRef(unRefPanelElement, !closeCB);
+               unRefEdit = openSearchUnRef(app, unRefPanelElement, !closeCB);
                 event.stopPropagation();
                 event.preventDefault();
                 break;
@@ -885,7 +886,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
                         newFileByName(app, searchInputElement.value);
                     }
                 } else if (type === "search-item") {
-                    const isAsset = target.dataset.id;
+                    const searchType = target.dataset.id ? "asset" : (unRefPanelElement.classList.contains("fn__none") ? "doc" : "unRef");
                     let isClick = event.detail === 1;
                     let isDblClick = event.detail === 2;
                     /// #if BROWSER
@@ -896,7 +897,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
                     /// #endif
                     if (isClick) {
                         clickTimeout = window.setTimeout(() => {
-                            if (isAsset) {
+                            if (searchType === "asset") {
                                 if (!target.classList.contains("b3-list-item--focus")) {
                                     assetsElement.querySelector(".b3-list-item--focus").classList.remove("b3-list-item--focus");
                                     target.classList.add("b3-list-item--focus");
@@ -922,16 +923,16 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
                                         }
                                     });
                                 } else if (!target.classList.contains("b3-list-item--focus")) {
-                                    searchPanelElement.querySelector(".b3-list-item--focus").classList.remove("b3-list-item--focus");
+                                    (searchType === "doc" ? searchPanelElement : unRefPanelElement).querySelector(".b3-list-item--focus").classList.remove("b3-list-item--focus");
                                     target.classList.add("b3-list-item--focus");
                                     getArticle({
-                                        edit,
+                                        edit: searchType === "doc" ? edit : unRefEdit,
                                         id: target.getAttribute("data-node-id"),
-                                        config,
-                                        value: searchInputElement.value,
+                                        config: searchType === "doc" ? config : null,
+                                        value: searchType === "doc" ? searchInputElement.value : null,
                                     });
                                     searchInputElement.focus();
-                                } else if (target.classList.contains("b3-list-item--focus")) {
+                                } else if (searchType === "doc" && target.classList.contains("b3-list-item--focus")) {
                                     renderNextSearchMark({
                                         edit,
                                         id: target.getAttribute("data-node-id"),
@@ -943,7 +944,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
                         }, Constants.TIMEOUT_DBLCLICK);
                     } else if (isDblClick && isNotCtrl(event)) {
                         clearTimeout(clickTimeout);
-                        if (isAsset) {
+                        if (searchType === "asset") {
                             /// #if !BROWSER
                             showFileInFolder(path.join(window.siyuan.config.system.dataDir, target.lastElementChild.getAttribute("aria-label")));
                             /// #endif
@@ -1121,9 +1122,9 @@ const renderNextSearchMark = (options: {
 
 export const getArticle = (options: {
     id: string,
-    config: ISearchOption,
+    config?: ISearchOption,
     edit: Protyle
-    value: string,
+    value?: string,
 }) => {
     checkFold(options.id, (zoomIn) => {
         options.edit.protyle.scroll.lastScrollTop = 0;
@@ -1134,9 +1135,9 @@ export const getArticle = (options: {
             options.edit.protyle.wysiwyg.renderCustom(response.data.ial);
             fetchPost("/api/filetree/getDoc", {
                 id: options.id,
-                query: options.value,
-                queryMethod: options.config.method,
-                queryTypes: options.config.types,
+                query: options.value || null,
+                queryMethod: options.config?.method || null,
+                queryTypes: options.config?.types || null,
                 mode: zoomIn ? 0 : 3,
                 size: zoomIn ? Constants.SIZE_GET_MAX : window.siyuan.config.editor.dynamicLoadBlocks,
                 zoom: zoomIn,