From b9adb8f87819351ebaafde18692cd32c03ecce9d Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 3 Jan 2026 19:32:52 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/16758

---
 .../assets/scss/component/_typography.scss    |  4 ++
 app/src/emoji/index.ts                        |  4 +-
 app/src/protyle/wysiwyg/callout.ts            | 52 +++++++++++++++++--
 app/src/protyle/wysiwyg/index.ts              | 15 +++++-
 4 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss
index 2fac097f4..ba97150cd 100644
--- a/app/src/assets/scss/component/_typography.scss
+++ b/app/src/assets/scss/component/_typography.scss
@@ -170,6 +170,10 @@
       color: var(--b3-callout-note);
     }
 
+    .callout-icon:empty {
+      display: none;
+    }
+
     &[data-subtype="WARNING"] {
       &::before {
         background-color: var(--b3-callout-warning);
diff --git a/app/src/emoji/index.ts b/app/src/emoji/index.ts
index 15105624a..044df7a1f 100644
--- a/app/src/emoji/index.ts
+++ b/app/src/emoji/index.ts
@@ -560,7 +560,6 @@ export const openEmojiPanel = (
                         notebook: id,
                         icon: ""
                     }, () => {
-                        dialog.destroy();
                         updateFileTreeEmoji("", id, "iconFilesRoot");
                     });
                 } else if (type === "doc") {
@@ -568,7 +567,6 @@ export const openEmojiPanel = (
                         id: id,
                         attrs: {"icon": ""}
                     }, () => {
-                        dialog.destroy();
                         updateFileTreeEmoji("", id);
                         updateOutlineEmoji("", id);
                     });
