Merge pull request #31011 from Expensify/revert-30412-fix/naitve-emoj…

…i-picker Revert "feat: add whitespace after inserting emoji via native keyboard" (cherry picked from commit 6cda38a)
Expensify · Nov 7, 2023 · 0db1293 · 0db1293
1 parent 39ac220
commit 0db1293
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 75 deletions.
diff --git a/src/libs/ComposerUtils/index.ts b/src/libs/ComposerUtils/index.ts
@@ -32,11 +32,7 @@ function canSkipTriggerHotkeys(isSmallScreenWidth: boolean, isKeyboardShown: boo
  */
 function getCommonSuffixLength(str1: string, str2: string): number {
     let i = 0;
-    if (str1.length === 0 || str2.length === 0) {
-        return 0;
-    }
-    const minLen = Math.min(str1.length, str2.length);
-    while (i < minLen && str1[str1.length - 1 - i] === str2[str2.length - 1 - i]) {
+    while (str1[str1.length - 1 - i] === str2[str2.length - 1 - i]) {
         i++;
     }
     return i;

diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
@@ -119,7 +119,6 @@ function ComposerWithSuggestions({
         return draft;
     });
     const commentRef = useRef(value);
-    const lastTextRef = useRef(value);
 
     const {isSmallScreenWidth} = useWindowDimensions();
     const maxComposerLines = isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES;
@@ -199,50 +198,6 @@ function ComposerWithSuggestions({
         RNTextInputReset.resetKeyboardInput(findNodeHandle(textInputRef.current));
     }, [textInputRef]);
 
-    /**
-     * Find the newly added characters between the previous text and the new text based on the selection.
-     *
-     * @param {string} prevText - The previous text.
-     * @param {string} newText - The new text.
-     * @returns {object} An object containing information about the newly added characters.
-     * @property {number} startIndex - The start index of the newly added characters in the new text.
-     * @property {number} endIndex - The end index of the newly added characters in the new text.
-     * @property {string} diff - The newly added characters.
-     */
-    const findNewlyAddedChars = useCallback(
-        (prevText, newText) => {
-            let startIndex = -1;
-            let endIndex = -1;
-            let currentIndex = 0;
-
-            // Find the first character mismatch with newText
-            while (currentIndex < newText.length && prevText.charAt(currentIndex) === newText.charAt(currentIndex) && selection.start > currentIndex) {
-                currentIndex++;
-            }
-
-            if (currentIndex < newText.length) {
-                startIndex = currentIndex;
-
-                // if text is getting pasted over find length of common suffix and subtract it from new text length
-                if (selection.end - selection.start > 0) {
-                    const commonSuffixLength = ComposerUtils.getCommonSuffixLength(prevText, newText);
-                    endIndex = newText.length - commonSuffixLength;
-                } else {
-                    endIndex = currentIndex + (newText.length - prevText.length);
-                }
-            }
-
-            return {
-                startIndex,
-                endIndex,
-                diff: newText.substring(startIndex, endIndex),
-            };
-        },
-        [selection.end, selection.start],
-    );
-
-    const insertWhiteSpace = (text, index) => `${text.slice(0, index)} ${text.slice(index)}`;
-
     const debouncedSaveReportComment = useMemo(
         () =>
             _.debounce((selectedReportID, newComment) => {
@@ -260,14 +215,7 @@ function ComposerWithSuggestions({
     const updateComment = useCallback(
         (commentValue, shouldDebounceSaveComment) => {
             raiseIsScrollLikelyLayoutTriggered();
-            const {startIndex, endIndex, diff} = findNewlyAddedChars(lastTextRef.current, commentValue);
-            const isEmojiInserted = diff.length && endIndex > startIndex && EmojiUtils.containsOnlyEmojis(diff);
-            const {text: newComment, emojis} = EmojiUtils.replaceAndExtractEmojis(
-                isEmojiInserted ? insertWhiteSpace(commentValue, endIndex) : commentValue,
-                preferredSkinTone,
-                preferredLocale,
-            );
-
+            const {text: newComment, emojis} = EmojiUtils.replaceAndExtractEmojis(commentValue, preferredSkinTone, preferredLocale);
             if (!_.isEmpty(emojis)) {
                 const newEmojis = EmojiUtils.getAddedEmojis(emojis, emojisPresentBefore.current);
                 if (!_.isEmpty(newEmojis)) {
@@ -312,14 +260,13 @@ function ComposerWithSuggestions({
             }
         },
         [
-            raiseIsScrollLikelyLayoutTriggered,
-            findNewlyAddedChars,
-            preferredSkinTone,
+            debouncedUpdateFrequentlyUsedEmojis,
             preferredLocale,
+            preferredSkinTone,
+            reportID,
             setIsCommentEmpty,
-            debouncedUpdateFrequentlyUsedEmojis,
             suggestionsRef,
-            reportID,
+            raiseIsScrollLikelyLayoutTriggered,
             debouncedSaveReportComment,
         ],
     );
@@ -370,8 +317,14 @@ function ComposerWithSuggestions({
      * @param {Boolean} shouldAddTrailSpace
      */
     const replaceSelectionWithText = useCallback(
-        (text) => {
-            updateComment(ComposerUtils.insertText(commentRef.current, selection, text));
+        (text, shouldAddTrailSpace = true) => {
+            const updatedText = shouldAddTrailSpace ? `${text} ` : text;
+            const selectionSpaceLength = shouldAddTrailSpace ? CONST.SPACE_LENGTH : 0;
+            updateComment(ComposerUtils.insertText(commentRef.current, selection, updatedText));
+            setSelection((prevSelection) => ({
+                start: prevSelection.start + text.length + selectionSpaceLength,
+                end: prevSelection.start + text.length + selectionSpaceLength,
+            }));
         },
         [selection, updateComment],
     );
@@ -495,12 +448,7 @@ function ComposerWithSuggestions({
             }
 
             focus();
-            // Reset cursor to last known location
-            setSelection((prevSelection) => ({
-                start: prevSelection.start + 1,
-                end: prevSelection.end + 1,
-            }));
-            replaceSelectionWithText(e.key);
+            replaceSelectionWithText(e.key, false);
         },
         [checkComposerVisibility, focus, replaceSelectionWithText],
     );
@@ -564,10 +512,6 @@ function ComposerWithSuggestions({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    useEffect(() => {
-        lastTextRef.current = value;
-    }, [value]);
-
     useImperativeHandle(
         forwardedRef,
         () => ({