diff --git a/src/chat-mention-plugin/component.tsx b/src/chat-mention-plugin/component.tsx index 8e6ef30..848a4cf 100644 --- a/src/chat-mention-plugin/component.tsx +++ b/src/chat-mention-plugin/component.tsx @@ -15,15 +15,19 @@ function ChatMention({ pluginUuid: uuid }: ChatMentionProps): React.ReactElement useEffect(() => { if (response.data && userListBasicInf.data) { - const userNames = userListBasicInf.data.user.map((user) => user.name); + const userNames = userListBasicInf.data.user + .map((user) => user.name) + .sort((a, b) => b.length - a.length); const idsToApply = response.data.filter((message) => { const mentions = message.message.match(REGEX); if (mentions) { const mentionMatchesUser = mentions.some((mention) => { - const userMatched = userNames.some((name) => mention.includes(name)); - return userMatched; + return userNames.some((name) => { + const userNameRegex = new RegExp(`@${name}\\b`, 'i'); + return userNameRegex.test(mention.trim()); + }); }); return mentionMatchesUser; } @@ -51,14 +55,15 @@ function ChatMention({ pluginUuid: uuid }: ChatMentionProps): React.ReactElement const style = 'color: #4185cf; background-color: #f2f6f8;'; mentions.forEach((mention) => { - userListBasicInf.data.user.forEach((user) => { - const userNameRegex = new RegExp(`@${user.name}\\b`); - if (userNameRegex.test(mention)) { + userListBasicInf.data.user + .sort((a, b) => b.name.length - a.name.length) + .forEach((user) => { + const userNameRegex = new RegExp(`@${user.name}\\b`, 'gi'); const mentionText = `@${user.name}`; - updatedHtml = updatedHtml.replace(mentionText, `${mentionText}`); - } - }); + updatedHtml = updatedHtml.replace(userNameRegex, `${mentionText}`); + }); }); + chatMessageDomElement.innerHTML = updatedHtml; } });