@@ -576,6 +574,7 @@ export const openEmojiPanel = (
                 if (callback) {
                     callback("");
                 }
+                dialog.destroy();
                 break;
             } else if (target.classList.contains("emojis__item") || target.getAttribute("data-action") === "random" || target.classList.contains("emoji__dynamic-item")) {
                 let unicode = "";
@@ -603,7 +602,6 @@ export const openEmojiPanel = (
                     }, () => {
                         updateFileTreeEmoji(unicode, id);
                         updateOutlineEmoji(unicode, id);
-
                     });
                 }
                 if (callback) {
diff --git a/app/src/protyle/wysiwyg/callout.ts b/app/src/protyle/wysiwyg/callout.ts
index ab0e68ae0..b34c7e37f 100644
--- a/app/src/protyle/wysiwyg/callout.ts
+++ b/app/src/protyle/wysiwyg/callout.ts
@@ -5,15 +5,27 @@ import {Dialog} from "../../dialog";
 import {Menu} from "../../plugin/Menu";
 import {isMobile} from "../../util/functions";
 import {Constants} from "../../constants";
+import {openEmojiPanel, unicode2Emoji} from "../../emoji";
 
 export const updateCalloutType = (titleElement: HTMLElement, protyle: IProtyle) => {
     const blockElement = hasClosestBlock(titleElement);
     if (!blockElement) {
         return;
     }
+    const blockCalloutElement = blockElement.querySelector(".callout-icon");
     const dialog = new Dialog({
         title: window.siyuan.languages.callout,
         content: `<div class="b3-dialog__content">
+    <label class="fn__flex">
+        <div class="fn__flex-center">
+            ${window.siyuan.languages.icon}
+        </div>
+        <span class="fn__space"></span>
+        <div class="protyle-wysiwyg" style="padding: 0" data-readonly="false">
+            <span class="callout-icon">${blockCalloutElement.innerHTML}</span>
+        </div>
+    </label>
+    <div class="fn__hr"></div>
     <label class="fn__flex">
         <div class="fn__flex-center">
             ${window.siyuan.languages.type}
@@ -54,9 +66,7 @@ export const updateCalloutType = (titleElement: HTMLElement, protyle: IProtyle)
         }
         titleElement.innerHTML = title ||
             (textElements[0].value.trim().substring(0, 1).toUpperCase() + textElements[0].value.trim().substring(1).toLowerCase());
-        if (updateIcon) {
-            blockElement.querySelector(".callout-icon").textContent = updateIcon;
-        }
+        blockCalloutElement.innerHTML = dialogCalloutIconElement.innerHTML;
         updateTransaction(protyle, blockElement.getAttribute("data-node-id"), blockElement.outerHTML, oldHTML);
         focusBlock(blockElement);
         dialog.destroy();
@@ -79,7 +89,39 @@ export const updateCalloutType = (titleElement: HTMLElement, protyle: IProtyle)
     textElements[0].focus();
     textElements[0].select();
     textElements[1].value = protyle.lute.BlockDOM2StdMd(titleElement.innerHTML);
-    let updateIcon = "";
+    const dialogCalloutIconElement = dialog.element.querySelector(".callout-icon");
+    dialogCalloutIconElement.addEventListener("click", () => {
+        const emojiRect = dialogCalloutIconElement.getBoundingClientRect();
+        openEmojiPanel("", "av", {
+            x: emojiRect.left,
+            y: emojiRect.bottom,
+            h: emojiRect.height,
+            w: emojiRect.width
+        }, (unicode) => {
+            let emojiHTML;
+            if (unicode.startsWith("api/icon/getDynamicIcon")) {
+                emojiHTML = `<img class="callout-img" src="${unicode}"/>`;
+            } else if (unicode.indexOf(".") > -1) {
+                emojiHTML = `<img class="callout-img" src="/emojis/${unicode}">`;
+            } else {
+                emojiHTML = unicode2Emoji(unicode);
+            }
+            if (unicode === "") {
+                if (textElements[0].value === "NOTE") {
+                    emojiHTML = "✏️";
+                } else if (textElements[0].value === "TIP") {
+                    emojiHTML = "💡";
+                } else if (textElements[0].value === "IMPORTANT") {
+                    emojiHTML = "️❗";
+                } else if (textElements[0].value === "WARNING") {
+                    emojiHTML = "⚠️";
+                } else if (textElements[0].value === "CAUTION") {
+                    emojiHTML = "🚨";
+                }
+            }
+            dialogCalloutIconElement.innerHTML = emojiHTML;
+        }, dialogCalloutIconElement.querySelector("img"));
+    });
     dialog.element.querySelector(".b3-form__icona-icon").addEventListener("click", (event) => {
         const menu = new Menu(Constants.MENU_CALLOUT_SELECT, () => {
             if (document.activeElement.tagName === "BODY") {
@@ -109,7 +151,7 @@ export const updateCalloutType = (titleElement: HTMLElement, protyle: IProtyle)
                         textElements[1].value = item.type;
                     }
                     textElements[0].value = item.type.toUpperCase();
-                    updateIcon = item.icon;
+                    dialogCalloutIconElement.innerHTML = item.icon;
                     textElements[1].focus();
                     textElements[1].select();
                 }
diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
index 3993ce33d..ae7bfa8ec 100644
--- a/app/src/protyle/wysiwyg/index.ts
+++ b/app/src/protyle/wysiwyg/index.ts
@@ -3070,8 +3070,21 @@ export class WYSIWYG {
                         } else {
                             emojiHTML = unicode2Emoji(unicode);
                         }
+                        if (unicode === "") {
+                            const subType = nodeElement.getAttribute("data-subtype");
+                            if (subType === "NOTE") {
+                                emojiHTML = "✏️";
+                            } else if (subType === "TIP") {
+                                emojiHTML = "💡";
+                            } else if (subType === "IMPORTANT") {
+                                emojiHTML = "️❗";
+                            } else if (subType === "WARNING") {
+                                emojiHTML = "⚠️";
+                            } else if (subType === "CAUTION") {
+                                emojiHTML = "🚨";
+                            }
+                        }
                         calloutIconElement.innerHTML = emojiHTML;
-                        hideElements(["dialog"]);
                         updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML);
                         focusBlock(nodeElement);
                     }, calloutIconElement.querySelector("img"));