fix: Inset icon in collection headers, minor ContentEditable refactor (#3168)

app/hooks/useEmojiWidth.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+type Options = {
+  fontSize?: string;
+  lineHeight?: string;
+};
+
+/**
+ * Measures the width of an emoji character
+ */
+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]);
+}