fix: Fixed markdown message in channel preview (#1187)

Fixes [CLNP-4063](https://sendbird.atlassian.net/browse/CLNP-4063)

### Changelogs
- Fixed a bug where markdown messages are incorrectly displayed in
channel preview

<img width="695" alt="Screenshot 2024-08-05 at 12 34 49 PM"
src="https://github.com/user-attachments/assets/6273e660-145e-424f-932a-292079e74588">


### Disabled
<img width="1008" alt="Screenshot 2024-08-01 at 3 16 11 PM"
src="https://github.com/user-attachments/assets/360376e9-bc70-4fba-ab47-2fa9699bcb55">
<img width="449" alt="Screenshot 2024-08-01 at 3 19 25 PM"
src="https://github.com/user-attachments/assets/3614b659-59d2-4c33-ab50-87d57f5f7c43">

### Enabled
<img width="1014" alt="Screenshot 2024-08-01 at 3 10 04 PM"
src="https://github.com/user-attachments/assets/3c2e0f23-7dde-4a62-9c69-07225f9cc890">
<img width="434" alt="Screenshot 2024-08-01 at 3 19 33 PM"
src="https://github.com/user-attachments/assets/f990e6ee-f7cf-4202-9d92-41f3d1561cf7">


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

Author: chohongm

src/modules/GroupChannelList/components/GroupChannelListItem/GroupChannelListItemView.tsx

@@ -11,7 +11,7 @@ import { useLocalization } from '../../../../lib/LocalizationContext';
 import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
 import { noop } from '../../../../utils/utils';
 import { CoreMessageType, isVoiceMessage } from '../../../../utils';
-import { getChannelUnreadMessageCount, getLastMessage, getLastMessageCreatedAt, getTotalMembers } from './utils';
+import { getChannelUnreadMessageCount, getLastMessageText, getLastMessageCreatedAt, getTotalMembers } from './utils';
 
 import { TypingIndicatorText } from '../../../GroupChannel/components/TypingIndicator';
 import { GroupChannelPreviewActionProps } from '../GroupChannelPreviewAction';
@@ -24,6 +24,7 @@ import MentionUserLabel from '../../../../ui/MentionUserLabel';
 import MessageStatus from '../../../../ui/MessageStatus';
 import Modal from '../../../../ui/Modal';
 import TextButton from '../../../../ui/TextButton';
+import { getChannelPreviewMessage } from '../../../Message/utils/tokens/tokenize';
 
 export interface GroupChannelListItemBasicProps {
   tabIndex: number;
@@ -56,6 +57,10 @@ export const GroupChannelListItemView = ({
   const { dateLocale, stringSet } = useLocalization();
   const { isMobile } = useMediaQueryContext();
   const isMentionEnabled = config.groupChannel.enableMention;
+  const lastMessage = getLastMessageText(channel, stringSet);
+  const previewLastMessage = config.groupChannel.enableMarkdownForUserMessage
+    ? getChannelPreviewMessage(lastMessage)
+    : lastMessage;
 
   const [showMobileLeave, setShowMobileLeave] = useState(false);
   const onLongPress = useLongPress(
@@ -161,7 +166,7 @@ export const GroupChannelListItemView = ({
               )}
               {!isTyping
                 && !isVoiceMessage(channel.lastMessage as FileMessage | null)
-                && getLastMessage(channel, stringSet)}
+                && previewLastMessage}
               {!isTyping
                 && isVoiceMessage(channel.lastMessage as FileMessage | null)
                 && stringSet.VOICE_MESSAGE}

src/modules/GroupChannelList/components/GroupChannelListItem/__tests__/GroupChannelListItem.spec.js

@@ -1,5 +1,5 @@
 import {
-  getLastMessage,
+  getLastMessageText,
   getChannelTitle,
   getTotalMembers,
   getChannelUnreadMessageCount,
@@ -86,28 +86,28 @@ describe('GroupChannelListItem', () => {
       }
     };
     expect(
-      getLastMessage(channel, LabelStringSet)
+      getLastMessageText(channel, LabelStringSet)
     ).toBe('');
     expect(
-      getLastMessage(channel2, LabelStringSet)
+      getLastMessageText(channel2, LabelStringSet)
     ).toBe('');
     expect(
-      getLastMessage(channel3, LabelStringSet)
+      getLastMessageText(channel3, LabelStringSet)
     ).toBe(text);
     expect(
-      getLastMessage(channel4, LabelStringSet)
+      getLastMessageText(channel4, LabelStringSet)
     ).toBe(LabelStringSet.CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_GENERAL);
     expect(
-      getLastMessage(channel5, LabelStringSet)
+      getLastMessageText(channel5, LabelStringSet)
     ).toBe(LabelStringSet.CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_PHOTO);
     expect(
-      getLastMessage(channel6, LabelStringSet)
+      getLastMessageText(channel6, LabelStringSet)
     ).toBe(LabelStringSet.CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_GIF);
     expect(
-      getLastMessage(mfmGifChannel, LabelStringSet)
+      getLastMessageText(mfmGifChannel, LabelStringSet)
     ).toBe(LabelStringSet.CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_PHOTO);
     expect(
-        getLastMessage(mfmPhotoChannel, LabelStringSet)
+        getLastMessageText(mfmPhotoChannel, LabelStringSet)
     ).toBe(LabelStringSet.CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_PHOTO);
   });
 

src/modules/GroupChannelList/components/GroupChannelListItem/index.scss

@@ -122,7 +122,9 @@
 
       .sendbird-channel-preview__content__lower__last-message {
         overflow: hidden;
-        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
       }
 
       .sendbird-channel-preview__content__lower__unread-message-count {

src/modules/GroupChannelList/components/GroupChannelListItem/utils.ts

@@ -79,6 +79,8 @@ const getPrettyLastMessage = (message = null, stringSet = LabelStringSet) => {
   return message.message ?? '';
 };
 
-export const getLastMessage = (channel?: GroupChannel, stringSet = LabelStringSet) => channel?.lastMessage ? getPrettyLastMessage(channel?.lastMessage, stringSet) : '';
+export const getLastMessageText = (channel?: GroupChannel, stringSet = LabelStringSet) => {
+  return channel?.lastMessage ? getPrettyLastMessage(channel?.lastMessage, stringSet) : '';
+};
 
 export const getChannelUnreadMessageCount = (channel?: GroupChannel) => channel?.unreadMessageCount ? channel.unreadMessageCount : 0;

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

@@ -5,8 +5,85 @@ import {
   identifyUrlsAndStrings,
   combineNearbyStrings,
   getWhiteSpacePreservedText,
+  getChannelPreviewMessage,
+  markDownTokenResolver,
 } from '../tokenize';
-import { Token, UndeterminedToken } from '../types';
+import { MarkdownToken, Token, UndeterminedToken } from '../types';
+
+describe('markDownTokenResolver', () => {
+  it('when given tokens without markdown type, return original text without change.', () => {
+    const text = 'This is a channel\'s last message.';
+    const tokens = [
+      { type: 'undetermined', value: 'This is a channel\'s last message.' } as UndeterminedToken,
+    ];
+    const result = markDownTokenResolver(tokens);
+    expect(result).toEqual(text);
+  });
+
+  it('when given a tokens with markdown type, return transformed text (#1).', () => {
+    const text = 'This is a channel\'s last message with a bold url.';
+    const tokens = [
+      {
+        type: 'undetermined',
+        value: 'This is a channel\'s last message with a ',
+      } as UndeterminedToken,
+      {
+        type: 'markdown',
+        markdownType: 'url',
+        value: '[**bold url**](www.google.com)',
+        groups: [
+          '[**bold url**](www.google.com)',
+          '**bold url**',
+          'www.google.com',
+        ],
+      } as MarkdownToken,
+      { type: 'undetermined', value: '.' } as UndeterminedToken,
+    ];
+    const result = markDownTokenResolver(tokens);
+    expect(result).toEqual(text);
+  });
+
+  it('when given a tokens with markdown type, return transformed text (#2).', () => {
+    const text = 'This is a channel\'s last message with a bold url.';
+    const tokens = [
+      {
+        type: 'undetermined',
+        value: 'This is a channel\'s last message with a ',
+      } as UndeterminedToken,
+      {
+        type: 'markdown',
+        markdownType: 'bold',
+        value: '**[bold url](www.google.com)**',
+        groups: ['**[bold url](www.google.com)**', '[bold url](www.google.com)'],
+      } as MarkdownToken,
+      { type: 'undetermined', value: '.' } as UndeterminedToken,
+    ];
+    const result = markDownTokenResolver(tokens);
+    expect(result).toEqual(text);
+  });
+});
+
+describe('getChannelPreviewMessage', () => {
+  it('when given normal text, return original text without change.', () => {
+    const text = 'This is a channel\'s last message.';
+    const result = getChannelPreviewMessage(text);
+    expect(result).toEqual(text);
+  });
+
+  it('when given a text with markdown syntaxes, return transformed text (#1).', () => {
+    const text = 'This is a channel\'s last message with a [**bold url**](www.google.com).';
+    const expected = 'This is a channel\'s last message with a bold url.';
+    const result = getChannelPreviewMessage(text);
+    expect(result).toEqual(expected);
+  });
+
+  it('when given a text with markdown syntaxes, return transformed text (#2).', () => {
+    const text = 'This is a channel\'s last message with a **[bold url](www.google.com)**.';
+    const expected = 'This is a channel\'s last message with a bold url.';
+    const result = getChannelPreviewMessage(text);
+    expect(result).toEqual(expected);
+  });
+});
 
 describe('getUserMentionRegex', () => {
   it('should return a regex with the correct pattern', () => {

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

@@ -202,6 +202,25 @@ export function tokenizeMessage({
   return result;
 }
 
+export function getChannelPreviewMessage(messageText: string): string {
+  const partialResult = [{
+    type: TOKEN_TYPES.undetermined,
+    value: messageText,
+  }];
+  const tokens = splitTokensWithMarkdowns(partialResult);
+  return markDownTokenResolver(tokens);
+}
+
+export function markDownTokenResolver(tokens: Token[]): string {
+  const result = tokens.map((token) => {
+    if (token.type === TOKEN_TYPES.markdown) {
+      return markDownTokenResolver(tokenizeMarkdown({ messageText: (token as MarkdownToken).groups[1] }));
+    }
+    return token.value;
+  });
+  return result.join('');
+}
+
 export function tokenizeMarkdown({
   messageText,
 }): Token[] {