Update version to 1.0.52-4 on staging

android/app/build.gradle

@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001005203
-        versionName "1.0.52-3"
+        versionCode 1001005204
+        versionName "1.0.52-4"
     }
     splits {
         abi {

ios/ExpensifyCash/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.0.52.3</string>
+	<string>1.0.52.4</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/ExpensifyCashTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.0.52.3</string>
+	<string>1.0.52.4</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.52-3",
+  "version": "1.0.52-4",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.cash",
   "description": "Expensify.cash is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/RenderHTML.js

@@ -1,4 +1,5 @@
 /* eslint-disable react/prop-types */
+import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {useWindowDimensions, TouchableOpacity} from 'react-native';
@@ -14,6 +15,9 @@ import AnchorForCommentsOnly from './AnchorForCommentsOnly';
 import InlineCodeBlock from './InlineCodeBlock';
 import AttachmentModal from './AttachmentModal';
 import ThumbnailImage from './ThumbnailImage';
+import variables from '../styles/variables';
+import themeColors from '../styles/themes/default';
+import Text from './Text';
 
 const MAX_IMG_DIMENSIONS = 512;
 
@@ -96,6 +100,22 @@ function CodeRenderer({
     );
 }
 
+function EditedRenderer(props) {
+    const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style', 'tnode']);
+    return (
+        <Text
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...defaultRendererProps}
+            fontSize={variables.fontSizeSmall}
+            color={themeColors.textSupporting}
+        >
+            {/* Native devices do not support margin between nested text */}
+            <Text style={styles.w1}>{' '}</Text>
+            (edited)
+        </Text>
+    );
+}
+
 function ImgRenderer({tnode}) {
     const htmlAttribs = tnode.attributes;
 
@@ -158,12 +178,14 @@ function ImgRenderer({tnode}) {
 AnchorRenderer.model = defaultHTMLElementModels.a;
 CodeRenderer.model = defaultHTMLElementModels.code;
 ImgRenderer.model = defaultHTMLElementModels.img;
+EditedRenderer.model = defaultHTMLElementModels.span;
 
 // Define the custom render methods
 const renderers = {
     a: AnchorRenderer,
     code: CodeRenderer,
     img: ImgRenderer,
+    edited: EditedRenderer,
 };
 
 const propTypes = {

src/libs/actions/Report.js

@@ -488,6 +488,13 @@ function updateReportActionMessage(reportID, sequenceNumber, message) {
     const actionToMerge = {};
     actionToMerge[sequenceNumber] = {message: [message]};
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, actionToMerge);
+
+    // If this is the most recent message, update the lastMessageText in the report object as well
+    if (sequenceNumber === reportMaxSequenceNumbers[reportID]) {
+        Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
+            lastMessageText: message.html,
+        });
+    }
 }
 
 /**

src/pages/home/report/ReportActionItemFragment.js

@@ -49,24 +49,27 @@ class ReportActionItemFragment extends React.PureComponent {
                 }
 
                 // Only render HTML if we have html in the fragment
-                return (
-                    <View style={styles.flexRow}>
-                        {fragment.html !== fragment.text ? (
-                            <RenderHTML html={fragment.html} debug={false} />
-                        ) : (
-                            <Text selectable>{Str.htmlDecode(fragment.text)}</Text>
-                        )}
-                        {fragment.isEdited && (
+                return fragment.html !== fragment.text
+                    ? (
+                        <RenderHTML
+                            html={fragment.html + (fragment.isEdited ? '<edited/>' : '')}
+                            debug={false}
+                        />
+                    ) : (
+                        <Text selectable>
+                            {Str.htmlDecode(fragment.text)}
+                            {fragment.isEdited && (
                             <Text
-                                style={[styles.ml1]}
                                 fontSize={variables.fontSizeSmall}
                                 color={themeColors.textSupporting}
                             >
+                                {/* Native devices do not support margin between nested text */}
+                                <Text style={styles.w1}>{' '}</Text>
                                 (edited)
                             </Text>
-                        )}
-                    </View>
-                );
+                            )}
+                        </Text>
+                    );
             case 'TEXT':
                 return (
                     <Tooltip text={tooltipText}>

src/styles/utilities/sizing.js

@@ -19,4 +19,8 @@ export default {
     mwn: {
         maxWidth: 'auto',
     },
+
+    w1: {
+        width: 4,
+    },
 };