From 128c7b09be7b602a661af3f40a01a15c2ef302f2 Mon Sep 17 00:00:00 2001
From: trimbe <19672127+trimbe@users.noreply.github.com>
Date: Tue, 16 Nov 2021 14:40:46 -0500
Subject: [PATCH] fix emote parsing in strings containing emoji

---
 web/package.json               |  2 ++
 web/src/components/Message.tsx |  8 +++++---
 web/src/hooks/useLog.ts        |  5 +++--
 web/yarn.lock                  | 10 ++++++++++
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/package.json b/web/package.json
index 81a54bb..0d02982 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,6 +13,7 @@
     "react-query": "^3.21.0",
     "react-scripts": "^4.0.3",
     "react-window": "^1.8.6",
+    "runes": "^0.4.3",
     "swagger-ui-react": "^4.0.0-beta.4",
     "typescript": "^4.0.3",
     "web-vitals": "^2.1.0"
@@ -52,6 +53,7 @@
     "@types/react-window": "^1.8.2",
     "@types/styled-components": "^5.1.4",
     "@types/swagger-ui-react": "^3.35.0",
+    "@types/runes": "^0.4.1",
     "styled-components": "^5.2.1"
   }
 }
diff --git a/web/src/components/Message.tsx b/web/src/components/Message.tsx
index a72735a..5dc8197 100644
--- a/web/src/components/Message.tsx
+++ b/web/src/components/Message.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { store } from "../store";
 import { LogMessage } from "../types/log";
 import { ThirdPartyEmote } from "../types/ThirdPartyEmote";
+import runes from "runes";
 
 const MessageContainer = styled.div`
 
@@ -40,9 +41,10 @@ export function Message({ message, thirdPartyEmotes }: { message: LogMessage, th
 		renderMessagePrefix = `${message.tags['system-msg']} `;
 	}
 
+	const messageTextEmoji = runes(messageText);
 
-	for (let x = 0; x <= messageText.length; x++) {
-		const c = messageText[x];
+	for (let x = 0; x <= messageTextEmoji.length; x++) {
+		const c = messageTextEmoji[x];
 
 		replaced = false;
 
@@ -63,7 +65,7 @@ export function Message({ message, thirdPartyEmotes }: { message: LogMessage, th
 		}
 
 		if (!replaced) {
-			if (c !== " " && x !== messageText.length) {
+			if (c !== " " && x !== messageTextEmoji.length) {
 				buffer += c;
 				continue;
 			}
diff --git a/web/src/hooks/useLog.ts b/web/src/hooks/useLog.ts
index 2529bb5..87d0f12 100644
--- a/web/src/hooks/useLog.ts
+++ b/web/src/hooks/useLog.ts
@@ -3,6 +3,7 @@ import { useQuery } from "react-query";
 import { getUserId, isUserId } from "../services/isUserId";
 import { store } from "../store";
 import { Emote, LogMessage, UserLogResponse } from "../types/log";
+import runes from "runes";
 
 
 
@@ -67,12 +68,12 @@ function parseEmotes(messageText: string, emotes: string | undefined): Array<Emo
 
             const startIndex = Number(startPos);
             const endIndex = Number(endPos) + 1;
-
+            
             parsed.push({
                 id,
                 startIndex: startIndex,
                 endIndex: endIndex,
-                code: messageText.substr(startIndex, endIndex - startIndex)
+                code: runes.substr(messageText, startIndex, endIndex - startIndex + 1)
             });
         }
     }
diff --git a/web/yarn.lock b/web/yarn.lock
index dadbe8b..1031f83 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2650,6 +2650,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/runes@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@types/runes/-/runes-0.4.1.tgz#ec16e8d73dd1acfa09aca3b6a9180dfef45045ae"
+  integrity sha512-wb2qEPRr/BXKB1xx7S5OzbnZmqIGRPrw0SjBJYnLA+l5DEGmyw7veFXQ0Cko/gotDTB+yGpsZOAkLDWZTyJo6w==
+
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@@ -11215,6 +11220,11 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
+runes@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/runes/-/runes-0.4.3.tgz#32f7738844bc767b65cc68171528e3373c7bb355"
+  integrity sha512-K6p9y4ZyL9wPzA+PMDloNQPfoDGTiFYDvdlXznyGKgD10BJpcAosvATKrExRKOrNLgD8E7Um7WGW0lxsnOuNLg==
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"