## Problem
When the callout block's icon picker is open and the user types in the
search input, pressing backspace deletes content in the main editor
instead of the search text.
## Root Cause
The callout icon picker is mounted via `createPopup` inside
`editor-host`. `PageKeyboardManager` registers a global `Backspace`
handler on the editor host (`keyboard-manager.ts`) with `{ global: true
}`, which fires on every backspace keydown regardless of what element is
focused. Without `stopPropagation`, the backspace event from the search
input bubbles up through the DOM and triggers block deletion.
Other keys are unaffected because the editor handles character input
through `contenteditable` focus, those handlers only act when a
contenteditable node is active.
## Fix
Add `onKeyDown` with `e.stopPropagation()` to the search inputs in both
`EmojiPicker` and `AffineIconPicker`. This matches the existing pattern
already used by `MenuComponent` (`menu-renderer.ts:107`) and all other
interactive components (`date-picker`, `inline-edit`, `prompt-modal`).
## Why not affected elsewhere
`DocIconPicker` uses the same pickers but wraps them in a Radix UI
`Menu` with `modal: true`, which portals outside `editor-host` — so
backspace events never reach the editor's global handler there.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved keyboard event handling in search inputs for icon and emoji
pickers
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- New Features
- Revamped Emoji Picker: grouped browsing with sticky group headers,
footer navigation, and a new EmojiButton for quicker selection.
- Recent emojis with persisted history and single-tap add.
- Programmatic group navigation and callbacks for sticky-group changes.
- Style
- Updated scroll area paddings for emoji and icon pickers.
- Enhanced group header background for better contrast.
- Refactor
- Simplified emoji picker internals for leaner, more responsive
rendering.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- New Features
- Unified icon picker with consistent rendering across the app.
- Picker can auto-close after selection.
- “Remove” now clears the icon selection.
- Refactor
- Icon handling consolidated across editors, navigation, and document
titles for consistent behavior.
- Picker now opens on the Emoji panel by default.
- Style
- Adjusted line-height and selectors for icon picker visuals.
- Chores
- Removed unused emoji-mart dependencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Icon Picker added with Emoji and Icon panels, search/filtering, recent
selections, color selection, skin tone options, and smooth group
navigation.
- **Documentation**
- Storybook example added to preview and test the Icon Picker.
- **Chores**
- Bumped icon library dependency to a newer minor version.
- Added emoji data dependency to support the Emoji Picker.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Talha Mujahid