:art: fix https://github.com/siyuan-note/siyuan/issues/3048

app/src/asset/renderAssets.ts

@@ -0,0 +1,15 @@
+import {Constants} from "../constants";
+import {pathPosix} from "../util/pathName";
+
+export const renderAssetsPreview = (pathString: string) => {
+    const type = pathPosix().extname(pathString).toLowerCase()
+    if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
+        return `<img style="max-height: 100%" src="${pathString}">`;
+    } else if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
+        return `<audio style="max-width: 100%" controls="controls" src="${pathString}"></audio>`;
+    } else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
+        return `<video style="max-width: 100%" controls="controls" src="${pathString}"></video>`;
+    } else {
+        return "";
+    }
+}

app/src/config/image.ts

@@ -1,12 +1,12 @@
 import {escapeHtml} from "../util/escape";
 import {confirmDialog} from "../dialog/confirmDialog";
-import {Constants} from "../constants";
 import {pathPosix} from "../util/pathName";
 import {isBrowser} from "../util/functions";
 import {hasClosestByClassName} from "../protyle/util/hasClosest";
 import {fetchPost} from "../util/fetch";
 import {getAllModels} from "../layout/getAll";
 import {openBy} from "../editor/util";
+import {renderAssetsPreview} from "../asset/renderAssets";
 
 export const image = {
     element: undefined as Element,
@@ -90,18 +90,8 @@ export const image = {
             const liElement = hasClosestByClassName(event.target as Element, "b3-list-item");
             if (liElement && liElement.getAttribute("data-path") !== assetsListElement.nextElementSibling.getAttribute("data-path")) {
                 const item = liElement.getAttribute("data-path");
-                const type = item.substr(item.lastIndexOf(".")).toLowerCase();
-                const pathString = item;
                 assetsListElement.nextElementSibling.setAttribute("data-path", item);
-                if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
-                    assetsListElement.nextElementSibling.innerHTML = `<img src="${pathString}">`;
-                } else if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
-                    assetsListElement.nextElementSibling.innerHTML = `<audio controls="controls" src="${pathString}"></audio>`;
-                } else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
-                    assetsListElement.nextElementSibling.innerHTML = `<video controls="controls" src="${pathString}"></video>`;
-                } else {
-                    assetsListElement.nextElementSibling.innerHTML = "";
-                }
+                assetsListElement.nextElementSibling.innerHTML = renderAssetsPreview(item);
             }
         });
         fetchPost("/api/asset/getUnusedAssets", {}, response => {

app/src/protyle/toolbar/index.ts

@@ -40,6 +40,7 @@ import {unicode2Emoji} from "../../emoji";
 import {escapeHtml} from "../../util/escape";
 import {hideElements} from "../ui/hideElements";
 import {linkMenu} from "../../menus/protyle";
+import {renderAssetsPreview} from "../../asset/renderAssets";
 
 export class Toolbar {
     public element: HTMLElement;
@@ -1152,21 +1153,38 @@ export class Toolbar {
         }, (response) => {
             let html = "";
             response.data.forEach((item: { hName: string, path: string }, index: number) => {
-                html += `<di data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item.hName}</di>`;
+                html += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item.hName}</div>`;
             });
             this.subElement.style.width = "";
             this.subElement.style.padding = "";
-            this.subElement.innerHTML = `<div class="fn__flex-column" style="max-height:50vh"><input style="margin: 4px 8px 8px 8px" class="b3-text-field"/>
-<div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div>
+            this.subElement.innerHTML = `<div style="max-height:50vh" class="fn__flex">
+<div class="fn__flex-column" style="min-width: 260px">
+    <input style="margin: 4px 8px 8px 8px" class="b3-text-field"/>
+    <div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div>
+</div>
+<div style="width: 260px;display: flex;padding: 8px;overflow: auto;justify-content: center;align-items: center;"></div>
 </div>`;
-
+            const listElement = this.subElement.querySelector(".b3-list");
+            listElement.addEventListener("mouseover", (event) => {
+                const target = event.target as HTMLElement;
+                const hoverItemElement = hasClosestByClassName(target, "b3-list-item");
+                if (!hoverItemElement) {
+                    return;
+                }
+                previewElement.innerHTML = renderAssetsPreview(hoverItemElement.getAttribute("data-value"))
+            })
+            const previewElement = this.subElement.firstElementChild.lastElementChild
+            previewElement.innerHTML = renderAssetsPreview(listElement.firstElementChild.getAttribute("data-value"));
             const inputElement = this.subElement.querySelector("input");
             inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
                 event.stopPropagation();
                 if (event.isComposing) {
                     return;
                 }
-                upDownHint(this.subElement.lastElementChild.lastElementChild as HTMLElement, event);
+                const currentElement = upDownHint(listElement, event);
+                if (currentElement) {
+                    previewElement.innerHTML = renderAssetsPreview(currentElement.getAttribute("data-value"))
+                }
                 if (event.key === "Enter") {
                     hintRenderAssets(this.subElement.querySelector(".b3-list-item--focus").getAttribute("data-value"), protyle);
                     // 空行处插入 mp3 会多一个空的 mp3 块
@@ -1185,16 +1203,17 @@ export class Toolbar {
                     response.data.forEach((item: { path: string, hName: string }, index: number) => {
                         searchHTML += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item.hName}</div>`;
                     });
-                    this.subElement.firstElementChild.lastElementChild.innerHTML = searchHTML;
+                    listElement.innerHTML = searchHTML;
+                    previewElement.innerHTML = renderAssetsPreview(listElement.firstElementChild.getAttribute("data-value"));
                 });
             });
             this.subElement.lastElementChild.addEventListener("click", (event) => {
                 const target = event.target as HTMLElement;
-                const listElement = hasClosestByClassName(target, "b3-list-item");
-                if (!listElement) {
+                const listItemElement = hasClosestByClassName(target, "b3-list-item");
+                if (!listItemElement) {
                     return;
                 }
-                hintRenderAssets(listElement.getAttribute("data-value"), protyle);
+                hintRenderAssets(listItemElement.getAttribute("data-value"), protyle);
             });
             const rangePosition = getSelectionPosition(nodeElement, range);
             this.subElement.classList.remove("fn__none");

app/src/util/history.ts

@@ -7,6 +7,7 @@ import {unicode2Emoji} from "../emoji";
 import {escapeHtml} from "./escape";
 import {isMobile} from "./functions";
 import {hasClosestByClassName} from "../protyle/util/hasClosest";
+import {renderAssetsPreview} from "../asset/renderAssets";
 
 const renderDoc = (notebook: INotebook, element: HTMLElement) => {
     if (!notebook || !notebook.id) {
@@ -87,16 +88,7 @@ const renderAssets = (element: HTMLElement) => {
                 logsHTML += "</ul>";
 
                 if (index === 0) {
-                    const type = item.items[0].title.substr(item.items[0].title.lastIndexOf(".")).toLowerCase();
-                    if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
-                        element.lastElementChild.innerHTML = `<img src="${item.items[0].path}">`;
-                    } else if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
-                        element.lastElementChild.innerHTML = `<audio controls="controls" src="${item.items[0].path}"></audio>`;
-                    } else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
-                        element.lastElementChild.innerHTML = `<video controls="controls" src="${item.items[0].path}"></video>`;
-                    } else {
-                        element.lastElementChild.innerHTML = item.items[0].path;
-                    }
+                    element.lastElementChild.innerHTML = renderAssetsPreview(item.items[0].path);
                 }
             }
         });
@@ -394,16 +386,7 @@ export const openHistory = () => {
             } else if (target.classList.contains("b3-list-item") && (type === "assets" || type === "doc")) {
                 const dataPath = target.getAttribute("data-path");
                 if (type === "assets") {
-                    const type = dataPath.substr(dataPath.lastIndexOf(".")).toLowerCase();
-                    if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
-                        firstPanelElement.nextElementSibling.lastElementChild.innerHTML = `<img src="${dataPath}">`;
-                    } else if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
-                        firstPanelElement.nextElementSibling.lastElementChild.innerHTML = `<audio controls="controls" src="${dataPath}"></audio>`;
-                    } else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
-                        firstPanelElement.nextElementSibling.lastElementChild.innerHTML = `<video controls="controls" src="${dataPath}"></video>`;
-                    } else {
-                        firstPanelElement.nextElementSibling.lastElementChild.innerHTML = dataPath;
-                    }
+                    firstPanelElement.nextElementSibling.lastElementChild.innerHTML = renderAssetsPreview(dataPath);
                 } else if (type === "doc") {
                     fetchPost("/api/history/getDocHistoryContent", {
                         historyPath: dataPath

app/src/util/upDownHint.ts

@@ -19,6 +19,7 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent) => {
             listElement.scrollTop > currentHintElement.offsetTop) {
             listElement.scrollTop = currentHintElement.offsetTop - listElement.clientHeight + currentHintElement.clientHeight;
         }
+        return currentHintElement;
     } else if (event.key === "ArrowUp") {
         event.preventDefault();
         event.stopPropagation();
@@ -38,5 +39,6 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent) => {
             listElement.scrollTop > currentHintElement.offsetTop - currentHintElement.clientHeight * 2) {
             listElement.scrollTop = currentHintElement.offsetTop - currentHintElement.clientHeight * 2;
         }
+        return currentHintElement;
     }
 };