Create a common function to insert an emoji into a text

src/components/Composer/index.js

@@ -9,7 +9,7 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import Growl from '../../libs/Growl';
 import themeColors from '../../styles/themes/default';
 import updateIsFullComposerAvailable from '../../libs/ComposerUtils/updateIsFullComposerAvailable';
-import getNumberOfLines from '../../libs/ComposerUtils/index';
+import * as ComposerUtils from '../../libs/ComposerUtils';
 import * as Browser from '../../libs/Browser';
 import Clipboard from '../../libs/Clipboard';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
@@ -343,7 +343,7 @@ class Composer extends React.Component {
             const lineHeight = parseInt(computedStyle.lineHeight, 10) || 20;
             const paddingTopAndBottom = parseInt(computedStyle.paddingBottom, 10)
             + parseInt(computedStyle.paddingTop, 10);
-            const computedNumberOfLines = getNumberOfLines(this.props.maxLines, lineHeight, paddingTopAndBottom, this.textInput.scrollHeight);
+            const computedNumberOfLines = ComposerUtils.getNumberOfLines(this.props.maxLines, lineHeight, paddingTopAndBottom, this.textInput.scrollHeight);
             const numberOfLines = computedNumberOfLines === 0 ? this.props.numberOfLines : computedNumberOfLines;
             updateIsFullComposerAvailable(this.props, numberOfLines);
             this.setState({

src/libs/ComposerUtils/getNumberOfLines/index.js

@@ -0,0 +1,17 @@
+/**
+ * Get the current number of lines in the composer
+ *
+ * @param {Number} maxLines
+ * @param {Number} lineHeight
+ * @param {Number} paddingTopAndBottom
+ * @param {Number} scrollHeight
+ *
+ * @returns {Number}
+ */
+function getNumberOfLines(maxLines, lineHeight, paddingTopAndBottom, scrollHeight) {
+    let newNumberOfLines = Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight);
+    newNumberOfLines = maxLines <= 0 ? newNumberOfLines : Math.min(newNumberOfLines, maxLines);
+    return newNumberOfLines;
+}
+
+export default getNumberOfLines;

src/libs/ComposerUtils/getNumberOfLines/index.native.js

@@ -0,0 +1,14 @@
+/**
+ * Get the current number of lines in the composer
+ *
+ * @param {Number} lineHeight
+ * @param {Number} paddingTopAndBottom
+ * @param {Number} scrollHeight
+ *
+ * @returns {Number}
+ */
+function getNumberOfLines(lineHeight, paddingTopAndBottom, scrollHeight) {
+    return Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight);
+}
+
+export default getNumberOfLines;

src/libs/ComposerUtils/index.js

@@ -1,17 +1,19 @@
+import getNumberOfLines from './getNumberOfLines';
+import updateNumberOfLines from './updateNumberOfLines';
+
 /**
- * Get the current number of lines in the composer
- *
- * @param {Number} maxLines
- * @param {Number} lineHeight
- * @param {Number} paddingTopAndBottom
- * @param {Number} scrollHeight
- *
- * @returns {Number}
+ * Replace substring between selection with a text.
+ * @param {String} text
+ * @param {Object} selection
+ * @param {String} textToInsert
+ * @returns {String}
  */
-function getNumberOfLines(maxLines, lineHeight, paddingTopAndBottom, scrollHeight) {
-    let newNumberOfLines = Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight);
-    newNumberOfLines = maxLines <= 0 ? newNumberOfLines : Math.min(newNumberOfLines, maxLines);
-    return newNumberOfLines;
+function insertText(text, selection, textToInsert) {
+    return text.slice(0, selection.start) + textToInsert + text.slice(selection.end, text.length);
 }
 
-export default getNumberOfLines;
+export {
+    getNumberOfLines,
+    updateNumberOfLines,
+    insertText,
+};

src/libs/ComposerUtils/updateNumberOfLines/index.js

@@ -0,0 +1 @@
+export default {};

src/libs/ComposerUtils/index.native.js → src/libs/ComposerUtils/updateNumberOfLines/index.native.js

@@ -1,19 +1,7 @@
 import lodashGet from 'lodash/get';
-import styles from '../../styles/styles';
-import updateIsFullComposerAvailable from './updateIsFullComposerAvailable';
-
-/**
- * Get the current number of lines in the composer
- *
- * @param {Number} lineHeight
- * @param {Number} paddingTopAndBottom
- * @param {Number} scrollHeight
- *
- * @returns {Number}
- */
-function getNumberOfLines(lineHeight, paddingTopAndBottom, scrollHeight) {
-    return Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight);
-}
+import styles from '../../../styles/styles';
+import updateIsFullComposerAvailable from '../updateIsFullComposerAvailable';
+import getNumberOfLines from '../getNumberOfLines';
 
 /**
  * Check the current scrollHeight of the textarea (minus any padding) and
@@ -32,7 +20,4 @@ function updateNumberOfLines(props, e) {
     updateIsFullComposerAvailable(props, numberOfLines);
 }
 
-export {
-    getNumberOfLines,
-    updateNumberOfLines,
-};
+export default updateNumberOfLines;

src/pages/home/report/ReportActionCompose.js

@@ -53,6 +53,7 @@ import withKeyboardState, {keyboardStatePropTypes} from '../../../components/wit
 import ArrowKeyFocusManager from '../../../components/ArrowKeyFocusManager';
 import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 import KeyboardShortcut from '../../../libs/KeyboardShortcut';
+import * as ComposerUtils from '../../../libs/ComposerUtils';
 import * as Welcome from '../../../libs/actions/Welcome';
 import Permissions from '../../../libs/Permissions';
 
@@ -512,17 +513,13 @@ class ReportActionCompose extends React.Component {
      * @param {String} emoji
      */
     addEmojiToTextBox(emoji) {
-        const emojiWithSpace = `${emoji} `;
-        const newComment = this.comment.slice(0, this.state.selection.start)
-            + emojiWithSpace
-            + this.comment.slice(this.state.selection.end, this.comment.length);
         this.setState(prevState => ({
             selection: {
-                start: prevState.selection.start + emojiWithSpace.length,
-                end: prevState.selection.start + emojiWithSpace.length,
+                start: prevState.selection.start + emoji.length,
+                end: prevState.selection.start + emoji.length,
             },
         }));
-        this.updateComment(newComment);
+        this.updateComment(ComposerUtils.insertText(this.comment, this.state.selection, emoji));
     }
 
     /**

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -27,6 +27,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import withKeyboardState, {keyboardStatePropTypes} from '../../../components/withKeyboardState';
 import ONYXKEYS from '../../../ONYXKEYS';
+import * as ComposerUtils from '../../../libs/ComposerUtils';
 
 const propTypes = {
     /** All the data of the action */
@@ -229,15 +230,13 @@ class ReportActionItemMessageEdit extends React.Component {
      * @param {String} emoji
      */
     addEmojiToTextBox(emoji) {
-        const newComment = this.state.draft.slice(0, this.state.selection.start)
-            + emoji + this.state.draft.slice(this.state.selection.end, this.state.draft.length);
         this.setState(prevState => ({
             selection: {
                 start: prevState.selection.start + emoji.length,
                 end: prevState.selection.start + emoji.length,
             },
         }));
-        this.updateDraft(newComment);
+        this.updateDraft(ComposerUtils.insertText(this.state.draft, this.state.selection, emoji));
     }
 
     /**