From a26b7874cf18e1f84a4903217af9a27fcf6bd7eb Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 8 Dec 2025 17:10:03 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/16051

---
 app/src/asset/anno.ts              |  3 +-
 app/src/protyle/render/av/col.ts   |  4 +--
 app/src/protyle/wysiwyg/callout.ts | 58 ++++++++++++++++++++----------
 3 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/app/src/asset/anno.ts b/app/src/asset/anno.ts
index e30c51f73..cad1fa580 100644
--- a/app/src/asset/anno.ts
+++ b/app/src/asset/anno.ts
@@ -7,6 +7,7 @@ import {focusByRange} from "../protyle/util/selection";
 import {Constants} from "../constants";
 import {Dialog} from "../dialog";
 import {showMessage} from "../dialog/message";
+import {isMobile} from "../util/functions";
 
 export const initAnno = (element: HTMLElement, pdf: any) => {
     getConfig(pdf);
@@ -314,7 +315,7 @@ const setRelation = (pdf: any) => {
     <div class="fn__hr"></div>
     <ul class="b3-list b3-list--background">${getRelationHTML(configItem.ids)}</ul>
 </div>`,
-        width: "520px",
+        width: isMobile() ? "92vw" : "520px",
     });
 
     const addRelation = () => {
diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index 6db90c4df..1787d9763 100644
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@@ -13,7 +13,7 @@ import {bindRollupData, getRollupHTML} from "./rollup";
 import {Constants} from "../../../constants";
 import * as dayjs from "dayjs";
 import {setPosition} from "../../../util/setPosition";
-import {duplicateNameAddOne} from "../../../util/functions";
+import {duplicateNameAddOne, isMobile} from "../../../util/functions";
 import {Dialog} from "../../../dialog";
 import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape";
 import {getFieldsByData} from "./view";
@@ -1093,7 +1093,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
     <div class="fn__hr"></div>
     <button class="fn__block b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button>
 </div>`,
-                            width: "520px",
+                            width: isMobile() ? "92vw" : "520px",
                         });
                         dialog.element.addEventListener("click", (event) => {
                             let target = event.target as HTMLElement;
diff --git a/app/src/protyle/wysiwyg/callout.ts b/app/src/protyle/wysiwyg/callout.ts
index ea85a10b9..77e62781a 100644
--- a/app/src/protyle/wysiwyg/callout.ts
+++ b/app/src/protyle/wysiwyg/callout.ts
@@ -4,6 +4,7 @@ import {focusBlock} from "../util/selection";
 import {Dialog} from "../../dialog";
 import {escapeHtml} from "../../util/escape";
 import {Menu} from "../../plugin/Menu";
+import {isMobile} from "../../util/functions";
 
 export const updateCalloutType = (titleElement: HTMLElement, protyle: IProtyle) => {
     const blockElement = hasClosestBlock(titleElement);
@@ -31,41 +32,60 @@ export const updateCalloutType = (titleElement: HTMLElement, protyle: IProtyle)
         <span class="fn__space"></span>
         <input class="b3-text-field fn__flex-1" value="${titleElement.textContent}" type="text">
     </label>
+</div>
+<div class="b3-dialog__action">
+    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
+    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
 </div>`,
-        width: "520px",
-        destroyCallback() {
-            const oldHTML = blockElement.outerHTML;
-            blockElement.setAttribute("data-subtype", textElements[0].value.trim());
-            titleElement.textContent = escapeHtml(textElements[1].value);
-            if (updateIcon) {
-                blockElement.querySelector(".callout-icon").textContent = updateIcon;
-            }
-            updateTransaction(protyle, blockElement.getAttribute("data-node-id"), blockElement.outerHTML, oldHTML);
-            focusBlock(blockElement);
+        width: isMobile() ? "92vw" : "520px",
+    });
+    const btnElements = dialog.element.querySelectorAll(".b3-button");
+    btnElements[0].addEventListener("click", () => {
+        dialog.destroy();
+    });
+    btnElements[1].addEventListener("click", () => {
+        const oldHTML = blockElement.outerHTML;
+        blockElement.setAttribute("data-subtype", textElements[0].value.trim());
+        titleElement.textContent = escapeHtml(textElements[1].value.trim() ||
+            (textElements[0].value.trim().substring(0, 1).toUpperCase() + textElements[0].value.trim().substring(1).toLowerCase()));
+        if (updateIcon) {
+            blockElement.querySelector(".callout-icon").textContent = updateIcon;
         }
+        updateTransaction(protyle, blockElement.getAttribute("data-node-id"), blockElement.outerHTML, oldHTML);
+        focusBlock(blockElement);
+        dialog.destroy();
     });
     const textElements: NodeListOf<HTMLInputElement> = dialog.element.querySelectorAll(".b3-text-field");
+    dialog.bindInput(textElements[1], () => {
+        btnElements[1].dispatchEvent(new CustomEvent("click"));
+    });
+    textElements[0].focus();
+    textElements[0].select();
     let updateIcon = "";
     dialog.element.querySelector(".b3-form__icona-icon").addEventListener("click", (event) => {
         const menu = new Menu();
         [{
-            icon: "✏️", type: "NOTE"
+            icon: "✏️", type: "Note", color: "var(--b3-theme-primary)"
         }, {
-            icon: "💡", type: "TIP"
+            icon: "💡", type: "Tip", color: "var(--b3-theme-success)"
         }, {
-            icon: "❗", type: "IMPORTANT"
+            icon: "❗", type: "Important", color: "var(--b3-callout-important)"
         }, {
-            icon: "⚠️", type: "WARNING"
+            icon: "⚠️", type: "Warning", color: "var(--b3-callout-warning)"
         }, {
-            icon: "🚨", type: "CAUTION"
+            icon: "🚨", type: "Caution", color: "var(--b3-theme-error)"
         }].forEach(item => {
             menu.addItem({
-                iconHTML: `<span class="b3-menu__icon">${item.icon}</span>`,
-                label: item.type,
+                iconHTML: `<span class="b3-menu__icon">${item.icon.toUpperCase()}</span>`,
+                label: `<span style="color: ${item.color}">${item.type}</span>`,
                 click() {
-                    textElements[0].value = item.type;
-                    textElements[1].value = item.type;
+                    if (textElements[0].value.toLowerCase() === textElements[1].value.toLowerCase()) {
+                        textElements[1].value = item.type;
+                    }
+                    textElements[0].value = item.type.toUpperCase();
                     updateIcon = item.icon;
+                    textElements[1].focus();
+                    textElements[1].select();
                 }
             });
         });