refactor(editor): new icon picker (#13658)

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

* **New Features**
* In-tree icon picker for Callout blocks (emoji, app icons, images) with
popup UI and editor-wide extension/service.
* Callout toolbar adds background color presets, an icon-picker action,
and a destructive Delete action.

* **Refactor**
* Replaced legacy emoji workflow with icon-based rendering, updated
state, styling, and lifecycle for callouts.

* **Tests**
  * Updated callout E2E to reflect new default icon and picker behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: L-Sun <zover.v@gmail.com>
This commit is contained in:
3720
2025-09-29 19:06:14 +08:00
committed by GitHub
parent 8df7353722
commit 8006812bc0
24 changed files with 630 additions and 174 deletions
@@ -1,3 +1,4 @@
import type { IconData } from '@blocksuite/affine-shared/services';
import {
BlockModel,
BlockSchemaExtension,
@@ -8,15 +9,17 @@ import {
import type { BlockMeta } from '../../utils/types';
export type CalloutProps = {
emoji: string;
icon?: IconData;
text: Text;
backgroundColorName?: string;
} & BlockMeta;
export const CalloutBlockSchema = defineBlockSchema({
flavour: 'affine:callout',
props: (internal): CalloutProps => ({
emoji: '😀',
icon: { type: 'emoji', unicode: '💡' } as IconData,
text: internal.Text(),
backgroundColorName: 'grey',
'meta:createdAt': undefined,
'meta:updatedAt': undefined,
'meta:createdBy': undefined,