🎨 https://github.com/siyuan-note/siyuan/pull/14843

app/src/protyle/header/Background.ts

@@ -14,7 +14,7 @@ import {getEventName} from "../util/compatibility";
 import {Dialog} from "../../dialog";
 import {Constants} from "../../constants";
 import {assetMenu} from "../../menus/protyle";
-import {previewImage} from "../preview/image";
+import {previewImages} from "../preview/image";
 import {Menu} from "../../plugin/Menu";
 import {escapeHtml} from "../../util/escape";
 
@@ -217,7 +217,7 @@ export class Background {
                 if (target.tagName === "IMG" && target.parentElement.classList.contains("protyle-background__img")) {
                     const imgSrc = target.getAttribute("src");
                     if (event.detail > 1 && !imgSrc.startsWith("data:image/png;base64")) {
-                        previewImage(imgSrc);
+                        previewImages([imgSrc]);
                         event.preventDefault();
                         event.stopPropagation();
                     }

app/src/protyle/preview/image.ts

@@ -2,11 +2,22 @@ import {Constants} from "../../constants";
 import {addScript} from "../util/addScript";
 import {fetchPost} from "../../util/fetch";
 
-export const previewImage = (src: string) => {
+export const previewImages = (srcList: string[], currentSrc?: string) => {
     addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.11.7`, "protyleViewerScript").then(() => {
         const imagesElement = document.createElement("ul");
-        imagesElement.innerHTML = `<li><img src="${src}"></li>`;
+        let html = "";
+        let initialViewIndex = -1;
+        srcList.forEach((item: string, index: number) => {
+            if (item) {
+                html += `<li><img src="${item}"></li>`;
+                if (currentSrc && initialViewIndex === -1 && (currentSrc.endsWith(encodeURI(item)) || currentSrc.endsWith(item))) {
+                    initialViewIndex = index;
+                }
+            }
+        });
+        imagesElement.innerHTML = html;
         window.siyuan.viewer = new Viewer(imagesElement, {
+            initialViewIndex: currentSrc ? initialViewIndex : 0,
             title: [1, (image: HTMLImageElement, imageData: IObject) => {
                 let name = image.alt;
                 if (!name) {
@@ -41,111 +52,17 @@ export const previewImage = (src: string) => {
     });
 };
 
-export const previewDocImage = (src: string, id: string) => {
+export const previewDocImage = (currentSrc: string, id: string) => {
-    addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.11.7`, "protyleViewerScript").then(() => {
+    fetchPost("/api/asset/getDocImageAssets", {id}, (response) => {
-        fetchPost("/api/asset/getDocImageAssets", {id}, (response) => {
+        previewImages(response.data, currentSrc);
-            const imagesElement = document.createElement("ul");
-            let html = "";
-            let initialViewIndex = -1;
-            response.data.forEach((item: string, index: number) => {
-                if (item) {
-                    html += `<li><img src="${item}"></li>`;
-                    if (initialViewIndex === -1 && (src.endsWith(encodeURI(item)) || src.endsWith(item))) {
-                        initialViewIndex = index;
-                    }
-                }
-            });
-            imagesElement.innerHTML = html;
-            window.siyuan.viewer = new Viewer(imagesElement, {
-                title: [1, (image: HTMLImageElement, imageData: IObject) => {
-                    let name = image.alt;
-                    if (!name) {
-                        name = image.src.substring(image.src.lastIndexOf("/") + 1);
-                    }
-                    name = name.substring(0, name.lastIndexOf(".")).replace(/-\d{14}-\w{7}$/, "");
-                    return `${name} [${imageData.naturalWidth} × ${imageData.naturalHeight}]`;
-                }],
-                button: false,
-                initialViewIndex,
-                transition: false,
-                hidden: function () {
-                    window.siyuan.viewer.destroy();
-                },
-                toolbar: {
-                    zoomIn: true,
-                    zoomOut: true,
-                    oneToOne: true,
-                    reset: true,
-                    prev: true,
-                    play: true,
-                    next: true,
-                    rotateLeft: true,
-                    rotateRight: true,
-                    flipHorizontal: true,
-                    flipVertical: true,
-                    close: function () {
-                        window.siyuan.viewer.destroy();
-                    },
-                },
-            });
-            window.siyuan.viewer.show();
-        });
     });
 };
 
-export const previewAttrViewImages = (src: string, avID: string,viewID: string,query?:string,pageSize?: number) => {
+export const previewAttrViewImages = (currentSrc: string, avID: string, viewID: string) => {
-    addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.11.7`, "protyleViewerScript").then(() => {
+    fetchPost("/api/av/getCurrentAttrViewImages", {
-        fetchPost("/api/av/getCurrentAttrViewImages", {
+        id: avID,
-            id: avID,
+        viewID: viewID
-            query: query,
+    }, (response) => {
-            pageSize: pageSize,
+        previewImages(response.data, currentSrc);
-            viewID: viewID
-        }, (response) => {
-            const imagesElement = document.createElement("ul");
-            let html = "";
-            let initialViewIndex = -1;
-            response.data.forEach((item: string, index: number) => {
-                if (item) {
-                    html += `<li><img src="${item}"></li>`;
-                    if (initialViewIndex === -1 && (src.endsWith(encodeURI(item)) || src.endsWith(item))) {
-                        initialViewIndex = index;
-                    }
-                }
-            });
-            imagesElement.innerHTML = html;
-            window.siyuan.viewer = new Viewer(imagesElement, {
-                title: [1, (image: HTMLImageElement, imageData: IObject) => {
-                    let name = image.alt;
-                    if (!name) {
-                        name = image.src.substring(image.src.lastIndexOf("/") + 1);
-                    }
-                    name = name.substring(0, name.lastIndexOf(".")).replace(/-\d{14}-\w{7}$/, "");
-                    return `${name} [${imageData.naturalWidth} × ${imageData.naturalHeight}]`;
-                }],
-                button: false,
-                initialViewIndex,
-                transition: false,
-                hidden: function () {
-                    window.siyuan.viewer.destroy();
-                },
-                toolbar: {
-                    zoomIn: true,
-                    zoomOut: true,
-                    oneToOne: true,
-                    reset: true,
-                    prev: true,
-                    play: true,
-                    next: true,
-                    rotateLeft: true,
-                    rotateRight: true,
-                    flipHorizontal: true,
-                    flipVertical: true,
-                    close: function () {
-                        window.siyuan.viewer.destroy();
-                    },
-                },
-            });
-            window.siyuan.viewer.show();
-        });
     });
 };

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

@@ -68,8 +68,6 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             (imgElement as HTMLImageElement).src,
             blockElement.getAttribute("data-av-id"),
             blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
-            (blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
-            parseInt(blockElement.dataset.pageSize) || undefined
         );
         event.preventDefault();
         event.stopPropagation();

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

@@ -341,10 +341,9 @@ export const editAssetItem = (options: {
                 previewAttrViewImages(
                     linkAddress,
                     options.blockElement.getAttribute("data-av-id"),
-                    options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
+                    options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW)
-                    (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
+                );
-                    parseInt(options.blockElement.getAttribute("data-page-size")) || undefined
+            }
-        )}
         });
     }
     if (openSubMenu.length > 0) {

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

@@ -10,7 +10,7 @@ import {openMenuPanel} from "./openMenuPanel";
 import {uploadFiles} from "../../upload";
 import {openLink} from "../../../editor/openLink";
 import {dragUpload, editAssetItem} from "./asset";
-import {previewImage} from "../../preview/image";
+import {previewImages} from "../../preview/image";
 /// #if !BROWSER
 import {webUtils} from "electron";
 /// #endif
@@ -477,7 +477,7 @@ const openEdit = (protyle: IProtyle, element: HTMLElement, event: MouseEvent) =>
                 });
             } else {
                 if (target.tagName === "IMG") {
-                    previewImage(target.getAttribute("src"));
+                    previewImages([target.getAttribute("src")]);
                 } else {
                     openLink(protyle, target.dataset.url, event, event.ctrlKey || event.metaKey);
                 }

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

@@ -1259,22 +1259,13 @@ export const openMenuPanel = (options: {
                     )) {
                         openAsset(options.protyle.app, assetLink.trim(), parseInt(getSearch("page", assetLink)), "right");
                     } else if (Constants.SIYUAN_ASSETS_IMAGE.includes(suffix)) {
-                        previewAttrViewImages(assetLink,avID,
+                        previewAttrViewImages(assetLink, avID, options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW));
-                            options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
-                            (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
-                            parseInt(options.blockElement.getAttribute("data-page-size")) || undefined
-                        )
-                        
                     } else {
                         window.open(assetLink);
                     }
                     /// #else
                     if (Constants.SIYUAN_ASSETS_IMAGE.includes(suffix)) {
-                        previewAttrViewImages(assetLink,avID,
+                        previewAttrViewImages(assetLink, avID, options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW));
-                            options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
-                            (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
-                            parseInt(options.blockElement.getAttribute("data-page-size")) || undefined
-                        )
                     } else {
                         window.open(assetLink);
                     }