fix: Use same word break and URL activation logic on messages (#392)

* Use the same word-splitting logic on the TextMessage and OGMessage
  * TextMessage will also allow opening the URL links
* Use the same word wrapping style on the TextMessage and OGMessage

Author: HoonBaek

src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap

@@ -52,7 +52,21 @@ exports[`ui/MessageContent should do a snapshot test of the MessageContent DOM 1
           <div
             class="sendbird-message-content__middle__message-item-body sendbird-text-message-item-body incoming  "
           >
-            First second third
+            <span
+              class="sendbird-word"
+            >
+              First
+            </span>
+            <span
+              class="sendbird-word"
+            >
+              second
+            </span>
+            <span
+              class="sendbird-word"
+            >
+              third
+            </span>
           </div>
         </span>
         <span

src/ui/OGMessageItemBody/index.scss

@@ -18,6 +18,7 @@
     box-sizing: border-box;
     border-radius: 16px 16px 0px 0px;
     word-break: break-word;
+    white-space: pre-line;
 
     .sendbird-og-message-item-body__text-bubble__message {
       display: inline;

src/ui/OGMessageItemBody/index.tsx

@@ -1,5 +1,5 @@
 import './index.scss';
-import React, { ReactElement, useContext } from 'react';
+import React, { ReactElement, useContext, useMemo } from 'react';
 import type { UserMessage } from '@sendbird/chat/message';
 
 import Word from '../Word';
@@ -32,6 +32,12 @@ export default function OGMessageItemBody({
     if (message?.ogMetaData?.url) window.open(message?.ogMetaData?.url);
   };
   const isMessageMentioned = isMentionEnabled && message?.mentionedMessageTemplate?.length > 0 && message?.mentionedUsers?.length > 0;
+  const sentences: Array<Array<string>> = useMemo(() => {
+    if (isMessageMentioned) {
+      return message?.mentionedMessageTemplate?.split(/\n/).map((sentence) => sentence.split(/\s/));
+    }
+    return message?.message?.split(/\n/).map((sentence) => sentence.split(/\s/));
+  }, [message?.mentionedMessageTemplate]);
   return (
     <div className={getClassName([
       className,
@@ -47,27 +53,21 @@ export default function OGMessageItemBody({
       >
         <div className="sendbird-og-message-item-body__text-bubble">
           {
-            isMessageMentioned
-              ? (
-                message?.mentionedMessageTemplate.split(' ').map((word: string) => (
-                  <Word
-                    key={uuidv4()}
-                    word={word}
-                    message={message}
-                    isByMe={isByMe}
-                  />
-                ))
-              )
-              : (
-                message?.message.split(' ').map((word: string) => (
-                  <Word
-                    key={uuidv4()}
-                    word={word}
-                    message={message}
-                    isByMe={isByMe}
-                  />
-                ))
-              )
+            sentences?.map((sentence, index) => {
+              return [
+                sentence?.map((word) => {
+                  return (
+                    <Word
+                      key={uuidv4()}
+                      word={word}
+                      message={message}
+                      isByMe={isByMe}
+                    />
+                  );
+                }),
+                sentences?.[index + 1] ? <br /> : null,
+              ]
+            })
           }
           {
             isEditedMessage(message) && (

src/ui/TextMessageItemBody/__tests__/__snapshots__/TextMessageItemBody.spec.js.snap

@@ -8,7 +8,31 @@ exports[`ui/TextMessageItemBody should do a snapshot test of the TextMessageItem
     <div
       class="class-name-for-snapshot sendbird-text-message-item-body outgoing mouse-hover "
     >
-      First second third fourth fifth
+      <span
+        class="sendbird-word"
+      >
+        First
+      </span>
+      <span
+        class="sendbird-word"
+      >
+        second
+      </span>
+      <span
+        class="sendbird-word"
+      >
+        third
+      </span>
+      <span
+        class="sendbird-word"
+      >
+        fourth
+      </span>
+      <span
+        class="sendbird-word"
+      >
+        fifth
+      </span>
       <span
         class="sendbird-text-message-item-body__message edited sendbird-label sendbird-label--body-1 sendbird-label--color-oncontent-2"
       >

src/ui/TextMessageItemBody/index.tsx

@@ -28,7 +28,10 @@ export default function TextMessageItemBody({
   const { stringSet } = useContext(LocalizationContext);
   const isMessageMentioned = isMentionEnabled && message?.mentionedMessageTemplate?.length > 0 && message?.mentionedUsers?.length > 0;
   const sentences: Array<Array<string>> = useMemo(() => {
-    return message?.mentionedMessageTemplate?.split(/\n/).map((sentence) => sentence.split(/\s/));
+    if (isMessageMentioned) {
+      return message?.mentionedMessageTemplate?.split(/\n/).map((sentence) => sentence.split(/\s/));
+    }
+    return message?.message?.split(/\n/).map((sentence) => sentence.split(/\s/));
   }, [message?.mentionedMessageTemplate]);
   return (
     <Label
@@ -43,25 +46,21 @@ export default function TextMessageItemBody({
         (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',
       ])}>
         {
-          isMessageMentioned
-           ? (
-              sentences.map((sentence, index) => {
-                return [
-                  sentence.map((word) => {
-                    return (
-                      <Word
-                        key={uuidv4()}
-                        word={word}
-                        message={message}
-                        isByMe={isByMe}
-                      />
-                    );
-                  }),
-                  sentences?.[index + 1] ? <br /> : null,
-                ]
-              })
-           )
-           : message?.message
+          sentences.map((sentence, index) => {
+            return [
+              sentence.map((word) => {
+                return (
+                  <Word
+                    key={uuidv4()}
+                    word={word}
+                    message={message}
+                    isByMe={isByMe}
+                  />
+                );
+              }),
+              sentences?.[index + 1] ? <br /> : null,
+            ]
+          })
         }
         {
           isEditedMessage(message) && (

src/ui/Word/index.scss

@@ -4,6 +4,7 @@
   display: inline;
   margin-right: 4px;
   height: fit-content;
+  white-space: nowrap;
   .sendbird-word__url,
   .sendbird-word__normal {
     display: inline-block;