From 84bb1307bbfe726dc098d68689a589cb1c88159a Mon Sep 17 00:00:00 2001
From: Eugene Toder <eltoder@users.noreply.github.com>
Date: Fri, 29 Nov 2024 23:47:53 -0500
Subject: [PATCH] Don't rely on word boundary in mentions (#45)

They don't work reliably with unicode characters even with u or v flags.
Also, usernames can end on non-word characters.
---
 src/components/Chat.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Chat.js b/src/components/Chat.js
index 11a8881..93fa95e 100644
--- a/src/components/Chat.js
+++ b/src/components/Chat.js
@@ -65,10 +65,10 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const makeUserRE = (username) => {
+const makeMentionRE = (username) => {
   username = username.replace(/[\\^$.*+?()[\]{}|]/g, "\\$&");
   username = username.replace(/^anonymous /i, "($&)?");
-  return new RegExp(`@(all|${username})\\b`, "i");
+  return new RegExp(`@(all|${username})(\\W|$)`, "iu");
 };
 
 /** A chat sidebar element, opens lobby chat when the `gameId` prop is not set. */
@@ -106,10 +106,10 @@ function Chat({
     [databasePath, messageLimit]
   );
   const messages = useFirebaseQuery(messagesQuery);
-  const userRE = useMemo(() => makeUserRE(user.name), [user.name]);
+  const mentionRE = useMemo(() => makeMentionRE(user.name), [user.name]);
 
   const addMentioned = (cls, message) => {
-    return userRE.test(message) ? `${cls} ${classes.mentioned}` : cls;
+    return mentionRE.test(message) ? `${cls} ${classes.mentioned}` : cls;
   };
 
   function handleSubmit(event) {