[Refactoring] Composer: Leverage RegExp for emoji and mention tooltips (#1285)

src/components/middle/composer/hooks/useEmojiTooltip.ts

@@ -17,15 +17,16 @@ let emojiDataPromise: Promise<EmojiModule>;
 let emojiRawData: EmojiRawData;
 let emojiData: EmojiData;
 
-let RE_NOT_EMOJI_SEARCH: RegExp;
+let RE_EMOJI_SEARCH: RegExp;
 const EMOJIS_LIMIT = 36;
 const FILTER_MIN_LENGTH = 2;
+const RE_BR = /(<br>|<br\s?\/>)/g;
 
 try {
-  RE_NOT_EMOJI_SEARCH = new RegExp('[^-+_:\\p{L}\\p{N}]+', 'iu');
+  RE_EMOJI_SEARCH = new RegExp('(^|\\s):[-+_:\\p{L}\\p{N}]*$', 'gui');
 } catch (e) {
   // Support for older versions of firefox
-  RE_NOT_EMOJI_SEARCH = new RegExp('[^-+_:\\d\\wа-яё]+', 'i');
+  RE_EMOJI_SEARCH = new RegExp('(^|\\s):[-+_:\\d\\wа-яё]*$', 'gi');
 }
 
 export default function useEmojiTooltip(
@@ -158,7 +159,7 @@ export default function useEmojiTooltip(
   ]);
 
   const insertEmoji = useCallback((textEmoji: string, isForce?: boolean) => {
-    const atIndex = html.lastIndexOf(':', isForce ? -1 : undefined);
+    const atIndex = html.lastIndexOf(':', isForce ? html.lastIndexOf(':') - 1 : undefined);
     if (atIndex !== -1) {
       onUpdateHtml(`${html.substr(0, atIndex)}${textEmoji}`);
       const messageInput = document.getElementById(inputId)!;
@@ -185,21 +186,9 @@ export default function useEmojiTooltip(
 }
 
 function getEmojiCode(html: string) {
-  const tempEl = document.createElement('div');
+  const emojis = html.replace(RE_BR, '\n').replace(/\n$/i, '').match(RE_EMOJI_SEARCH);
-  tempEl.innerHTML = html.replace('<br>', '\n');
-  const text = tempEl.innerText.replace(/\n$/i, '');
 
-  const lastSymbol = text[text.length - 1];
+  return emojis ? emojis[0].trim() : undefined;
-  const lastWord = text.split(RE_NOT_EMOJI_SEARCH).pop();
-
-  if (
-    !text.length || RE_NOT_EMOJI_SEARCH.test(lastSymbol)
-    || !lastWord || !lastWord.startsWith(':')
-  ) {
-    return undefined;
-  }
-
-  return lastWord.toLowerCase();
 }
 
 async function ensureEmojiData() {

src/components/middle/composer/hooks/useMentionTooltip.ts

@@ -11,9 +11,9 @@ import useFlag from '../../../../hooks/useFlag';
 import { unique } from '../../../../util/iteratees';
 import { throttle } from '../../../../util/schedulers';
 
-const tempEl = document.createElement('div');
-const RE_NOT_USERNAME_SEARCH = /[^@_\d\wа-яё]+/i;
 const runThrottled = throttle((cb) => cb(), 500, true);
+const RE_BR = /(<br>|<br\s?\/>)/g;
+const RE_USERNAME_SEARCH = new RegExp('(^|\\s)@[\\w\\d_-]*$', 'gi');
 
 export default function useMentionTooltip(
   canSuggestMembers: boolean | undefined,
@@ -120,25 +120,11 @@ export default function useMentionTooltip(
 }
 
 function getUsernameFilter(html: string) {
-  tempEl.innerHTML = html;
+  const username = html.replace(RE_BR, '\n').replace(/\n$/i, '').match(RE_USERNAME_SEARCH);
-  const text = tempEl.innerText.replace(/\n$/i, '');
 
-  const lastSymbol = text[text.length - 1];
+  return username ? username[0].trim() : undefined;
-  const lastWord = text.split(RE_NOT_USERNAME_SEARCH).pop();
-
-  if (
-    !text.length || RE_NOT_USERNAME_SEARCH.test(lastSymbol)
-    || !lastWord || !lastWord.startsWith('@')
-  ) {
-    return undefined;
-  }
-
-  return lastWord;
 }
 
 function canSuggestInlineBots(html: string) {
-  tempEl.innerHTML = html;
+  return html.startsWith('@');
-  const text = tempEl.innerText;
-
-  return text.startsWith('@');
 }

src/modules/helpers/chats.ts

@@ -17,7 +17,7 @@ import { formatDateToString, formatTime } from '../../util/dateFormat';
 
 const FOREVER_BANNED_DATE = Date.now() / 1000 + 31622400; // 366 days
 
-const VEIFIED_PRIORITY_BASE = 3e9;
+const VERIFIED_PRIORITY_BASE = 3e9;
 const PINNED_PRIORITY_BASE = 3e8;
 
 export function isChatPrivate(chatId: number) {
@@ -507,7 +507,7 @@ export function sortChatIds(
     }
 
     if (shouldPrioritizeVerified && chat.isVerified) {
-      priority += VEIFIED_PRIORITY_BASE; // ~100 years in seconds
+      priority += VERIFIED_PRIORITY_BASE; // ~100 years in seconds
     }
 
     if (priorityIds && priorityIds.includes(id)) {