From 53a23dd4bf73e2c5c5a58feac22b62a699704f6f Mon Sep 17 00:00:00 2001
From: Flrande <1978616327@qq.com>
Date: Mon, 26 May 2025 11:40:17 +0000
Subject: [PATCH] fix(editor): do not display emoji container when it is empty
 string (#12543)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - The emoji container in callout blocks now automatically hides when no emoji is present, providing a cleaner appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 blocksuite/affine/blocks/callout/src/callout-block.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/blocksuite/affine/blocks/callout/src/callout-block.ts b/blocksuite/affine/blocks/callout/src/callout-block.ts
index dd42e39dd..9deeb73ed 100644
--- a/blocksuite/affine/blocks/callout/src/callout-block.ts
+++ b/blocksuite/affine/blocks/callout/src/callout-block.ts
@@ -12,6 +12,7 @@ import type { BlockComponent } from '@blocksuite/std';
 import { flip, offset } from '@floating-ui/dom';
 import { css, html } from 'lit';
 import { query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockModel> {
   static override styles = css`
     :host {
@@ -109,14 +110,18 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM
   }
 
   override renderBlock() {
+    const emoji = this.model.props.emoji$.value;
     return html`
       <div class="affine-callout-block-container">
         <div
           @click=${this._toggleEmojiMenu}
           contenteditable="false"
           class="affine-callout-emoji-container"
+          style=${styleMap({
+            display: emoji.length === 0 ? 'none' : undefined,
+          })}
         >
-          <span class="affine-callout-emoji">${this.model.props.emoji$}</span>
+          <span class="affine-callout-emoji">${emoji}</span>
         </div>
         <div class="affine-callout-children">
           ${this.renderChildren(this.model)}