fix: Doesn't scroll in the MessageInput when pasting (#1224)

[CLNP-5328](https://sendbird.atlassian.net/browse/CLNP-5328)
[SBISSUE-17384](https://sendbird.atlassian.net/browse/SBISSUE-17384)

#### ChangeLog
Fixes
* Modified the `MessageInput` to scroll to the caret position when
pasting text.
* The maximum height of the `MessageInput` has been extended to `'92px'`

#### Fix
Functions
* Created a `scrollToCaret` and replaced the `displayCaret`
* Created a `handleCommonBehavior` for the common behavior of event
handling logics
* Removed an unused logic `setHeight`
Variables
* Set a default value to the `internalRef`
CSS
* Extended the maximum input height from `56px` to `92px`
Chores
* Fixed typo 'easiily' to 'easily'

Author: HoonBaek

src/ui/MessageInput/hooks/usePaste/index.ts

@@ -17,7 +17,6 @@ import { createPasteNode, domToMessageTemplate, extractTextFromNodes, getLeafNod
 export function usePaste({
   ref,
   setIsInput,
-  setHeight,
   channel,
   setMentionedUsers,
 }: DynamicProps): (e: React.ClipboardEvent<HTMLDivElement>) => void {
@@ -29,7 +28,6 @@ export function usePaste({
       const text = e.clipboardData.getData('text') || getURIListText(e);
       document.execCommand('insertText', false, sanitizeString(text));
       setIsInput(true);
-      setHeight();
       return;
     }
 
@@ -46,7 +44,6 @@ export function usePaste({
         document.execCommand('insertText', false, sanitizeString(text));
         pasteNode.remove();
         setIsInput(true);
-        setHeight();
         return;
       }
 
@@ -62,8 +59,7 @@ export function usePaste({
     }
 
     setIsInput(true);
-    setHeight();
-  }, [ref, setIsInput, setHeight, channel, setMentionedUsers]);
+  }, [ref, setIsInput, channel, setMentionedUsers]);
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#dragging_links

src/ui/MessageInput/hooks/usePaste/types.ts

@@ -12,5 +12,4 @@ export type DynamicProps = {
   channel: OpenChannel | GroupChannel;
   setMentionedUsers: React.Dispatch<React.SetStateAction<User[]>>;
   setIsInput: React.Dispatch<React.SetStateAction<boolean>>;
-  setHeight: () => void;
 };

src/ui/MessageInput/index.scss

@@ -14,7 +14,7 @@
     font-stretch: normal;
     font-style: normal;
     line-height: 1.43;
-    height: 56px;
+    max-height: 92px;
     overflow-y: scroll;
     letter-spacing: normal;
     padding: 18px 64px 18px 16px;

src/ui/MessageInput/index.tsx

@@ -28,20 +28,27 @@ import { OpenChannel } from '@sendbird/chat/openChannel';
 import { UserMessage } from '@sendbird/chat/message';
 
 const TEXT_FIELD_ID = 'sendbird-message-input-text-field';
-const LINE_HEIGHT = 76;
-const DEFAULT_CHAT_VIEW_HEIGHT = 600;
 const noop = () => {
   return null;
 };
 
-const displayCaret = (element: HTMLInputElement, position: number) => {
-  const range = document.createRange();
-  const sel = window.getSelection();
-  range.setStart(element.childNodes[0], position);
-  range.collapse(true);
-  sel?.removeAllRanges();
-  sel?.addRange(range);
-  element.focus();
+const scrollToCaret = () => {
+  const selection = window.getSelection();
+  if (selection && selection.rangeCount > 0) {
+    const range = selection.getRangeAt(0);
+    const caretNode = range.endContainer;
+
+    // Ensure the caret is in a text node
+    if (caretNode.nodeType === NodeTypes.TextNode) {
+      const parentElement = caretNode.parentElement;
+
+      // Scroll the parent element of the caret into view
+      parentElement?.scrollIntoView?.({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
+    }
+  }
 };
 
 const resetInput = (ref: MutableRefObject<HTMLInputElement | null> | null) => {
@@ -133,7 +140,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
     acceptableMimeTypes,
   } = props;
 
-  const internalRef = (externalRef && 'current' in externalRef) ? externalRef : null;
+  const internalRef = (externalRef && 'current' in externalRef) ? externalRef : useRef(null);
   const ghostInputRef = useRef<HTMLInputElement>(null);
 
   const textFieldId = messageFieldId || TEXT_FIELD_ID;
@@ -149,46 +156,15 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
   const [isInput, setIsInput] = useState(false);
   const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([]);
   const [targetStringInfo, setTargetStringInfo] = useState({ ...initialTargetStringInfo });
-  const setHeight = useCallback(
-    () => {
-      const elem = internalRef?.current;
-      if (!elem) return;
-
-      try {
-        const estimatedChatViewHeight = window.document.body.offsetHeight || DEFAULT_CHAT_VIEW_HEIGHT;
-        const MAX_HEIGHT = estimatedChatViewHeight * 0.6;
-        if (elem.scrollHeight >= LINE_HEIGHT) {
-          if (MAX_HEIGHT < elem.scrollHeight) {
-            elem.style.height = 'auto';
-            elem.style.height = `${MAX_HEIGHT}px`;
-          } else {
-            elem.style.height = '';
-          }
-        }
-      } catch (error) {
-        // error
-      }
-    },
-    [],
-  );
 
   // #Edit mode
-  // for easilly initialize input value from outside, but
+  // for easily initialize input value from outside, but
   // useEffect(_, [channelUrl]) erase it
   const initialValue = props?.value;
   useEffect(() => {
     const textField = internalRef?.current;
-    try {
-      if (textField && initialValue) {
-        textField.innerHTML = initialValue;
-        displayCaret(textField, initialValue?.length);
-      }
-    } catch {
-      //
-    }
     setMentionedUserIds([]);
     setIsInput(textField?.textContent ? textField.textContent.trim().length > 0 : false);
-    setHeight();
   }, [initialValue]);
 
   // #Mention | Clear input value when channel changes
@@ -243,7 +219,6 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
         setMentionedUserIds([]);
       }
       setIsInput(textField?.textContent ? textField?.textContent?.trim().length > 0 : false);
-      setHeight();
     }
   }, [isEdit, message]);
 
@@ -314,7 +289,6 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
           textField.focus();
         }
         setTargetStringInfo({ ...initialTargetStringInfo });
-        setHeight();
         useMentionedLabelDetection();
       }
     }
