fix: display SVG emojis in the picker (#16492)

BrunoQuaresma · web-flow · commit de70ff3206c0 · 2025-02-07T11:48:01.000-03:00
Fix #16263
diff --git 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 type { ComponentProps, FC } from "react";
+import {
+	type ComponentProps,
+	type FC,
+	useEffect,
+	useLayoutEffect,
+} from "react";
 import icons from "theme/icons.json";
 
 const custom = [
@@ -26,6 +31,23 @@ type EmojiPickerProps = Omit<
 >;
 
 const EmojiPicker: FC<EmojiPickerProps> = (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.
+	 *
+	 * 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;
+		if (!picker) {
+			return;
+		}
+		const css = document.createElement("style");
+		css.textContent = ".emoji-mart-emoji img { width: 100% }";
+		picker.appendChild(css);
+	}, []);
+
 	return (
 		<EmojiMart
 			theme="dark"
