From e1ea1516c726e81b38ad9dd4262efc739189ab2d Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 1 Dec 2025 11:44:16 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/16051

---
 .../assets/scss/component/_typography.scss    | 34 ++++++++++++++++++-
 app/src/protyle/gutter/index.ts               | 17 ++++++++--
 app/src/protyle/wysiwyg/keydown.ts            |  7 ++++
 3 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss
index a28b73e64..7e4ac9190 100644
--- a/app/src/assets/scss/component/_typography.scss
+++ b/app/src/assets/scss/component/_typography.scss
@@ -143,33 +143,65 @@
   }
 
   .callout {
-    padding: 8px;
+    position: relative;
+
+    &::before {
+      content: '';
+      width: .25em;
+      border-radius: var(--b3-border-radius);
+      position: absolute;
+      left: 2px;
+      top: 6px;
+      bottom: 6px;
+    }
+
+    padding-left: calc(0.25em + 6px);
+    color: var(--b3-theme-on-surface);
+    background-color: var(--b3-bq-background);
+    display: flex;
+    flex-direction: column;
 
     &[data-subtype="NOTE"] {
+      &::before {
+        background-color: var(--b3-theme-primary);
+      }
+
       .callout-info {
         color: var(--b3-theme-primary);
       }
     }
 
     &[data-subtype="WARNING"] {
+      &::before {
+        background-color: var(--b3-callout-warning);
+      }
       .callout-info {
         color: var(--b3-callout-warning);
       }
     }
 
     &[data-subtype="TIP"] {
+      &::before {
+        background-color: var(--b3-theme-success);
+      }
       .callout-info {
         color: var(--b3-theme-success);
       }
     }
 
     &[data-subtype="IMPORTANT"] {
+      &::before {
+        background-color: var(--b3-callout-important);
+      }
       .callout-info {
         color: var(--b3-callout-important);
       }
     }
 
     &[data-subtype="CAUTION"] {
+      &::before {
+        background-color: var(--b3-theme-error);
+      }
       .callout-info {
         color: var(--b3-theme-error);
       }
diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts
index d0a79a37e..442855413 100644
--- a/app/src/protyle/gutter/index.ts
+++ b/app/src/protyle/gutter/index.ts
@@ -1249,6 +1249,17 @@ export class Gutter {
                 nodeElement,
                 type: "CancelBlockquote"
             }));
+        } else if (type === "NodeCallout" && !protyle.disabled) {
+            turnIntoSubmenu.push(this.turnsOneInto({
+                menuId: "paragraph",
+                id,
+                icon: "iconParagraph",
+                label: window.siyuan.languages.paragraph,
+                accelerator: window.siyuan.config.keymap.editor.heading.paragraph.custom,
+                protyle,
+                nodeElement,
+                type: "CancelCallout"
+            }));
         }
         if (turnIntoSubmenu.length > 0 && !protyle.disabled) {
             window.siyuan.menus.menu.append(new MenuItem({
@@ -2444,7 +2455,7 @@ export class Gutter {
                 }
                 if (index === 0) {
                     // 不单独显示，要不然在块的间隔中，gutter 会跳来跳去的
-                    if (["NodeBlockquote", "NodeList", "NodeSuperBlock"].includes(type)) {
+                    if (["NodeBlockquote", "NodeCallout", "NodeList", "NodeSuperBlock"].includes(type)) {
                         return;
                     }
                     const topElement = getTopAloneElement(nodeElement);
@@ -2498,7 +2509,7 @@ data-type="fold" style="cursor:inherit;"><svg style="width: 10px${fold && fold =
                 if (type === "NodeHeading") {
                     html = html + foldHTML;
                 }
-                if (type === "NodeBlockquote") {
+                if (["NodeBlockquote", "NodeCallout"].includes(type)) {
                     space += 8;
                 }
                 if (nodeElement.previousElementSibling && nodeElement.previousElementSibling.getAttribute("data-node-id")) {
@@ -2509,7 +2520,7 @@ data-type="fold" style="cursor:inherit;"><svg style="width: 10px${fold && fold =
                         return;
                     }
                     // 列表项中的引述块中的第二个段落块块标和引述块左侧样式重叠
-                    if (parentElement && parentElement.getAttribute("data-type") === "NodeBlockquote") {
+                    if (parentElement && ["NodeBlockquote", "NodeCallout"].includes(parentElement.getAttribute("data-type"))) {
                         space += 8;
                     }
                 }
diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts
index 296ec53f8..c5a348526 100644
--- a/app/src/protyle/wysiwyg/keydown.ts
+++ b/app/src/protyle/wysiwyg/keydown.ts
@@ -1390,6 +1390,13 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                         id: selectsElement[0].getAttribute("data-node-id"),
                         type: "CancelBlockquote",
                     });
+                } else if (type === "NodeCallout") {
+                    turnsOneInto({
+                        protyle,
+                        nodeElement: selectsElement[0],
+                        id: selectsElement[0].getAttribute("data-node-id"),
+                        type: "CancelCallout",
+                    });
                 }
             }
             event.preventDefault();