11import data from "@emoji-mart/data/sets/15/apple.json" ;
22import EmojiMart from "@emoji-mart/react" ;
3- import type { ComponentProps , FC } from "react" ;
3+ import {
4+ type ComponentProps ,
5+ type FC ,
6+ useEffect ,
7+ useLayoutEffect ,
8+ } from "react" ;
49import icons from "theme/icons.json" ;
510
611const custom = [
@@ -26,6 +31,23 @@ type EmojiPickerProps = Omit<
2631> ;
2732
2833const EmojiPicker :FC < EmojiPickerProps > = ( props ) => {
34+ /**
35+ * Workaround for a bug in the emoji-mart library where custom emoji images render improperly.
36+ * Setting the image width to 100% ensures they display correctly.
37+ *
38+ * Issue: https://github.com/missive/emoji-mart/issues/805
39+ * Open PR: https://github.com/missive/emoji-mart/pull/806
40+ */
41+ useEffect ( ( ) => {
42+ const picker = document . querySelector ( "em-emoji-picker" ) ?. shadowRoot ;
43+ if ( ! picker ) {
44+ return ;
45+ }
46+ const css = document . createElement ( "style" ) ;
47+ css . textContent = ".emoji-mart-emoji img { width: 100% }" ;
48+ picker . appendChild ( css ) ;
49+ } , [ ] ) ;
50+
2951return (
3052< EmojiMart
3153theme = "dark"