fix: avoid numbered top-level domain (#972)

## Description

- The regex has been modified to prevent numbers from being included in
the top-level domain.
- In the Word component, the URL validation for the URL type has been
removed.
- In the Word component, the use of UUID in the key has been removed.

ticket: [CLNP-2262]

[CLNP-2262]:
https://sendbird.atlassian.net/browse/CLNP-2262?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: bang9

src/modules/Message/utils/tokens/__tests__/tokenizeUtils.spec.ts

@@ -146,6 +146,26 @@ describe('identifyUrlsAndStrings', () => {
       ]);
     });
   });
+
+  it('should not parse invalid URLs', () => {
+    const invalidURLs = [
+      // with number top-level domain
+      'abcd.1234',
+    ];
+
+    invalidURLs.forEach((url) => {
+      const result = identifyUrlsAndStrings([
+        { type: 'undetermined', value: url },
+      ]);
+
+      expect(result).toEqual([
+        {
+          type: 'string',
+          value: url,
+        },
+      ]);
+    });
+  });
 });
 
 describe('combineNearbyStrings', () => {

src/modules/Message/utils/tokens/tokenize.ts

@@ -51,7 +51,7 @@ export function identifyMentions({
 }
 
 export function identifyUrlsAndStrings(token: Token[]): Token[] {
-  const URL_REG = /(?:https?:\/\/|www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.(xn--)?[a-z0-9-]{2,20}\b([-a-zA-Z0-9@:%_+[\],.~#?&/=]*[-a-zA-Z0-9@:%_+~#?&/=])*/g;
+  const URL_REG = /(?:https?:\/\/|www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.(xn--)?[a-z]{2,20}\b([-a-zA-Z0-9@:%_+[\],.~#?&/=]*[-a-zA-Z0-9@:%_+~#?&/=])*/g;
   const results: Token[] = token.map((token) => {
     if (token.type !== TOKEN_TYPES.undetermined) {
       return token;
@@ -73,15 +73,13 @@ export function identifyUrlsAndStrings(token: Token[]): Token[] {
       const head = restText.slice(0, start - cursor);
       const mid = text;
       const tail = restText.slice(end - cursor);
-      items.push({ value: head, type: TOKEN_TYPES.string }, { value: mid, type: TOKEN_TYPES.url });
+
+      if (head.length > 0) items.push({ value: head, type: TOKEN_TYPES.string });
+      items.push({ value: mid, type: TOKEN_TYPES.url });
       if (tail.length > 0) items.push({ value: tail, type: TOKEN_TYPES.string });
       cursor = end;
     });
 
-    // Remove the first empty string
-    if (items[0].value === '' && items[0].type === TOKEN_TYPES.string) {
-      items.shift();
-    }
     return items;
   }).flat();
 

src/ui/Word/index.tsx

@@ -8,7 +8,6 @@ import type { UserMessage } from '@sendbird/chat/message';
 
 import { LabelTypography } from '../Label';
 import LinkLabel from '../LinkLabel';
-import uuidv4 from '../../utils/uuid';
 import { convertWordToStringObj, StringObjType, StringObj } from '../../utils';
 import MentionLabel from '../MentionLabel';
 
@@ -35,57 +34,29 @@ export default function Word(props: WordProps): JSX.Element {
   return (
     <span className="sendbird-word">
       {
-        convertWordToStringObj(word, message?.mentionedUsers).map((stringObj) => {
+        convertWordToStringObj(word, message?.mentionedUsers).map((stringObj, index) => {
           const type = stringObj?.type || '';
           const value = stringObj?.value || '';
           const userId = stringObj?.userId || '';
+          const key = `${value}-${index}`;
           if (renderString && typeof renderString === 'function') {
             return renderString(stringObj);
           }
           if (type === StringObjType.mention) {
             return (
               <MentionLabel
+                key={key}
                 mentionTemplate={mentionTemplate}
                 mentionedUserId={userId}
                 mentionedUserNickname={value}
-                key={uuidv4()}
                 isByMe={isByMe}
               />
             );
           } else if (type === StringObjType.url) {
-            const urlRegex = /([a-zA-Z0-9]+:\/\/)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\.[A-Za-z]{2,4})(:[0-9]+)?(\/.*)?/;
-            const targetUrl = value.match(urlRegex)?.[0];
-            const stringUrl = { front: '', url: '', back: '' };
-            if (targetUrl) {
-              const targetUrlIndex = value.indexOf(targetUrl);
-              if (targetUrlIndex > 0) {
-                stringUrl.front = value.slice(0, targetUrlIndex);
-              }
-              stringUrl.url = value.slice(targetUrlIndex, targetUrlIndex + targetUrl.length);
-              if (targetUrlIndex + targetUrl.length < value.length) {
-                stringUrl.back = value.slice(targetUrlIndex + targetUrl.length);
-              }
-            }
-            if (targetUrl) {
-              return [
-                stringUrl.front ? stringUrl.front : '',
-                stringUrl.url ? (
-                  <LinkLabel
-                    className="sendbird-word__url"
-                    key={uuidv4()}
-                    src={stringUrl.url}
-                    type={LabelTypography.BODY_1}
-                  >
-                    {stringUrl.url}
-                  </LinkLabel>
-                ) : null,
-                stringUrl.back ? stringUrl.back : '',
-              ];
-            }
             return (
               <LinkLabel
+                key={key}
                 className="sendbird-word__url"
-                key={uuidv4()}
                 src={word}
                 type={LabelTypography.BODY_1}
               >