Use Intl.Segmenter

package.json

@@ -116,5 +116,8 @@
   },
   "resolutions": {
     "strip-ansi": "6.0.1"
+  },
+  "dependencies": {
+    "@formatjs/intl-segmenter": "^11.7.3"
   }
 }

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;
         }
 

yarn.lock

@@ -1608,6 +1608,15 @@
   dependencies:
     tslib "2"
 
+"@formatjs/intl-segmenter@^11.7.3":
+  version "11.7.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-segmenter/-/intl-segmenter-11.7.3.tgz#aeb49c33c81fec68419922c64c72188b659eaa5a"
+  integrity sha512-IvEDQRe0t0ouqaqZK2KobGt/+BhwDHdtbS8GWhdl+fjmWbhXMz2mHihu5fAYkYChum5eNfGhEF5P+bLCeYq67w==
+  dependencies:
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/intl-localematcher" "0.5.7"
+    tslib "2"
+
 "@gulpjs/to-absolute-glob@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@gulpjs/to-absolute-glob/-/to-absolute-glob-4.0.0.tgz#1fc2460d3953e1d9b9f2dfdb4bcc99da4710c021"