Merge pull request #29239 from paultsimura/fix/28754-suggestion-betwe…

…en-ats fix: Chat - App closes mention suggestions when cursor is between double @
Expensify · Oct 17, 2023 · 75a2cc9 · 75a2cc9
2 parents c5a5244 + 3c5a381
commit 75a2cc9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -1273,6 +1273,8 @@ const CONST = {
         CARD_EXPIRATION_DATE: /^(0[1-9]|1[0-2])([^0-9])?([0-9]{4}|([0-9]{2}))$/,
         ROOM_NAME: /^#[\p{Ll}0-9-]{1,80}$/u,
 
+        // eslint-disable-next-line max-len, no-misleading-character-class
+        EMOJI: /[\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu,
         // eslint-disable-next-line max-len, no-misleading-character-class
         EMOJIS: /[\p{Extended_Pictographic}](\u200D[\p{Extended_Pictographic}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3/gu,
 
@@ -1291,18 +1293,26 @@ const CONST = {
         HAS_COLON_ONLY_AT_THE_BEGINNING: /^:[^:]+$/,
         HAS_AT_MOST_TWO_AT_SIGNS: /^@[^@]*@?[^@]*$/,
 
-        SPECIAL_CHAR_OR_EMOJI:
-            // eslint-disable-next-line no-misleading-character-class
-            /[\n\s,/?"{}[\]()&_~^%\\;`$=#<>!*\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu,
+        SPECIAL_CHAR: /[,/?"{}[\]()&^%;`$=#<>!*]/g,
+
+        get SPECIAL_CHAR_OR_EMOJI() {
+            return new RegExp(`[_~\\n\\s]|${this.SPECIAL_CHAR.source}|${this.EMOJI.source}`, 'gu');
+        },
 
-        SPACE_OR_EMOJI:
-            // eslint-disable-next-line no-misleading-character-class
-            /(\s+|(?:[\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3)+)/gu,
+        get SPACE_OR_EMOJI() {
+            return new RegExp(`(\\s+|(?:${this.EMOJI.source})+)`, 'gu');
+        },
+
+        // Define the regular expression pattern to find a potential end of a mention suggestion:
+        // It might be a space, a newline character, an emoji, or a special character (excluding underscores & tildes, which might be used in usernames)
+        get MENTION_BREAKER() {
+            return new RegExp(`[\\n\\s]|${this.SPECIAL_CHAR.source}|${this.EMOJI.source}`, 'gu');
+        },
 
         // Define the regular expression pattern to match a string starting with an at sign and ending with a space or newline character
-        MENTION_REPLACER:
-            // eslint-disable-next-line no-misleading-character-class
-            /^@[^\n\r]*?(?=$|[\s,/?"{}[\]()&^%\\;`$=#<>!*\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3)/u,
+        get MENTION_REPLACER() {
+            return new RegExp(`^@[^\\n\\r]*?(?=$|\\s|${this.SPECIAL_CHAR.source}|${this.EMOJI.source})`, 'u');
+        },
 
         MERGED_ACCOUNT_PREFIX: /^(MERGED_\d+@)/,
 

diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js
@@ -188,17 +188,17 @@ function SuggestionMention({
             }
 
             const valueAfterTheCursor = value.substring(selectionEnd);
-            const indexOfFirstWhitespaceCharOrEmojiAfterTheCursor = valueAfterTheCursor.search(CONST.REGEX.NEW_LINE_OR_WHITE_SPACE_OR_EMOJI);
+            const indexOfFirstSpecialCharOrEmojiAfterTheCursor = valueAfterTheCursor.search(CONST.REGEX.MENTION_BREAKER);
 
-            let indexOfLastNonWhitespaceCharAfterTheCursor;
-            if (indexOfFirstWhitespaceCharOrEmojiAfterTheCursor === -1) {
-                // we didn't find a whitespace/emoji after the cursor, so we will use the entire string
-                indexOfLastNonWhitespaceCharAfterTheCursor = value.length;
+            let suggestionEndIndex;
+            if (indexOfFirstSpecialCharOrEmojiAfterTheCursor === -1) {
+                // We didn't find a special char/whitespace/emoji after the cursor, so we will use the entire string
+                suggestionEndIndex = value.length;
             } else {
-                indexOfLastNonWhitespaceCharAfterTheCursor = indexOfFirstWhitespaceCharOrEmojiAfterTheCursor + selectionEnd;
+                suggestionEndIndex = indexOfFirstSpecialCharOrEmojiAfterTheCursor + selectionEnd;
             }
 
-            const leftString = value.substring(0, indexOfLastNonWhitespaceCharAfterTheCursor);
+            const leftString = value.substring(0, suggestionEndIndex);
             const words = leftString.split(CONST.REGEX.SPACE_OR_EMOJI);
             const lastWord = _.last(words);