From 95bbde0b6dcc9f69c961602ba435ad1ff74c5063 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Tue, 2 Jan 2024 17:18:11 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/10041

---
 app/src/boot/globalEvent/click.ts    |  4 +---
 app/src/protyle/header/Background.ts | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/src/boot/globalEvent/click.ts b/app/src/boot/globalEvent/click.ts
index d8026ca6b..3a51e10a3 100644
--- a/app/src/boot/globalEvent/click.ts
+++ b/app/src/boot/globalEvent/click.ts
@@ -8,9 +8,7 @@ import {showMessage} from "../../dialog/message";
 export const globalClick = (event: MouseEvent & { target: HTMLElement }) => {
     if (!window.siyuan.menus.menu.element.contains(event.target) && !hasClosestByAttribute(event.target, "data-menu", "true")) {
         if (getSelection().rangeCount > 0 && window.siyuan.menus.menu.element.contains(getSelection().getRangeAt(0).startContainer) &&
-            window.siyuan.menus.menu.element.contains(document.activeElement) &&
-            // 点击题头图菜单无法消失
-            !event.target.parentElement?.classList.contains("protyle-background__img")) {
+            window.siyuan.menus.menu.element.contains(document.activeElement)) {
             // https://ld246.com/article/1654567749834/comment/1654589171218#comments
         } else {
             window.siyuan.menus.menu.remove();
diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts
index 7618ad136..96a20ff71 100644
--- a/app/src/protyle/header/Background.ts
+++ b/app/src/protyle/header/Background.ts
@@ -14,6 +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";
 
 const bgs = [
     "background:radial-gradient(black 3px, transparent 4px),radial-gradient(black 3px, transparent 4px),linear-gradient(#fff 4px, transparent 0),linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),#fff;background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;",
@@ -200,7 +201,17 @@ export class Background {
 
             while (target && !target.isEqualNode(this.element)) {
                 const type = target.getAttribute("data-type");
-                if (type === "position") {
+                if (target.tagName === "IMG") {
+                    const imgSrc = target.getAttribute("src");
+                    if (event.detail > 1 && !imgSrc.startsWith("data:image/png;base64")) {
+                        previewImage(imgSrc);
+                    }
+                    // 点击题头图菜单无法消失
+                    window.siyuan.menus.menu.remove();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                } else if (type === "position") {
                     const iconElements = this.element.firstElementChild.querySelectorAll(".protyle-icons");
                     iconElements[0].classList.add("fn__none");
                     iconElements[1].classList.remove("fn__none");