fix: Ensure correct caret placement and rect calculation after paste (#1238)

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

This PR resolves an issue where `getBoundingClientRect()` would return
`(0, 0, 0, 0)` after a paste operation due to improper caret placement.
The following changes ensure accurate caret positioning and consistent
rect values:

1. **Zero-width space (`\u200B`)**: Appended to the pasted content to
ensure the caret has a valid text node to reside in.
2. **Selection and Range Synchronization**: The range is collapsed and
selection is reset to align with the updated DOM.
3. **Caret Adjustment**: The caret is moved to the end of the newly
inserted content to maintain user expectation.

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

Author: HoonBaek

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

@@ -4,16 +4,36 @@ import DOMPurify from 'dompurify';
 import { inserTemplateToDOM } from './insertTemplate';
 import { sanitizeString } from '../../utils';
 import { DynamicProps } from './types';
-import { createPasteNode, domToMessageTemplate, extractTextFromNodes, getLeafNodes, getUsersFromWords, hasMention } from './utils';
-
-// exported, should be backward compatible
-// conditions to test:
-// 1. paste simple text
-// 2. paste text with mention
-// 3. paste text with mention and text
-// 4. paste text with mention and text and paste again before and after
-// 5. copy message with mention(only one mention, no other text) and paste
-// 6. copy message with mention from input and paste(before and after)
+import { domToMessageTemplate, extractTextFromNodes, getLeafNodes, getUsersFromWords, hasMention } from './utils';
+
+function pasteContentAtCaret(content: string) {
+  const selection = window.getSelection(); // Get the current selection
+  if (selection && selection.rangeCount > 0) {
+    const range = selection.getRangeAt(selection.rangeCount - 1); // Get the last range
+
+    range.deleteContents(); // Clear any existing content
+
+    // Create a new text node with the content and a Zero-width space
+    const textNode = document.createTextNode(content + '\u200B');
+    range.insertNode(textNode); // Insert the new text node at the caret position
+
+    // Move the caret to the end of the inserted content
+    range.setStart(textNode, textNode.length);
+    range.collapse(true); // Collapse the range (no text selection)
+
+    // Reset the selection with the updated range
+    selection.removeAllRanges();
+    selection.addRange(range); // Apply the updated selection
+  }
+}
+
+function createPasteNodeWithContent(html: string): HTMLDivElement {
+  const pasteNode = document.createElement('div');
+  pasteNode.innerHTML = html;
+  return pasteNode;
+}
+
+// usePaste Hook
 export function usePaste({
   ref,
   setIsInput,
@@ -22,42 +42,40 @@ export function usePaste({
 }: DynamicProps): (e: React.ClipboardEvent<HTMLDivElement>) => void {
   return useCallback((e) => {
     e.preventDefault();
+
     const html = e.clipboardData.getData('text/html');
-    // simple text, continue as normal
+    const text = e.clipboardData.getData('text') || getURIListText(e);
+
+    // 1. Simple text paste: no HTML present
     if (!html) {
-      const text = e.clipboardData.getData('text') || getURIListText(e);
-      document.execCommand('insertText', false, sanitizeString(text));
+      pasteContentAtCaret(sanitizeString(text));
       setIsInput(true);
       return;
     }
 
-    // has html, check if there are mentions, sanitize and insert
+    // 2. HTML paste: process mentions and sanitized content
     const purifier = DOMPurify(window);
-    const clean = purifier.sanitize(html);
-    const pasteNode = createPasteNode();
-    if (pasteNode) {
-      pasteNode.innerHTML = clean;
-      // does not have mention, continue as normal
-      if (!hasMention(pasteNode)) {
-        // to preserve space between words
-        const text = extractTextFromNodes(Array.from(pasteNode.children) as HTMLSpanElement[]);
-        document.execCommand('insertText', false, sanitizeString(text));
-        pasteNode.remove();
-        setIsInput(true);
-        return;
-      }
-
-      // has mention, collect leaf nodes and parse words
-      const leafNodes = getLeafNodes(pasteNode);
-      const words = domToMessageTemplate(leafNodes);
-      const mentionedUsers = channel.isGroupChannel() ? getUsersFromWords(words, channel) : [];
+    const cleanHtml = purifier.sanitize(html);
+    const pasteNode = createPasteNodeWithContent(cleanHtml);
 
-      // side effects
-      setMentionedUsers(mentionedUsers);
-      inserTemplateToDOM(words);
+    if (!hasMention(pasteNode)) {
+      // No mention, paste as plain text
+      const extractedText = extractTextFromNodes(Array.from(pasteNode.children) as HTMLSpanElement[]);
+      pasteContentAtCaret(sanitizeString(extractedText));
       pasteNode.remove();
+      setIsInput(true);
+      return;
     }
 
+    // 3. Mentions present: process mentions and update state
+    const leafNodes = getLeafNodes(pasteNode);
+    const words = domToMessageTemplate(leafNodes);
+    const mentionedUsers = channel.isGroupChannel() ? getUsersFromWords(words, channel) : [];
+
+    setMentionedUsers(mentionedUsers); // Update mentioned users state
+    inserTemplateToDOM(words); // Insert mentions and content into the DOM
+    pasteNode.remove();
+
     setIsInput(true);
   }, [ref, setIsInput, channel, setMentionedUsers]);
 }
@@ -78,5 +96,5 @@ function getURIListText(e: React.ClipboardEvent<HTMLDivElement>) {
     }, '');
 }
 
-// to do -> In the future donot export default
+// to do -> In the future don't export default
 export default usePaste;

src/ui/MessageInput/index.tsx

@@ -14,7 +14,7 @@ import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 
 import { extractTextAndMentions, isChannelTypeSupportsMultipleFilesMessage, nodeListToArray, sanitizeString } from './utils';
 import { arrayEqual, getMimeTypesUIKitAccepts } from '../../utils';
-import usePaste from './hooks/usePaste';
+import { usePaste } from './hooks/usePaste';
 import { tokenizeMessage } from '../../modules/Message/utils/tokens/tokenize';
 import { USER_MENTION_PREFIX } from '../../modules/Message/consts';
 import { TOKEN_TYPES } from '../../modules/Message/utils/tokens/types';
@@ -32,25 +32,6 @@ const noop = () => {
   return null;
 };
 
-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) => {
   if (ref && ref.current) {
     ref.current.innerHTML = '';
@@ -425,10 +406,33 @@ 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);
+  const adjustScrollToCaret = () => {
+    const inputRef = internalRef;
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+
+    // Get the last range (caret or selected text position) from the selection
+    const range = selection.getRangeAt(selection.rangeCount - 1);
+    const rect = range.getBoundingClientRect();
+    const container = inputRef.current?.getBoundingClientRect();
+    if (!container || !inputRef.current) return;
+
+    // If the caret (or selection) is below the visible container area, scroll down
+    if (rect.bottom > container.bottom) {
+      const scrollAmount = Math.min(
+        rect.bottom - container.bottom, // Calculate how much we need to scroll
+        inputRef.current.scrollHeight - inputRef.current.clientHeight, // Prevent over-scrolling
+      );
+      inputRef.current.scrollTop += scrollAmount; // Adjust the scroll position downward
+    }
+    // If the caret (or selection) is above the visible container area, scroll up
+    else if (rect.top < container.top) {
+      const scrollAmount = Math.min(
+        container.top - rect.top, // Calculate how much we need to scroll
+        inputRef.current.scrollTop, // Prevent scrolling beyond the top of the container
+      );
+      inputRef.current.scrollTop -= scrollAmount; // Adjust the scroll position upward
+    }
   };
 
   return (
@@ -456,7 +460,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
           // @ts-ignore
           disabled={disabled}
           maxLength={maxLength}
-          onKeyDown={handleCommonBehavior((e) => {
+          onKeyDown={(e) => {
             const preventEvent = onKeyDown(e);
             if (preventEvent) {
               e.preventDefault();
@@ -487,24 +491,27 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
                 internalRef.current.removeChild(internalRef.current.childNodes[1]);
               }
             }
-          })}
-          onKeyUp={handleCommonBehavior((e) => {
+          }}
+          onKeyUp={(e) => {
             const preventEvent = onKeyUp(e);
             if (preventEvent) {
               e.preventDefault();
             } else {
               useMentionInputDetection();
             }
-          })}
-          onClick={handleCommonBehavior(() => {
+          }}
+          onClick={() => {
             useMentionInputDetection();
-          })}
-          onInput={handleCommonBehavior(() => {
+          }}
+          onInput={() => {
             onStartTyping();
             setIsInput(internalRef?.current?.textContent ? internalRef.current.textContent.trim().length > 0 : false);
             useMentionedLabelDetection();
-          })}
-          onPaste={handleCommonBehavior(onPaste)}
+          }}
+          onPaste={(e) => {
+            onPaste(e);
+            setTimeout(adjustScrollToCaret);
+          }}
         />
         {/* placeholder */}
         {(internalRef?.current?.textContent?.length ?? 0) === 0 && (