Repair Editing a comment containing both RTL and LTR characters breaks the (edited) text

src/pages/home/report/ReportActionItemFragment.js

@@ -14,6 +14,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import canUseTouchScreen from '../../../libs/canUseTouchscreen';
 import compose from '../../../libs/compose';
+import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
     /** The message fragment needing to be displayed */
@@ -117,16 +118,16 @@ const ReportActionItemFragment = (props) => {
             return (
                 <Text
                     selectable={!canUseTouchScreen() || !props.isSmallScreenWidth}
-                    style={EmojiUtils.containsOnlyEmojis(text) ? styles.onlyEmojisText : undefined}
+                    style={[EmojiUtils.containsOnlyEmojis(props.fragment.text) ? styles.onlyEmojisText : undefined, styles.ltr]}
                 >
-                    {Str.htmlDecode(text)}
+                    {StyleUtils.convertToLTR(Str.htmlDecode(props.fragment.text))}
                     {props.fragment.isEdited && (
-                        <Text
-                            fontSize={variables.fontSizeSmall}
-                            color={themeColors.textSupporting}
-                        >
-                            {` ${props.translate('reportActionCompose.edited')}`}
-                        </Text>
+                    <Text
+                        fontSize={variables.fontSizeSmall}
+                        color={themeColors.textSupporting}
+                    >
+                        {` ${props.translate('reportActionCompose.edited')}`}
+                    </Text>
                     )}
                 </Text>
             );

src/styles/StyleUtils.js

@@ -448,6 +448,15 @@ function getPaddingLeft(paddingLeft) {
     };
 }
 
+/**
+ * Convert RTL text to a LTR text on Android devices useing the Unicode controls, see : https://www.w3.org/International/questions/qa-bidi-unicode-controls
+ * @param {String} text
+ * @returns {String}
+ */
+function convertToLTR(text) {
+    return `\u2066${text}`;
+}
+
 export {
     getAvatarSize,
     getAvatarStyle,
@@ -475,4 +484,5 @@ export {
     getPaymentMethodMenuWidth,
     parseStyleAsArray,
     getPaddingLeft,
+    convertToLTR,
 };

src/styles/styles.js

@@ -15,6 +15,7 @@ import textInputAlignSelf from './utilities/textInputAlignSelf';
 import positioning from './utilities/positioning';
 import codeStyles from './codeStyles';
 import visibility from './utilities/visibility';
+import writingDirection from './utilities/writingDirection';
 import optionAlternateTextPlatformStyles from './optionAlternateTextPlatformStyles';
 import pointerEventsNone from './pointerEventsNone';
 import overflowXHidden from './overflowXHidden';
@@ -148,6 +149,7 @@ const styles = {
     ...positioning,
     ...wordBreak,
     ...whiteSpace,
+    ...writingDirection,
 
     rateCol: {
         margin: 0,

src/styles/utilities/writingDirection.js

@@ -0,0 +1,14 @@
+/**
+ * Writing direction utility styles.
+ * note: writingDirection not available for Android, for Android you can use the Unicode.
+ *
+ * https://www.w3.org/International/questions/qa-bidi-unicode-controls
+ */
+export default {
+    rtl: {
+        writingDirection: 'rtl',
+    },
+    ltr: {
+        writingDirection: 'ltr',
+    },
+};