[FIX] Messages preview issues (#1257)

app/containers/MessageBox/ReplyPreview.js

@@ -79,7 +79,7 @@ class ReplyPreview extends Component {
 						<Text style={styles.username}>{message.u.username}</Text>
 						<Text style={styles.time}>{time}</Text>
 					</View>
-					<Markdown msg={message.msg} baseUrl={baseUrl} username={username} getCustomEmoji={getCustomEmoji} numberOfLines={1} useMarkdown={useMarkdown} />
+					<Markdown msg={message.msg} baseUrl={baseUrl} username={username} getCustomEmoji={getCustomEmoji} numberOfLines={1} useMarkdown={useMarkdown} preview />
 				</View>
 				<CustomIcon name='cross' color={COLOR_TEXT_DESCRIPTION} size={20} style={styles.close} onPress={this.close} />
 			</View>

app/containers/markdown/AtMention.js

@@ -5,7 +5,7 @@ import { Text } from 'react-native';
 import styles from './styles';
 
 const AtMention = React.memo(({
-	mention, mentions, username, navToRoomInfo
+	mention, mentions, username, navToRoomInfo, style = []
 }) => {
 	let mentionStyle = styles.mention;
 	if (mention === 'all' || mention === 'here') {
@@ -33,7 +33,7 @@ const AtMention = React.memo(({
 
 	return (
 		<Text
-			style={mentionStyle}
+			style={[mentionStyle, ...style]}
 			onPress={handlePress}
 		>
 			{`@${ mention }`}
@@ -45,6 +45,7 @@ AtMention.propTypes = {
 	mention: PropTypes.string,
 	username: PropTypes.string,
 	navToRoomInfo: PropTypes.func,
+	style: PropTypes.array,
 	mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
 };
 

app/containers/markdown/Emoji.js

@@ -8,11 +8,11 @@ import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import styles from './styles';
 
 const Emoji = React.memo(({
-	emojiName, literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl
+	emojiName, literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl, customEmojis, style = []
 }) => {
 	const emojiUnicode = shortnameToUnicode(literal);
 	const emoji = getCustomEmoji && getCustomEmoji(emojiName);
-	if (emoji) {
+	if (emoji && customEmojis) {
 		return (
 			<CustomEmoji
 				baseUrl={baseUrl}
@@ -21,7 +21,16 @@ const Emoji = React.memo(({
 			/>
 		);
 	}
-	return <Text style={isMessageContainsOnlyEmoji ? styles.textBig : styles.text}>{emojiUnicode}</Text>;
+	return (
+		<Text
+			style={[
+				isMessageContainsOnlyEmoji ? styles.textBig : styles.text,
+				...style
+			]}
+		>
+			{emojiUnicode}
+		</Text>
+	);
 });
 
 Emoji.propTypes = {
@@ -29,7 +38,9 @@ Emoji.propTypes = {
 	literal: PropTypes.string,
 	isMessageContainsOnlyEmoji: PropTypes.bool,
 	getCustomEmoji: PropTypes.func,
-	baseUrl: PropTypes.string
+	baseUrl: PropTypes.string,
+	customEmojis: PropTypes.bool,
+	style: PropTypes.array
 };
 
 export default Emoji;

app/containers/markdown/Hashtag.js

@@ -5,7 +5,7 @@ import { Text } from 'react-native';
 import styles from './styles';
 
 const Hashtag = React.memo(({
-	hashtag, channels, navToRoomInfo
+	hashtag, channels, navToRoomInfo, style = []
 }) => {
 	const handlePress = () => {
 		const index = channels.findIndex(channel => channel.name === hashtag);
@@ -19,7 +19,7 @@ const Hashtag = React.memo(({
 	if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {
 		return (
 			<Text
-				style={styles.mention}
+				style={[styles.mention, ...style]}
 				onPress={handlePress}
 			>
 				{`#${ hashtag }`}
@@ -32,6 +32,7 @@ const Hashtag = React.memo(({
 Hashtag.propTypes = {
 	hashtag: PropTypes.string,
 	navToRoomInfo: PropTypes.func,
+	style: PropTypes.array,
 	channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
 };
 

app/containers/markdown/List.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const List = React.memo(({
-	children, ordered, start, tight
+	children, ordered, start, tight, numberOfLines = 0
 }) => {
 	let bulletWidth = 15;
 
@@ -11,7 +11,13 @@ const List = React.memo(({
 		bulletWidth = (9 * lastNumber.toString().length) + 7;
 	}
 
-	const _children = React.Children.map(children, (child, index) => React.cloneElement(child, {
+	let items = React.Children.toArray(children);
+
+	if (numberOfLines) {
+		items = items.slice(0, numberOfLines);
+	}
+
+	const _children = items.map((child, index) => React.cloneElement(child, {
 		bulletWidth,
 		ordered,
 		tight,
@@ -29,7 +35,8 @@ List.propTypes = {
 	children: PropTypes.node,
 	ordered: PropTypes.bool,
 	start: PropTypes.number,
-	tight: PropTypes.bool
+	tight: PropTypes.bool,
+	numberOfLines: PropTypes.number
 };
 
 List.defaultProps = {

app/containers/markdown/index.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { View, Text, Image } from 'react-native';
+import { Text, Image } from 'react-native';
 import { Parser, Node } from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
 import PropTypes from 'prop-types';
@@ -53,8 +53,6 @@ const emojiCount = (str) => {
 	return counter;
 };
 
-const encodeEmojis = str => toShort(shortnameToUnicode(str));
-
 export default class Markdown extends PureComponent {
 	static propTypes = {
 		msg: PropTypes.string,
@@ -65,21 +63,24 @@ export default class Markdown extends PureComponent {
 		isEdited: PropTypes.bool,
 		numberOfLines: PropTypes.number,
 		useMarkdown: PropTypes.bool,
+		customEmojis: PropTypes.bool,
 		channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 		mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-		navToRoomInfo: PropTypes.func
+		navToRoomInfo: PropTypes.func,
+		preview: PropTypes.bool,
+		style: PropTypes.array
 	};
 
 	constructor(props) {
 		super(props);
 
 		this.parser = this.createParser();
-		this.renderer = this.createRenderer();
+		this.renderer = this.createRenderer(props.preview);
 	}
 
 	createParser = () => new Parser();
 
-	createRenderer = () => new Renderer({
+	createRenderer = (preview = false) => new Renderer({
 		renderers: {
 			text: this.renderText,
 
@@ -112,7 +113,7 @@ export default class Markdown extends PureComponent {
 			table_row: this.renderTableRow,
 			table_cell: this.renderTableCell,
 
-			editedIndicator: this.renderEditedIndicator
+			editedIndicator: preview ? () => null : this.renderEditedIndicator
 		},
 		renderParagraphsInLists: true
 	});
@@ -133,12 +134,17 @@ export default class Markdown extends PureComponent {
 	};
 
 	renderText = ({ context, literal }) => {
-		const { numberOfLines } = this.props;
+		const { numberOfLines, preview, style = [] } = this.props;
+		const defaultStyle = [
+			this.isMessageContainsOnlyEmoji && !preview ? styles.textBig : {},
+			...context.map(type => styles[type])
+		];
 		return (
 			<Text
 				style={[
-					this.isMessageContainsOnlyEmoji ? styles.textBig : styles.text,
-					...context.map(type => styles[type])
+					styles.text,
+					!preview ? defaultStyle : {},
+					...style
 				]}
 				numberOfLines={numberOfLines}
 			>
@@ -147,9 +153,15 @@ export default class Markdown extends PureComponent {
 		);
 	}
 
-	renderCodeInline = ({ literal }) => <Text style={styles.codeInline}>{literal}</Text>;
+	renderCodeInline = ({ literal }) => {
+		const { preview } = this.props;
+		return <Text style={!preview ? styles.codeInline : {}}>{literal}</Text>;
+	};
 
-	renderCodeBlock = ({ literal }) => <Text style={styles.codeBlock}>{literal}</Text>;
+	renderCodeBlock = ({ literal }) => {
+		const { preview } = this.props;
+		return <Text style={!preview ? styles.codeBlock : {}}>{literal}</Text>;
+	};
 
 	renderBreak = () => {
 		const { tmid } = this.props;
@@ -157,15 +169,14 @@ export default class Markdown extends PureComponent {
 	}
 
 	renderParagraph = ({ children }) => {
+		const { numberOfLines, style } = this.props;
 		if (!children || children.length === 0) {
 			return null;
 		}
 		return (
-			<View style={styles.block}>
-				<Text>
-					{children}
-				</Text>
-			</View>
+			<Text style={style} numberOfLines={numberOfLines}>
+				{children}
+			</Text>
 		);
 	};
 
@@ -176,37 +187,45 @@ export default class Markdown extends PureComponent {
 	);
 
 	renderHashtag = ({ hashtag }) => {
-		const { channels, navToRoomInfo } = this.props;
+		const { channels, navToRoomInfo, style } = this.props;
 		return (
 			<MarkdownHashtag
 				hashtag={hashtag}
 				channels={channels}
 				navToRoomInfo={navToRoomInfo}
+				style={style}
 			/>
 		);
 	}
 
 	renderAtMention = ({ mentionName }) => {
-		const { username, mentions, navToRoomInfo } = this.props;
+		const {
+			username, mentions, navToRoomInfo, style
+		} = this.props;
 		return (
 			<MarkdownAtMention
 				mentions={mentions}
 				mention={mentionName}
 				username={username}
 				navToRoomInfo={navToRoomInfo}
+				style={style}
 			/>
 		);
 	}
 
 	renderEmoji = ({ emojiName, literal }) => {
-		const { getCustomEmoji, baseUrl } = this.props;
+		const {
+			getCustomEmoji, baseUrl, customEmojis = true, preview, style
+		} = this.props;
 		return (
 			<MarkdownEmoji
 				emojiName={emojiName}
 				literal={literal}
-				isMessageContainsOnlyEmoji={this.isMessageContainsOnlyEmoji}
+				isMessageContainsOnlyEmoji={this.isMessageContainsOnlyEmoji && !preview}
 				getCustomEmoji={getCustomEmoji}
 				baseUrl={baseUrl}
+				customEmojis={customEmojis}
+				style={style}
 			/>
 		);
 	}
@@ -216,9 +235,10 @@ export default class Markdown extends PureComponent {
 	renderEditedIndicator = () => <Text style={styles.edited}> ({I18n.t('edited')})</Text>;
 
 	renderHeading = ({ children, level }) => {
+		const { numberOfLines } = this.props;
 		const textStyle = styles[`heading${ level }Text`];
 		return (
-			<Text style={textStyle}>
+			<Text numberOfLines={numberOfLines} style={textStyle}>
 				{children}
 			</Text>
 		);
@@ -226,15 +246,19 @@ export default class Markdown extends PureComponent {
 
 	renderList = ({
 		children, start, tight, type
-	}) => (
-		<MarkdownList
-			ordered={type !== 'bullet'}
-			start={start}
-			tight={tight}
-		>
-			{children}
-		</MarkdownList>
-	);
+	}) => {
+		const { numberOfLines } = this.props;
+		return (
+			<MarkdownList
+				ordered={type !== 'bullet'}
+				start={start}
+				tight={tight}
+				numberOfLines={numberOfLines}
+			>
+				{children}
+			</MarkdownList>
+		);
+	};
 
 	renderListItem = ({
 		children, context, ...otherProps
@@ -269,7 +293,7 @@ export default class Markdown extends PureComponent {
 
 	render() {
 		const {
-			msg, useMarkdown = true, numberOfLines
+			msg, useMarkdown = true, numberOfLines, preview = false
 		} = this.props;
 
 		if (!msg) {
@@ -281,13 +305,18 @@ export default class Markdown extends PureComponent {
 		// Ex: '[ ](https://open.rocket.chat/group/test?msg=abcdef)  Test'
 		// Return: 'Test'
 		m = m.replace(/^\[([\s]]*)\]\(([^)]*)\)\s/, '').trim();
+		m = shortnameToUnicode(m);
 
-		if (!useMarkdown) {
+		if (preview) {
+			m = m.split('\n').reduce((lines, line) => `${ lines } ${ line }`, '');
+		}
+
+		if (!useMarkdown && !preview) {
 			return <Text style={styles.text} numberOfLines={numberOfLines}>{m}</Text>;
 		}
 
 		const ast = this.parser.parse(m);
-		const encodedEmojis = encodeEmojis(m);
+		const encodedEmojis = toShort(m);
 		this.isMessageContainsOnlyEmoji = isOnlyEmoji(encodedEmojis) && emojiCount(encodedEmojis) <= 3;
 
 		this.editedMessage(ast);

app/containers/markdown/styles.js

@@ -21,7 +21,8 @@ export default StyleSheet.create({
 	block: {
 		alignItems: 'flex-start',
 		flexDirection: 'row',
-		flexWrap: 'wrap'
+		flexWrap: 'wrap',
+		flex: 1
 	},
 	emph: {
 		fontStyle: 'italic'

app/containers/message/Content.js

@@ -25,6 +25,7 @@ const Content = React.memo((props) => {
 				username={props.user.username}
 				isEdited={props.isEdited}
 				numberOfLines={(props.tmid && !props.isThreadRoom) ? 1 : 0}
+				preview={props.tmid && !props.isThreadRoom}
 				channels={props.channels}
 				mentions={props.mentions}
 				useMarkdown={props.useMarkdown && (!props.tmid || props.isThreadRoom)}

app/presentation/RoomItem/LastMessage.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Text } from 'react-native';
 import { shortnameToUnicode } from 'emoji-toolkit';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
 import I18n from '../../i18n';
 import styles from './styles';
+import Markdown from '../../containers/markdown';
 
 const formatMsg = ({
 	lastMessage, type, showLastMessage, username
@@ -47,11 +47,15 @@ const arePropsEqual = (oldProps, newProps) => _.isEqual(oldProps, newProps);
 const LastMessage = React.memo(({
 	lastMessage, type, showLastMessage, username, alert
 }) => (
-	<Text style={[styles.markdownText, alert && styles.markdownTextAlert]} numberOfLines={2}>
-		{formatMsg({
+	<Markdown
+		msg={formatMsg({
 			lastMessage, type, showLastMessage, username
 		})}
-	</Text>
+		style={[styles.markdownText, alert && styles.markdownTextAlert]}
+		customEmojis={false}
+		numberOfLines={2}
+		preview
+	/>
 ), arePropsEqual);
 
 LastMessage.propTypes = {