From 794f04b7acd62a50111ea6a70bbdb57f1f481bac Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 7 Feb 2025 14:09:44 +0000 Subject: [PATCH 1/3] fix: display SVG emojis in the picker --- site/src/components/IconField/EmojiPicker.tsx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/site/src/components/IconField/EmojiPicker.tsx b/site/src/components/IconField/EmojiPicker.tsx index 291a2dc357723..2f8918b0713f2 100644 --- a/site/src/components/IconField/EmojiPicker.tsx +++ b/site/src/components/IconField/EmojiPicker.tsx @@ -1,6 +1,6 @@ import data from "@emoji-mart/data/sets/15/apple.json"; import EmojiMart from "@emoji-mart/react"; -import type { ComponentProps, FC } from "react"; +import { useEffect, useLayoutEffect, type ComponentProps, type FC } from "react"; import icons from "theme/icons.json"; const custom = [ @@ -26,8 +26,24 @@ type EmojiPickerProps = Omit< >; const EmojiPicker: FC = (props) => { + /** + * Workaround for a bug in the emoji-mart library where custom emoji images render improperly. + * Setting the image width to 100% ensures they display correctly. + * + * Reference: https://github.com/missive/emoji-mart/pull/806 + */ + useEffect(() => { + const picker = document.querySelector("em-emoji-picker")?.shadowRoot + if(!picker) { + return + } + const css = document.createElement("style") + css.textContent = `.emoji-mart-emoji img { width: 100% }` + picker.appendChild(css) + }, []) + return ( - Date: Fri, 7 Feb 2025 14:11:09 +0000 Subject: [PATCH 2/3] Fix lint --- site/src/components/IconField/EmojiPicker.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/site/src/components/IconField/EmojiPicker.tsx b/site/src/components/IconField/EmojiPicker.tsx index 2f8918b0713f2..b22eb92c322a0 100644 --- a/site/src/components/IconField/EmojiPicker.tsx +++ b/site/src/components/IconField/EmojiPicker.tsx @@ -1,6 +1,11 @@ import data from "@emoji-mart/data/sets/15/apple.json"; import EmojiMart from "@emoji-mart/react"; -import { useEffect, useLayoutEffect, type ComponentProps, type FC } from "react"; +import { + type ComponentProps, + type FC, + useEffect, + useLayoutEffect, +} from "react"; import icons from "theme/icons.json"; const custom = [ @@ -33,17 +38,17 @@ const EmojiPicker: FC = (props) => { * Reference: https://github.com/missive/emoji-mart/pull/806 */ useEffect(() => { - const picker = document.querySelector("em-emoji-picker")?.shadowRoot - if(!picker) { - return + const picker = document.querySelector("em-emoji-picker")?.shadowRoot; + if (!picker) { + return; } - const css = document.createElement("style") - css.textContent = `.emoji-mart-emoji img { width: 100% }` - picker.appendChild(css) - }, []) + const css = document.createElement("style"); + css.textContent = ".emoji-mart-emoji img { width: 100% }"; + picker.appendChild(css); + }, []); return ( - Date: Fri, 7 Feb 2025 14:38:27 +0000 Subject: [PATCH 3/3] Add issue in the comments --- site/src/components/IconField/EmojiPicker.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/src/components/IconField/EmojiPicker.tsx b/site/src/components/IconField/EmojiPicker.tsx index b22eb92c322a0..476e24f293756 100644 --- a/site/src/components/IconField/EmojiPicker.tsx +++ b/site/src/components/IconField/EmojiPicker.tsx @@ -35,7 +35,8 @@ const EmojiPicker: FC = (props) => { * Workaround for a bug in the emoji-mart library where custom emoji images render improperly. * Setting the image width to 100% ensures they display correctly. * - * Reference: https://github.com/missive/emoji-mart/pull/806 + * Issue: https://github.com/missive/emoji-mart/issues/805 + * Open PR: https://github.com/missive/emoji-mart/pull/806 */ useEffect(() => { const picker = document.querySelector("em-emoji-picker")?.shadowRoot;