Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-25 18:26:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): do not display emoji container when it is empty string (#12543)

Browse Source 
<!-- 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 -->
This commit is contained in:
Flrande
2025-05-26 11:40:17 +00:00
parent 0be30f15ea
commit 53a23dd4bf
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
blocksuite/affine/blocks/callout/src/callout-block.ts
View File

@@ -12,6 +12,7 @@ import type { BlockComponent } from '@blocksuite/std';
import { flip, offset } from '@floating-ui/dom'; import { flip, offset } from '@floating-ui/dom';
import { css, html } from 'lit'; import { css, html } from 'lit';
import { query } from 'lit/decorators.js'; import { query } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockModel> { export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockModel> {
static override styles = css` static override styles = css`
:host { :host {
@@ -109,14 +110,18 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM
} }
override renderBlock() { override renderBlock() {
const emoji = this.model.props.emoji$.value;
return html` return html`
<div class="affine-callout-block-container"> <div class="affine-callout-block-container">
<div <div
@click=${this._toggleEmojiMenu} @click=${this._toggleEmojiMenu}
contenteditable="false" contenteditable="false"
class="affine-callout-emoji-container" 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>
<div class="affine-callout-children"> <div class="affine-callout-children">
${this.renderChildren(this.model)} ${this.renderChildren(this.model)}