Merge pull request #30412 from aswin-s/fix/naitve-emoji-picker

feat: add whitespace after inserting emoji via native keyboard

src/libs/ComposerUtils/index.ts

@@ -32,7 +32,11 @@ function canSkipTriggerHotkeys(isSmallScreenWidth: boolean, isKeyboardShown: boo
  */
 function getCommonSuffixLength(str1: string, str2: string): number {
  let i = 0;
- while (str1[str1.length - 1 - i] === str2[str2.length - 1 - i]) {
+ 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]) {
  i++;
  }
  return i;

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js

@@ -117,6 +117,7 @@ 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;
@@ -196,6 +197,50 @@ 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) => {
@@ -213,7 +258,14 @@ function ComposerWithSuggestions({
  const updateComment = useCallback(
  (commentValue, shouldDebounceSaveComment) => {
  raiseIsScrollLikelyLayoutTriggered();
- const {text: newComment, emojis} = EmojiUtils.replaceAndExtractEmojis(commentValue, preferredSkinTone, preferredLocale);
+ 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,
+ );
+
  if (!_.isEmpty(emojis)) {
  const newEmojis = EmojiUtils.getAddedEmojis(emojis, emojisPresentBefore.current);
  if (!_.isEmpty(newEmojis)) {
@@ -264,13 +316,14 @@ function ComposerWithSuggestions({
  }
  },
  [
- debouncedUpdateFrequentlyUsedEmojis,
- preferredLocale,
+ raiseIsScrollLikelyLayoutTriggered,
+ findNewlyAddedChars,
  preferredSkinTone,
- reportID,
+ preferredLocale,
  setIsCommentEmpty,
+ debouncedUpdateFrequentlyUsedEmojis,
  suggestionsRef,
- raiseIsScrollLikelyLayoutTriggered,
+ reportID,
  debouncedSaveReportComment,
  ],
  );
@@ -321,14 +374,8 @@ function ComposerWithSuggestions({
  * @param {Boolean} shouldAddTrailSpace
  */
  const replaceSelectionWithText = useCallback(
- (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,
- }));
+ (text) => {
+ updateComment(ComposerUtils.insertText(commentRef.current, selection, text));
  },
  [selection, updateComment],
  );
@@ -452,7 +499,12 @@ function ComposerWithSuggestions({
  }
 
  focus();
- replaceSelectionWithText(e.key, false);
+ // Reset cursor to last known location
+ setSelection((prevSelection) => ({
+ start: prevSelection.start + 1,
+ end: prevSelection.end + 1,
+ }));
+ replaceSelectionWithText(e.key);
  },
  [checkComposerVisibility, focus, replaceSelectionWithText],
  );
@@ -514,6 +566,10 @@ function ComposerWithSuggestions({
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
+ useEffect(() => {
+ lastTextRef.current = value;
+ }, [value]);
+
  useImperativeHandle(
  forwardedRef,
  () => ({