fix: Words-breaks happening mid word (#544)

Words were breaking mid word because all white spaces
were converted into nbsps. CSS couldnt discern that nbsps
are whitespaces, so wrapping didnt work well

Fixes: https://sendbird.atlassian.net/browse/UIKIT-3889

Author: Sravan S

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

@@ -114,14 +114,46 @@ describe('combineNearbyStrings', () => {
 });
 
 describe('getWhiteSpacePreservedText', () => {
-  it('should keep the leading and trailing white spaces', () => {
+  it('should convert leading, trailing white space to nbsp', () => {
     const text = ' aaa ';
     const result = getWhiteSpacePreservedText(text);
     expect(result).toEqual('\u00A0aaa\u00A0');
   });
+
+  it('should convert leading, trailing white space to nbsp', () => {
+    const text = '  aaa  ';
+    const result = getWhiteSpacePreservedText(text);
+    expect(result).toEqual('\u00A0\u00A0aaa\u00A0\u00A0');
+  });
+
+  it('should convert leading, trailing white space to nbsp, while preserving space in between', () => {
+    const text = ' aaa   cc  dd ';
+    const result = getWhiteSpacePreservedText(text);
+    expect(result).toEqual('\u00A0aaa   cc  dd\u00A0');
+  });
+
   it('should keep the new lines', () => {
     const text = ' aaa\naa';
     const result = getWhiteSpacePreservedText(text);
     expect(result).toEqual('\u00A0aaa\naa');
   });
+
+  it('should add the padding after new lines', () => {
+    const text = 'line1\n  line2_with_prefix_space\n line3_with_prefix_space\nline4';
+    const expected = 'line1\n\u00A0\u00A0line2_with_prefix_space\n\u00A0line3_with_prefix_space\nline4';
+    const result = getWhiteSpacePreservedText(text);
+    expect(result).toEqual(expected);
+  });
+
+  it('should keep the tabs', () => {
+    const text = ' aaa\taa';
+    const result = getWhiteSpacePreservedText(text);
+    expect(result).toEqual('\u00A0aaa\taa');
+  });
+
+  it('should handle empty string', () => {
+    const text = '';
+    const result = getWhiteSpacePreservedText(text);
+    expect(result).toEqual('');
+  });
 });

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

@@ -111,10 +111,27 @@ export function tokenizeMessage({
  * Don't need to use this util in DOM element since the white spaces will be kept as is,
  * but will need if the text is wrapped \w React.Fragement or </>
  * @link https://sendbird.slack.com/archives/GPGHESTL3/p1681180484341369
+ * Or!!! -> convert any space or tab in leading/trailing to nbsp
+ * to preserve the leading & trailing white spaces
  */
 export function getWhiteSpacePreservedText(text: string): string {
-  return text
-    // convert any space or tab into the non-breaking space
-    // to preserve the leading & trailing white spaces
-    .replace(/([ \t]+)/g, (_, spaces) => '\u00A0'.repeat(spaces.length));
+  const NON_BREAKING_SPACE = '\u00A0';
+  // Split the input string into lines
+  const lines = text.split('\n');
+
+  // Process each line and convert leading and trailing white spaces to "\u00A0"
+  const processedLines = lines.map((line) => {
+    const leadingWhitespace = line.match(/^\s*/)?.[0] || '';
+    const trailingWhitespace = line.match(/\s*$/)?.[0] || '';
+
+    const convertedLeadingWhitespace = leadingWhitespace.replace(/ /g, NON_BREAKING_SPACE);
+    const convertedTrailingWhitespace = trailingWhitespace.replace(/ /g, NON_BREAKING_SPACE);
+
+    return convertedLeadingWhitespace + line.trim() + convertedTrailingWhitespace;
+  });
+
+  // Combine the processed lines into a new string with "\n"
+  const result = processedLines.join('\n');
+
+  return result;
 }

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

@@ -52,7 +52,7 @@ 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
+            First second third
           </div>
         </span>
         <span

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

@@ -61,7 +61,7 @@ exports[`ui/OpenchannelOGMessage should do a snapshot test of the OpenchannelOGM
           <span
             class="sendbird-openchannel-og-message__top__right__description__message sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
           >
-            I am the Message
+            I am the Message
           </span>
         </div>
       </div>

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

@@ -8,7 +8,7 @@ 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
+      First second third fourth fifth
       <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

@@ -19,7 +19,7 @@ interface Props {
 }
 
 export default function TextMessageItemBody({
-  className,
+  className = '',
   message,
   isByMe = false,
   mouseHover = false,

src/ui/Word/index.scss

@@ -3,10 +3,11 @@
 .sendbird-word {
   display: inline;
   height: fit-content;
-  .sendbird-word__url,
-  .sendbird-word__normal {
-    margin: 0 4px;
-    display: inline-block;
-    color: inherit;
-  }
+}
+
+.sendbird-word__url {
+  margin: 0 4px;
+  display: inline;
+  color: inherit;
+  word-break: break-all;
 }