fix: Allow multiple line in the MessageInput of Mobile env (#985)

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

### Issue
In a desktop layout, prevent line breaks from occurring even when the
'Enter' key is pressed.
It triggers sending the message.

But in the Mobile layout, this behavior doesn't fit mobile UX.
So need to allow line breaks when users press the 'Enter' key.

### Fix & ChangeLog
* Add a prop `isMobile` to the ui/MessageInput
* Fix the `editMessage` logic in the MessageInput to apply the line
break

Author: HoonBaek

src/modules/Channel/context/const.ts

@@ -1,11 +1,6 @@
+// For legacy
+export * from '../../GroupChannel/context/const';
+
+// These are not used for collections(GroupChannel)
 export const PREV_RESULT_SIZE = 30;
 export const NEXT_RESULT_SIZE = 15;
-
-export const MAX_USER_MENTION_COUNT = 10;
-export const MAX_USER_SUGGESTION_COUNT = 15;
-export const USER_MENTION_TEMP_CHAR = '@';
-
-export enum ThreadReplySelectType {
-  PARENT = 'PARENT',
-  THREAD = 'THREAD',
-}

src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx

@@ -200,6 +200,7 @@ export const MessageInputWrapperView = React.forwardRef((
           className="sendbird-message-input-wrapper__message-input"
           channel={currentChannel}
           channelUrl={currentChannel?.url}
+          isMobile={isMobile}
           acceptableMimeTypes={acceptableMimeTypes}
           mentionSelectedUser={selectedUser}
           isMentionEnabled={isMentionEnabled}

src/modules/Thread/components/ThreadMessageInput/index.tsx

@@ -4,16 +4,19 @@ import { MutedState } from '@sendbird/chat/groupChannel';
 import './index.scss';
 
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
+import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
+import { useThreadContext } from '../../context/ThreadProvider';
+import { useLocalization } from '../../../../lib/LocalizationContext';
+
 import MessageInput from '../../../../ui/MessageInput';
 import { MessageInputKeys } from '../../../../ui/MessageInput/const';
 import { SuggestedMentionList } from '../SuggestedMentionList';
-import { useThreadContext } from '../../context/ThreadProvider';
-import { useLocalization } from '../../../../lib/LocalizationContext';
 import { VoiceMessageInputWrapper } from '../../../GroupChannel/components/MessageInputWrapper';
 import { Role } from '../../../../lib/types';
+
 import { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';
-import { isDisabledBecauseFrozen, isDisabledBecauseMuted } from '../../../Channel/context/utils';
 import { useHandleUploadFiles } from '../../../Channel/context/hooks/useHandleUploadFiles';
+import { isDisabledBecauseFrozen, isDisabledBecauseMuted } from '../../../Channel/context/utils';
 
 export interface ThreadMessageInputProps {
   className?: string;
@@ -37,6 +40,7 @@ const ThreadMessageInput = (
   } = props;
 
   const { config } = useSendbirdStateContext();
+  const { isMobile } = useMediaQueryContext();
   const { stringSet } = useLocalization();
   const {
     isMentionEnabled,
@@ -163,11 +167,12 @@ const ThreadMessageInput = (
             <MessageInput
               className="sendbird-thread-message-input__message-input"
               messageFieldId="sendbird-message-input-text-field--thread"
-              disabled={threadInputDisabled}
               channel={currentChannel}
+              channelUrl={currentChannel?.url}
+              isMobile={isMobile}
+              disabled={threadInputDisabled}
               acceptableMimeTypes={acceptableMimeTypes}
               setMentionedUsers={setMentionedUsers}
-              channelUrl={currentChannel?.url}
               mentionSelectedUser={selectedUser}
               isMentionEnabled={isMentionEnabled}
               isVoiceMessageEnabled={isVoiceMessageEnabled}

src/ui/MessageInput/index.tsx

@@ -1,7 +1,7 @@
 import React, { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import './index.scss';
-import { MessageInputKeys, NodeNames, NodeTypes } from './const';
+import { MessageInputKeys, NodeTypes } from './const';
 
 import { USER_MENTION_TEMP_CHAR } from '../../modules/Channel/context/const';
 import IconButton from '../IconButton';
@@ -12,7 +12,7 @@ import Label, { LabelColors, LabelTypography } from '../Label';
 import { useLocalization } from '../../lib/LocalizationContext';
 import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 
-import { isChannelTypeSupportsMultipleFilesMessage, nodeListToArray, sanitizeString } from './utils';
+import { extractTextAndMentions, isChannelTypeSupportsMultipleFilesMessage, nodeListToArray, sanitizeString } from './utils';
 import { arrayEqual, getClassName, getMimeTypesUIKitAccepts } from '../../utils';
 import usePaste from './hooks/usePaste';
 import { tokenizeMessage } from '../../modules/Message/utils/tokens/tokenize';
@@ -65,6 +65,7 @@ type MessageInputProps = {
   className?: string | string[];
   messageFieldId?: string;
   isEdit?: boolean;
+  isMobile?: boolean;
   isMentionEnabled?: boolean;
   isVoiceMessageEnabled?: boolean;
   isSelectingMultipleFilesEnabled?: boolean;
@@ -96,6 +97,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
     className = '',
     messageFieldId = '',
     isEdit = false,
+    isMobile = false,
     isMentionEnabled = false,
     isVoiceMessageEnabled = true,
     isSelectingMultipleFilesEnabled = false,
@@ -363,30 +365,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
   const sendMessage = () => {
     const textField = internalRef?.current;
     if (!isEdit && textField?.textContent) {
-      let messageText = '';
-      let mentionTemplate = '';
-      textField.childNodes.forEach((node) => {
-        if (node.nodeType === NodeTypes.ElementNode && node.nodeName === NodeNames.Span) {
-          // @ts-ignore
-          const { innerText, dataset = {} } = node;
-          const { userid = '' } = dataset;
-          messageText += innerText;
-          mentionTemplate += `${USER_MENTION_TEMP_CHAR}{${userid}}`;
-        } else if (node.nodeType === NodeTypes.ElementNode && node.nodeName === NodeNames.Br) {
-          messageText += '\n';
-          mentionTemplate += '\n';
-        } else if (node?.nodeType === NodeTypes.ElementNode && node?.nodeName === NodeNames.Div) {
-          // handles newline in safari
-          const { textContent = '' } = node;
-          messageText += `\n${textContent}`;
-          mentionTemplate += `\n${textContent}`;
-        } else {
-          // other nodes including text node
-          const { textContent = '' } = node;
-          messageText += textContent;
-          mentionTemplate += textContent;
-        }
-      });
+      const { messageText, mentionTemplate } = extractTextAndMentions(textField.childNodes);
       const params = { message: messageText, mentionTemplate };
       onSendMessage(params);
       resetInput(internalRef);
@@ -401,24 +380,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
     const textField = internalRef?.current;
     const messageId = message?.messageId;
     if (isEdit && messageId) {
-      let messageText = '';
-      let mentionTemplate = '';
-      textField.childNodes.forEach((node) => {
-        if (node.nodeType === NodeTypes.ElementNode && node.nodeName === NodeNames.Span) {
-          // @ts-ignore
-          const { innerText, dataset = {} } = node;
-          const { userid = '' } = dataset;
-          messageText += innerText;
-          mentionTemplate += `${USER_MENTION_TEMP_CHAR}{${userid}}`;
-          messageText += '\n';
-          mentionTemplate += '\n';
-        } else {
-          // other nodes including text node
-          const { textContent = '' } = node;
-          messageText += textContent;
-          mentionTemplate += textContent;
-        }
-      });
+      const { messageText, mentionTemplate } = extractTextAndMentions(textField.childNodes);
       const params = { messageId, message: messageText, mentionTemplate };
       onUpdateMessage(params);
       resetInput(internalRef);
@@ -459,8 +421,15 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
               if (
                 !e.shiftKey
                 && e.key === MessageInputKeys.Enter
+                && !isMobile
                 && internalRef?.current?.textContent?.trim().length > 0
                 && e?.nativeEvent?.isComposing !== true
+                /**
+                 * NOTE: What isComposing does?
+                 * Check if the user has finished composing characters
+                 * (e.g., for languages like Korean, Japanese, where characters are composed from multiple keystrokes)
+                 * Prevents executing the code while the user is still composing characters.
+                 */
               ) {
                 /**
                  * NOTE: contentEditable does not work as expected in mobile WebKit(Safari).

src/ui/MessageInput/utils.ts

@@ -1,5 +1,7 @@
 // Sanitize that special characters of HTML tags cause XSS issue
 import { BaseChannel } from '@sendbird/chat';
+import { NodeNames, NodeTypes } from './const';
+import { USER_MENTION_TEMP_CHAR } from '../../modules/GroupChannel/context/const';
 
 export const sanitizeString = (str?: string) => {
   return str?.replace(/[\u00A0-\u9999<>]/gim, (i) => ''.concat('&#', String(i.charCodeAt(0)), ';'));
@@ -21,3 +23,34 @@ export const nodeListToArray = (childNodes?: Node['childNodes'] | null) => {
 export function isChannelTypeSupportsMultipleFilesMessage(channel: BaseChannel) {
   return channel && channel.isGroupChannel?.() && !channel.isBroadcast && !channel.isSuper;
 }
+
+// Type guard: This function ensures that the node contains `innerText` and `dataset` properties
+function isHTMLElement(node: ChildNode): node is HTMLElement {
+  return node.nodeType === NodeTypes.ElementNode;
+}
+
+// eslint-disable-next-line no-undef
+export function extractTextAndMentions(childNodes: NodeListOf<ChildNode>) {
+  let messageText = '';
+  let mentionTemplate = '';
+  childNodes.forEach((node) => {
+    if (isHTMLElement(node) && node.nodeName === NodeNames.Span) {
+      const { innerText, dataset = {} } = node;
+      const { userid = '' } = dataset;
+      messageText += innerText;
+      mentionTemplate += `${USER_MENTION_TEMP_CHAR}{${userid}}`;
+    } else if (isHTMLElement(node) && node.nodeName === NodeNames.Br) {
+      messageText += '\n';
+      mentionTemplate += '\n';
+    } else if (isHTMLElement(node) && node.nodeName === NodeNames.Div) {
+      const { textContent = '' } = node;
+      messageText += `\n${textContent}`;
+      mentionTemplate += `\n${textContent}`;
+    } else {
+      const { textContent = '' } = node;
+      messageText += textContent;
+      mentionTemplate += textContent;
+    }
+  });
+  return { messageText, mentionTemplate };
+}