diff --git a/app/components/markdown/index.js b/app/components/markdown/index.js index 00982a043..c9ea99103 100644 --- a/app/components/markdown/index.js +++ b/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 ( + + {spacer} + + + ); + } + 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 {this.renderer.render(ast)}; } } @@ -315,5 +352,8 @@ const style = StyleSheet.create({ alignItems: 'flex-start', flexDirection: 'row', flexWrap: 'wrap' + }, + editedIndicatorText: { + fontSize: 14 } }); diff --git a/app/components/post_body/index.js b/app/components/post_body/index.js index 1de64ab78..3af323bf1 100644 --- a/app/components/post_body/index.js +++ b/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, diff --git a/app/components/post_body/post_body.js b/app/components/post_body/post_body.js index 7df3fd839..4478faa53 100644 --- a/app/components/post_body/post_body.js +++ b/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 { diff --git a/package.json b/package.json index 517b72ab3..fb0c1e957 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index aca23229d..2cc00b1d0 100644 --- a/yarn.lock +++ b/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"