Use Intl.Segmenter

src/main.tsx

@@ -20,6 +20,7 @@ import {
   setLogExtension as setLKLogExtension,
   setLogLevel as setLKLogLevel,
 } from "livekit-client";
+import "@formatjs/intl-segmenter/polyfill";
 
 import { App } from "./App";
 import { init as initRageshake } from "./settings/rageshake";

src/useReactions.tsx

@@ -208,10 +208,22 @@ export const ReactionsProvider = ({
           return;
         }
 
-        const emoji = content.emoji?.split(/(?:)/u)?.[0];
+        if (!content.emoji) {
+          logger.warn(`Reaction had no emoji from ${reactionEventId}`);
+          return;
+        }
+
+        const segment = new Intl.Segmenter(undefined, {
+          granularity: "grapheme",
+        })
+          .segment(content.emoji)
+          [Symbol.iterator]();
+        const emoji = segment.next().value?.segment;
 
         if (!emoji) {
-          logger.warn(`Reaction had no emoji from ${reactionEventId}`);
+          logger.warn(
+            `Reaction had no emoji from ${reactionEventId} after splitting`,
+          );
           return;
         }