[FIX] Preview rendering for threaded messages

app/containers/markdown/AtMention.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Text } from 'react-native';
 
 import { useTheme } from '../../theme';
 import { themes } from '../../constants/colors';
 import styles from './styles';
 import { events, logEvent } from '../../utils/log';
+import MarkdownContext from './new/MarkdownContext';
 
 interface IAtMention {
 	mention: string;
@@ -17,6 +18,7 @@ interface IAtMention {
 
 const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName }: IAtMention) => {
 	const { theme } = useTheme();
+	const { preview } = useContext(MarkdownContext);
 	if (mention === 'all' || mention === 'here') {
 		return (
 			<Text
@@ -43,7 +45,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 		};
 	}
 
-	const user = mentions?.find?.((m: any) => m && m.username === mention);
+	const user = mentions?.find?.((m: { username: string }) => m && m.username === mention);
 
 	const handlePress = () => {
 		logEvent(events.ROOM_MENTION_GO_USER_INFO);
@@ -56,13 +58,15 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 
 	if (user) {
 		return (
-			<Text style={[styles.mention, mentionStyle, ...style]} onPress={handlePress}>
+			<Text style={!preview ? [styles.mention, mentionStyle, ...style] : styles.text} onPress={handlePress}>
 				{useRealName && user.name ? user.name : user.username}
 			</Text>
 		);
 	}
 
-	return <Text style={[styles.text, { color: themes[theme!].bodyText }, ...style]}>{`@${mention}`}</Text>;
+	return (
+		<Text style={!preview ? [styles.text, { color: themes[theme!].bodyText }, ...style] : styles.text}>{`@${mention}`}</Text>
+	);
 });
 
 export default AtMention;

app/containers/markdown/index.tsx

@@ -381,6 +381,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 					channels={channels}
 					navToRoomInfo={navToRoomInfo}
 					onLinkPress={onLinkPress}
+					preview={preview}
 				/>
 			);
 		}

app/containers/markdown/new/Link.tsx

@@ -20,10 +20,10 @@ interface ILinkProps {
 
 const Link = ({ value }: ILinkProps): JSX.Element => {
 	const { theme } = useTheme();
-	const { onLinkPress } = useContext(MarkdownContext);
+	const { onLinkPress, preview } = useContext(MarkdownContext);
 	const { src, label } = value;
 	const handlePress = () => {
-		if (!src.value) {
+		if (!src.value || preview) {
 			return;
 		}
 		if (onLinkPress) {
@@ -38,7 +38,10 @@ const Link = ({ value }: ILinkProps): JSX.Element => {
 	};
 
 	return (
-		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme!].actionTintColor }]}>
+		<Text
+			onPress={handlePress}
+			onLongPress={onLongPress}
+			style={[styles.link, !preview && { color: themes[theme!].actionTintColor }]}>
 			{(block => {
 				switch (block.type) {
 					case 'PLAIN_TEXT':

app/containers/markdown/new/MarkdownContext.ts

@@ -14,6 +14,7 @@ interface IMarkdownContext {
 	navToRoomInfo: Function;
 	getCustomEmoji?: Function;
 	onLinkPress?: Function;
+	preview: boolean;
 }
 
 const defaultState = {
@@ -22,7 +23,8 @@ const defaultState = {
 	useRealName: false,
 	username: '',
 	baseUrl: '',
-	navToRoomInfo: () => {}
+	navToRoomInfo: () => {},
+	preview: false
 };
 
 const MarkdownContext = React.createContext<IMarkdownContext>(defaultState);

app/containers/markdown/new/index.tsx

@@ -25,6 +25,7 @@ interface IBodyProps {
 	useRealName: boolean;
 	username: string;
 	baseUrl: string;
+	preview: boolean;
 }
 
 const Body = ({
@@ -36,7 +37,8 @@ const Body = ({
 	navToRoomInfo,
 	getCustomEmoji,
 	baseUrl,
-	onLinkPress
+	onLinkPress,
+	preview
 }: IBodyProps): JSX.Element => (
 	<MarkdownContext.Provider
 		value={{
@@ -47,7 +49,8 @@ const Body = ({
 			navToRoomInfo,
 			getCustomEmoji,
 			baseUrl,
-			onLinkPress
+			onLinkPress,
+			preview
 		}}>
 		{tokens.map(block => {
 			switch (block.type) {

storybook/stories/NewMarkdown.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { storiesOf } from '@storybook/react-native';
 
+import Markdown from '../../app/containers/markdown';
 import NewMarkdown from '../../app/containers/markdown/new';
 import { themes } from '../../app/constants/colors';
 
@@ -625,3 +626,44 @@ stories.add('Lists', () => (
 		<NewMarkdown tokens={orderedListToken} />
 	</View>
 ));
+
+stories.add('Preview', () => (
+	<View style={styles.container}>
+		<Markdown
+			msg={
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+			}
+			md={longTextMsg}
+			theme={theme}
+			numberOfLines={1}
+			preview
+		/>
+		<Markdown
+			msg='@name @rocket.cat @here @all'
+			md={multipleMentionTokens}
+			mentions={multipleMentions}
+			navToRoomInfo={() => {}}
+			style={[]}
+			useRealName
+			theme={theme}
+			numberOfLines={1}
+			username='rocket.cat'
+			preview
+		/>
+		<Markdown
+			msg=':green_heart: :joy: :grin:'
+			md={bigEmojiTokens}
+			getCustomEmoji={getCustomEmoji}
+			theme={theme}
+			numberOfLines={1}
+			preview
+		/>
+		<Markdown
+			msg='[ ](https://open.rocket.chat/group/test?msg=abcdef)  Test'
+			md={rocketChatLink}
+			theme={theme}
+			numberOfLines={1}
+			preview
+		/>
+	</View>
+));