@@ -411,7 +385,6 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
         }
 
         setIsInput(false);
-        setHeight();
       }
     } catch (error) {
       eventHandlers?.message?.onSendMessageFailed?.(message, error);
@@ -437,7 +410,6 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
     setMentionedUsers,
     channel,
     setIsInput,
-    setHeight,
   });
 
   const uploadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -453,6 +425,12 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
     }
   };
 
+  const handleCommonBehavior = (handleEvent) => {
+    scrollToCaret();
+    type CommonEvent<T> = React.KeyboardEvent<T> | React.MouseEvent<T> | React.ClipboardEvent<T>;
+    return (e: CommonEvent<HTMLDivElement>) => handleEvent(e);
+  };
+
   return (
     <form className={classnames(
       ...(Array.isArray(className) ? className : [className]),
@@ -474,11 +452,11 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
           contentEditable={!disabled}
           role="textbox"
           aria-label="Text Input"
-          ref={externalRef}
+          ref={internalRef}
           // @ts-ignore
           disabled={disabled}
           maxLength={maxLength}
-          onKeyDown={(e) => {
+          onKeyDown={handleCommonBehavior((e) => {
             const preventEvent = onKeyDown(e);
             if (preventEvent) {
               e.preventDefault();
@@ -509,25 +487,24 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
                 internalRef.current.removeChild(internalRef.current.childNodes[1]);
               }
             }
-          }}
-          onKeyUp={(e) => {
+          })}
+          onKeyUp={handleCommonBehavior((e) => {
             const preventEvent = onKeyUp(e);
             if (preventEvent) {
               e.preventDefault();
             } else {
               useMentionInputDetection();
             }
-          }}
-          onClick={() => {
+          })}
+          onClick={handleCommonBehavior(() => {
             useMentionInputDetection();
-          }}
-          onInput={() => {
-            setHeight();
+          })}
+          onInput={handleCommonBehavior(() => {
             onStartTyping();
             setIsInput(internalRef?.current?.textContent ? internalRef.current.textContent.trim().length > 0 : false);
             useMentionedLabelDetection();
-          }}
-          onPaste={onPaste}
+          })}
+          onPaste={handleCommonBehavior(onPaste)}
         />
         {/* placeholder */}
         {(internalRef?.current?.textContent?.length ?? 0) === 0 && (