Renders the emoji picker that TextEditor portals to <body>, built on
frimousse. TextEditor owns its state and its keyboard handling.
Renders the picker in the current locale, with the skin tone last picked on
this device. It fetches its emoji data from the site itself, where the Vite
build copies it (VITE_EMOJIBASE_URL).
Passed to EmojiPickerPopup by TextEditor, which keeps the refs to
detect outside presses, focus the search and step the keyboard into the grid.
- floatRef: Ref<HTMLDivElement>
-
inline: boolean
Set for a
:querytyped in the textarea. The search field then only mirrorsqueryand can't take focus. - onClose: () => void
-
onKeyDownCapture: (e: KeyboardEvent<HTMLDivElement>) => void
Runs before frimousse sees the key, so it can take Escape and Enter.
- onQueryChange: (query: string) => void
- onSelect: (emoji: string) => void
- query: string
- searchRef: Ref<HTMLInputElement>
-
style: CSSProperties
From
useAnchoredFloat, or hidden until it has placed the picker. -
viewportRef: Ref<HTMLDivElement>
Focused by
TextEditorto hand the arrow keys to frimousse.
Usage
import * as mod from "src/components/editor/EmojiPickerPopup.tsx";