Document emoji picker (#4338)

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/hooks/useEmojiWidth.ts

@@ -1,37 +0,0 @@
-import * as React from "react";
-
-type Options = {
-  fontSize?: string;
-  lineHeight?: string;
-};
-
-/**
- * Measures the width of an emoji character
- *
- * @param emoji The emoji to measure
- * @param options Options to pass to the measurement element
- * @returns The width of the emoji in pixels
- */
-export default function useEmojiWidth(
-  emoji: string | undefined,
-  { fontSize = "2.25em", lineHeight = "1.25" }: Options
-) {
-  return React.useMemo(() => {
-    const element = window.document.createElement("span");
-    if (!emoji) {
-      return 0;
-    }
-
-    element.innerText = `${emoji}\u00A0`;
-    element.style.visibility = "hidden";
-    element.style.position = "absolute";
-    element.style.left = "-9999px";
-    element.style.lineHeight = lineHeight;
-    element.style.fontSize = fontSize;
-    element.style.width = "max-content";
-    window.document.body?.appendChild(element);
-    const width = window.getComputedStyle(element).width;
-    window.document.body?.removeChild(element);
-    return parseInt(width, 10);
-  }, [emoji, fontSize, lineHeight]);
-}

app/hooks/useUserLocale.ts

@@ -1,11 +1,18 @@
 import useStores from "./useStores";
 
-export default function useUserLocale() {
+/**
+ * Returns the user's locale, or undefined if the user is not logged in.
+ *
+ * @param languageCode Whether to only return the language code
+ * @returns The user's locale, or undefined if the user is not logged in
+ */
+export default function useUserLocale(languageCode?: boolean) {
   const { auth } = useStores();
 
-  if (!auth.user || !auth.user.language) {
+  if (!auth.user?.language) {
     return undefined;
   }
 
-  return auth.user.language;
+  const { language } = auth.user;
+  return languageCode ? language.split("_")[0] : language;
 }