Merge pull request #21749 from getusha/fix-space-inconsistency-insert…

…ing-emoji Fix space inconsistency inserting emoji
Expensify · Jun 28, 2023 · ecfcd83 · ecfcd83
2 parents 3c339b7 + 2a1caf9
commit ecfcd83
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 27 deletions.
diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js
@@ -220,11 +220,10 @@ const getEmojiCodeWithSkinColor = (item, preferredSkinToneIndex) => {
  * If we're on mobile, we also add a space after the emoji granted there's no text after it.
  *
  * @param {String} text
- * @param {Boolean} isSmallScreenWidth
  * @param {Number} preferredSkinTone
  * @returns {Object}
  */
-function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE) {
+function replaceEmojis(text, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE) {
     let newText = text;
     const emojis = [];
     const emojiData = text.match(CONST.REGEX.EMOJI_NAME);
@@ -244,9 +243,10 @@ function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = CON
 
             // If this is the last emoji in the message and it's the end of the message so far,
             // add a space after it so the user can keep typing easily.
-            if (isSmallScreenWidth && i === emojiData.length - 1 && text.endsWith(emojiData[i])) {
+            if (i === emojiData.length - 1) {
                 emojiReplacement += ' ';
             }
+
             newText = newText.replace(emojiData[i], emojiReplacement);
         }
     }

diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -667,11 +667,11 @@ class ReportActionCompose extends React.Component {
      * @param {String} emoji
      */
     addEmojiToTextBox(emoji) {
-        this.updateComment(ComposerUtils.insertText(this.comment, this.state.selection, emoji));
+        this.updateComment(ComposerUtils.insertText(this.comment, this.state.selection, `${emoji} `));
         this.setState((prevState) => ({
             selection: {
-                start: prevState.selection.start + emoji.length,
-                end: prevState.selection.start + emoji.length,
+                start: prevState.selection.start + emoji.length + CONST.SPACE_LENGTH,
+                end: prevState.selection.start + emoji.length + CONST.SPACE_LENGTH,
             },
         }));
     }
@@ -726,7 +726,7 @@ class ReportActionCompose extends React.Component {
      * @param {Boolean} shouldDebounceSaveComment
      */
     updateComment(comment, shouldDebounceSaveComment) {
-        const {text: newComment = '', emojis = []} = EmojiUtils.replaceEmojis(comment, this.props.isSmallScreenWidth, this.props.preferredSkinTone);
+        const {text: newComment = '', emojis = []} = EmojiUtils.replaceEmojis(comment, this.props.preferredSkinTone);
 
         if (!_.isEmpty(emojis)) {
             User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(emojis));

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -145,7 +145,7 @@ function ReportActionItemMessageEdit(props) {
      */
     const updateDraft = useCallback(
         (newDraftInput) => {
-            const {text: newDraft = '', emojis = []} = EmojiUtils.replaceEmojis(newDraftInput, isSmallScreenWidth, props.preferredSkinTone);
+            const {text: newDraft = '', emojis = []} = EmojiUtils.replaceEmojis(newDraftInput, props.preferredSkinTone);
 
             if (!_.isEmpty(emojis)) {
                 User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(emojis));
@@ -172,7 +172,7 @@ function ReportActionItemMessageEdit(props) {
                 debouncedSaveDraft(props.action.message[0].html);
             }
         },
-        [props.action.message, debouncedSaveDraft, isSmallScreenWidth, props.preferredSkinTone],
+        [props.action.message, debouncedSaveDraft, props.preferredSkinTone],
     );
 
     /**
@@ -223,10 +223,10 @@ function ReportActionItemMessageEdit(props) {
      */
     const addEmojiToTextBox = (emoji) => {
         setSelection((prevSelection) => ({
-            start: prevSelection.start + emoji.length,
-            end: prevSelection.start + emoji.length,
+            start: prevSelection.start + emoji.length + CONST.SPACE_LENGTH,
+            end: prevSelection.start + emoji.length + CONST.SPACE_LENGTH,
         }));
-        updateDraft(ComposerUtils.insertText(draft, selection, emoji));
+        updateDraft(ComposerUtils.insertText(draft, selection, `${emoji} `));
     };
 
     /**

diff --git a/tests/unit/EmojiTest.js b/tests/unit/EmojiTest.js
@@ -101,24 +101,14 @@ describe('EmojiTest', () => {
         expect(EmojiUtils.containsOnlyEmojis('🅃🄴🅂🅃')).toBe(false);
     });
 
-    it('replaces an emoji code with an emoji and a space on mobile', () => {
+    it('replaces an emoji code with an emoji and a space', () => {
         const text = 'Hi :smile:';
-        expect(lodashGet(EmojiUtils.replaceEmojis(text, true), 'text')).toBe('Hi 😄 ');
+        expect(lodashGet(EmojiUtils.replaceEmojis(text), 'text')).toBe('Hi 😄 ');
     });
 
-    it('will not add a space after the last emoji if there is text after it', () => {
-        const text = 'Hi :smile::wave:no space after last emoji';
-        expect(lodashGet(EmojiUtils.replaceEmojis(text), 'text')).toBe('Hi 😄👋no space after last emoji');
-    });
-
-    it('will not add a space after the last emoji when there is text after it on mobile', () => {
-        const text = 'Hi :smile::wave:no space after last emoji';
-        expect(lodashGet(EmojiUtils.replaceEmojis(text, true), 'text')).toBe('Hi 😄👋no space after last emoji');
-    });
-
-    it("will not add a space after the last emoji if we're not on mobile", () => {
-        const text = 'Hi :smile:';
-        expect(lodashGet(EmojiUtils.replaceEmojis(text), 'text')).toBe('Hi 😄');
+    it('will add a space after the last emoji if there is text after it', () => {
+        const text = 'Hi :smile::wave:space after last emoji';
+        expect(lodashGet(EmojiUtils.replaceEmojis(text), 'text')).toBe('Hi 😄👋 space after last emoji');
     });
 
     it('suggests emojis when typing emojis prefix after colon', () => {