From 03050779a2b777d151a702fd5e1687337f09a7f3 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sun, 30 Nov 2025 10:54:16 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/16051

---
 .../assets/scss/component/_typography.scss    | 26 +++++++++++++++++++
 app/src/assets/scss/protyle/_wysiwyg.scss     | 11 ++++++++
 app/src/assets/scss/util/_reset.scss          |  2 +-
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss
index 5fda581e8..66985b5c6 100644
--- a/app/src/assets/scss/component/_typography.scss
+++ b/app/src/assets/scss/component/_typography.scss
@@ -142,6 +142,32 @@
     flex-direction: column;
   }
 
+  .callout {
+    padding: 8px;
+
+    &-info {
+      display: flex;
+      align-items: center;
+    }
+
+    &-icon {
+      width: 1.2em;
+      display: flex;
+      text-align: center;
+      height: 1.2em;
+      line-height: 1.2em;
+    }
+
+    &-img {
+      height: 1.2em;
+      width: 1.2em;
+    }
+
+    &-title {
+      margin-left: 8px;
+    }
+  }
+
   h1,
   h2,
   h3,
diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index ace850aca..c5b099867 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -781,6 +781,17 @@
   .protyle-wysiwyg__embed .iframe:hover .protyle-action__drag {
     display: none;
   }
+
+  .callout-icon {
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--b3-border-radius);
+    transition: var(--b3-background-transition);
+
+    &:hover {
+      background-color: var(--b3-list-hover);
+    }
+  }
 }
 
 .protyle-wysiwyg:not([contenteditable]),
diff --git a/app/src/assets/scss/util/_reset.scss b/app/src/assets/scss/util/_reset.scss
index 89d85ad1e..fd47864d2 100644
--- a/app/src/assets/scss/util/_reset.scss
+++ b/app/src/assets/scss/util/_reset.scss
@@ -176,7 +176,7 @@ img {
   -ms-interpolation-mode: bicubic;
   overflow: hidden;
 
-  &:not(.emoji) {
+  &:not(.emoji):not(.callout-img) {
     font-size: 12px;
   }
 }