RN-359: Adds edited indicator to post. (#1171)

* RN-359: Adds '(edited)' indicator to post.

* RN-359: Formatting.

app/components/markdown/index.js

@@ -1,7 +1,7 @@
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import {Parser} from 'commonmark';
+import {Parser, Node} from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
@@ -15,6 +15,7 @@ import {
 import AtMention from 'app/components/at_mention';
 import ChannelLink from 'app/components/channel_link';
 import Emoji from 'app/components/emoji';
+import FormattedText from 'app/components/formatted_text';
 import CustomPropTypes from 'app/constants/custom_prop_types';
 import {concatStyles} from 'app/utils/theme';
 
@@ -30,6 +31,7 @@ export default class Markdown extends PureComponent {
         blockStyles: PropTypes.object,
         emojiSizes: PropTypes.object,
         fontSizes: PropTypes.object,
+        isEdited: PropTypes.bool,
         isSearchResult: PropTypes.bool,
         navigator: PropTypes.object.isRequired,
         onLongPress: PropTypes.func,
@@ -110,7 +112,9 @@ export default class Markdown extends PureComponent {
                 softBreak: this.renderSoftBreak,
 
                 htmlBlock: this.renderHtml,
-                htmlInline: this.renderHtml
+                htmlInline: this.renderHtml,
+
+                editedIndicator: this.renderEditedIndicator
             },
             renderParagraphsInLists: true
         });
@@ -303,9 +307,42 @@ export default class Markdown extends PureComponent {
         );
     }
 
+    renderEditedIndicator = ({context}) => {
+        let spacer = '';
+        let opacity = Platform.select({ios: 0.7, android: 1});
+        if (context[0] === 'paragraph') {
+            spacer = ' ';
+            opacity = Platform.select({ios: 0.5, android: 0.6});
+        }
+        const styles = [style.editedIndicatorText, {opacity}];
+        if (Platform.OS === 'ios') {
+            styles.push(this.computeTextStyle(this.props.baseTextStyle, context));
+        }
+        return (
+            <Text
+                style={styles}
+            >
+                {spacer}
+                <FormattedText
+                    id='post_message_view.edited'
+                    defaultMessage='(edited)'
+                />
+            </Text>
+        );
+    }
+
     render() {
         const ast = this.parser.parse(this.props.value);
 
+        if (this.props.isEdited) {
+            const editIndicatorNode = new Node('edited_indicator');
+            if (['code_block', 'thematic_break', 'block_quote'].includes(ast.lastChild.type)) {
+                ast.appendChild(editIndicatorNode);
+            } else {
+                ast.lastChild.appendChild(editIndicatorNode);
+            }
+        }
+
         return <View>{this.renderer.render(ast)}</View>;
     }
 }
@@ -315,5 +352,8 @@ const style = StyleSheet.create({
         alignItems: 'flex-start',
         flexDirection: 'row',
         flexWrap: 'wrap'
+    },
+    editedIndicatorText: {
+        fontSize: 14
     }
 });

app/components/post_body/index.js

@@ -8,7 +8,7 @@ import {flagPost, unflagPost} from 'mattermost-redux/actions/posts';
 import {Posts} from 'mattermost-redux/constants';
 import {getPost} from 'mattermost-redux/selectors/entities/posts';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
-import {isPostEphemeral, isSystemMessage} from 'mattermost-redux/utils/post_utils';
+import {isEdited, isPostEphemeral, isSystemMessage} from 'mattermost-redux/utils/post_utils';
 
 import PostBody from './post_body';
 
@@ -20,6 +20,7 @@ function mapStateToProps(state, ownProps) {
         postProps: post.props || {},
         fileIds: post.file_ids,
         hasBeenDeleted: post.state === Posts.POST_DELETED,
+        hasBeenEdited: isEdited(post),
         hasReactions: post.has_reactions,
         isFailed: post.failed,
         isPending: post.id === post.pending_post_id,

app/components/post_body/post_body.js

@@ -34,6 +34,7 @@ class PostBody extends PureComponent {
         canEdit: PropTypes.bool,
         fileIds: PropTypes.array,
         hasBeenDeleted: PropTypes.bool,
+        hasBeenEdited: PropTypes.bool,
         hasReactions: PropTypes.bool,
         intl: intlShape.isRequired,
         isFailed: PropTypes.bool,
@@ -133,6 +134,7 @@ class PostBody extends PureComponent {
             canDelete,
             canEdit,
             hasBeenDeleted,
+            hasBeenEdited,
             hasReactions,
             isFailed,
             isFlagged,
@@ -224,13 +226,15 @@ class PostBody extends PureComponent {
                     <View style={[{flex: 1}, (isPendingOrFailedPost && style.pendingPost)]}>
                         <Markdown
                             baseTextStyle={messageStyle}
-                            textStyles={textStyles}
                             blockStyles={blockStyles}
+                            isEdited={hasBeenEdited}
                             isSearchResult={isSearchResult}
-                            value={message}
+                            navigator={navigator}
                             onLongPress={this.showOptionsContext}
                             onPostPress={onPress}
-                            navigator={navigator}
+                            textStyles={textStyles}
+                            theme={theme}
+                            value={message}
                         />
                     </View>
                 </View>

package.json

@@ -10,7 +10,7 @@
     "analytics-react-native": "1.2.0",
     "babel-polyfill": "6.26.0",
     "commonmark": "hmhealey/commonmark.js#dda6d89198252d5fd4bb04c4cc0668766c22fd77",
-    "commonmark-react-renderer": "hmhealey/commonmark-react-renderer#6e259b66ae87d31d2f908effcd05776b9ea3446f",
+    "commonmark-react-renderer": "hmhealey/commonmark-react-renderer#1f078d53b7993d30b2762dd7d78fdd21ee84dd21",
     "deep-equal": "1.0.1",
     "intl": "1.2.5",
     "jail-monkey": "0.1.0",

yarn.lock

@@ -1720,9 +1720,9 @@ commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
 
-commonmark-react-renderer@hmhealey/commonmark-react-renderer#6e259b66ae87d31d2f908effcd05776b9ea3446f:
+commonmark-react-renderer@hmhealey/commonmark-react-renderer#1f078d53b7993d30b2762dd7d78fdd21ee84dd21:
   version "4.3.3"
-  resolved "https://codeload.github.com/hmhealey/commonmark-react-renderer/tar.gz/6e259b66ae87d31d2f908effcd05776b9ea3446f"
+  resolved "https://codeload.github.com/hmhealey/commonmark-react-renderer/tar.gz/1f078d53b7993d30b2762dd7d78fdd21ee84dd21"
   dependencies:
     in-publish "^2.0.0"
     lodash.assign "^4.2.0"