Merge branch 'develop' into fix.reply-while-editing

app/containers/FileModal.js

 import React, { useState } from 'react';
 import {
-	View, Text, TouchableWithoutFeedback, ActivityIndicator, StyleSheet
+	View, Text, TouchableWithoutFeedback, ActivityIndicator, StyleSheet, SafeAreaView
 } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
 import ImageViewer from 'react-native-image-zoom-viewer';
-import SafeAreaView from 'react-native-safe-area-view';
 import { Video } from 'expo-av';
 
 import sharedStyles from '../views/Styles';

app/containers/MessageBox/Recording.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, PermissionsAndroid, Text
+	View, SafeAreaView, PermissionsAndroid, Text
 } from 'react-native';
 import { AudioRecorder, AudioUtils } from 'react-native-audio';
 import { BorderlessButton } from 'react-native-gesture-handler';
-import SafeAreaView from 'react-native-safe-area-view';
 import FileSystem from 'expo-file-system';
 
 import styles from './styles';

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/ReactionsModal.js

 import React from 'react';
 import {
-	View, Text, FlatList, StyleSheet
+	View, Text, FlatList, StyleSheet, SafeAreaView
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
 import Touchable from 'react-native-platform-touchable';
-import SafeAreaView from 'react-native-safe-area-view';
 
 import Emoji from './message/Emoji';
 import I18n from '../i18n';

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, preview, style = []
 }) => {
 	let mentionStyle = styles.mention;
 	if (mention === 'all' || mention === 'here') {
@@ -33,8 +33,8 @@ const AtMention = React.memo(({
 
 	return (
 		<Text
-			style={mentionStyle}
-			onPress={handlePress}
+			style={[preview ? styles.text : mentionStyle, ...style]}
+			onPress={preview ? undefined : handlePress}
 		>
 			{`@${ mention }`}
 		</Text>
@@ -45,6 +45,8 @@ AtMention.propTypes = {
 	mention: PropTypes.string,
 	username: PropTypes.string,
 	navToRoomInfo: PropTypes.func,
+	style: PropTypes.array,
+	preview: PropTypes.bool,
 	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, preview, style = []
 }) => {
 	const handlePress = () => {
 		const index = channels.findIndex(channel => channel.name === hashtag);
@@ -19,8 +19,8 @@ const Hashtag = React.memo(({
 	if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {
 		return (
 			<Text
-				style={styles.mention}
-				onPress={handlePress}
+				style={[preview ? styles.text : styles.mention, ...style]}
+				onPress={preview ? undefined : handlePress}
 			>
 				{`#${ hashtag }`}
 			</Text>
@@ -32,6 +32,8 @@ const Hashtag = React.memo(({
 Hashtag.propTypes = {
 	hashtag: PropTypes.string,
 	navToRoomInfo: PropTypes.func,
+	style: PropTypes.array,
+	preview: PropTypes.bool,
 	channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
 };
 

app/containers/markdown/Link.js

@@ -6,7 +6,7 @@ import styles from './styles';
 import openLink from '../../utils/openLink';
 
 const Link = React.memo(({
-	children, link
+	children, link, preview
 }) => {
 	const handlePress = () => {
 		if (!link) {
@@ -20,7 +20,7 @@ const Link = React.memo(({
 	// if you have a [](https://rocket.chat) render https://rocket.chat
 	return (
 		<Text
-			onPress={handlePress}
+			onPress={preview ? undefined : handlePress}
 			style={styles.link}
 		>
 			{ childLength !== 0 ? children : link }
@@ -30,7 +30,8 @@ const Link = React.memo(({
 
 Link.propTypes = {
 	children: PropTypes.node,
-	link: PropTypes.string
+	link: PropTypes.string,
+	preview: PropTypes.bool
 };
 
 export default Link;

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

 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,56 +169,70 @@ 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>
 		);
 	};
 
-	renderLink = ({ children, href }) => (
-		<MarkdownLink link={href}>
-			{children}
-		</MarkdownLink>
-	);
+	renderLink = ({ children, href }) => {
+		const { preview } = this.props;
+		return (
+			<MarkdownLink link={href} preview={preview}>
+				{children}
+			</MarkdownLink>
+		);
+	}
 
 	renderHashtag = ({ hashtag }) => {
-		const { channels, navToRoomInfo } = this.props;
+		const {
+			channels, navToRoomInfo, style, preview
+		} = this.props;
 		return (
 			<MarkdownHashtag
 				hashtag={hashtag}
 				channels={channels}
 				navToRoomInfo={navToRoomInfo}
+				preview={preview}
+				style={style}
 			/>
 		);
 	}
 
 	renderAtMention = ({ mentionName }) => {
-		const { username, mentions, navToRoomInfo } = this.props;
+		const {
+			username, mentions, navToRoomInfo, preview, style
+		} = this.props;
 		return (
 			<MarkdownAtMention
 				mentions={mentions}
 				mention={mentionName}
 				username={username}
 				navToRoomInfo={navToRoomInfo}
+				preview={preview}
+				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 +242,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>