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
@@ -24,9 +24,9 @@ test('add callout block using slash menu and change emoji', async ({
}) => {
await type(page, '/callout\naaaa\nbbbb');
const callout = page.locator('affine-callout');
const emoji = page.locator('affine-callout .affine-callout-emoji');
const emoji = page.locator('affine-callout').getByTestId('callout-emoji');
await expect(callout).toBeVisible();
await expect(emoji).toContainText('😀');
await expect(emoji).toContainText('💡');
const paragraph = page.locator('affine-callout affine-paragraph');
await expect(paragraph).toHaveCount(2);
@@ -35,18 +35,6 @@ test('add callout block using slash menu and change emoji', async ({
await expect(vLine).toHaveCount(2);
expect(await vLine.nth(0).innerText()).toBe('aaaa');
expect(await vLine.nth(1).innerText()).toBe('bbbb');
await emoji.click();
const emojiMenu = page.locator('affine-emoji-menu');
await expect(emojiMenu).toBeVisible();
await page
.locator('div')
.filter({ hasText: /^😀😃😄😁😆😅🤣😂🙂$/ })
.getByLabel('😆')
.click();
await page.getByTestId('page-editor-blank').click();
await expect(emojiMenu).not.toBeVisible();
await expect(emoji).toContainText('😆');
});
test('press backspace after callout block', async ({ page }) => {