[NEW] Support new message parser

app/containers/markdown/AtMention.tsx

@@ -1,6 +1,7 @@
 import React 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';
@@ -9,20 +10,20 @@ interface IAtMention {
 	mention: string;
 	username: string;
 	navToRoomInfo: Function;
-	style: any;
+	style?: any;
 	useRealName: boolean;
-	theme: string;
 	mentions: any;
 }
 
-const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName, theme }: IAtMention) => {
+const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName }: IAtMention) => {
+	const { theme } = useTheme();
 	if (mention === 'all' || mention === 'here') {
 		return (
 			<Text
 				style={[
 					styles.mention,
 					{
-						color: themes[theme].mentionGroupColor
+						color: themes[theme!].mentionGroupColor
 					},
 					...style
 				]}>
@@ -34,11 +35,11 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 	let mentionStyle = {};
 	if (mention === username) {
 		mentionStyle = {
-			color: themes[theme].mentionMeColor
+			color: themes[theme!].mentionMeColor
 		};
 	} else {
 		mentionStyle = {
-			color: themes[theme].mentionOtherColor
+			color: themes[theme!].mentionOtherColor
 		};
 	}
 
@@ -61,7 +62,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 		);
 	}
 
-	return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`@${mention}`}</Text>;
+	return <Text style={[styles.text, { color: themes[theme!].bodyText }, ...style]}>{`@${mention}`}</Text>;
 });
 
 export default AtMention;

app/containers/markdown/Hashtag.tsx

@@ -1,23 +1,26 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, TextStyle } from 'react-native';
 
 import { themes } from '../../constants/colors';
+import { useTheme } from '../../theme';
 import styles from './styles';
 
 interface IHashtag {
 	hashtag: string;
 	navToRoomInfo: Function;
-	style: [];
-	theme: string;
+	style?: TextStyle[];
 	channels: {
+		[index: number]: string | number;
 		name: string;
 		_id: number;
 	}[];
 }
 
-const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [], theme }: IHashtag) => {
+const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IHashtag) => {
+	const { theme } = useTheme();
+
 	const handlePress = () => {
-		const index = channels.findIndex(channel => channel.name === hashtag);
+		const index = channels?.findIndex(channel => channel.name === hashtag);
 		const navParam = {
 			t: 'c',
 			rid: channels[index]._id
@@ -31,7 +34,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [], them
 				style={[
 					styles.mention,
 					{
-						color: themes[theme].mentionOtherColor
+						color: themes[theme!].mentionOtherColor
 					},
 					...style
 				]}
@@ -40,7 +43,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [], them
 			</Text>
 		);
 	}
-	return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`#${hashtag}`}</Text>;
+	return <Text style={[styles.text, { color: themes[theme!].bodyText }, ...style]}>{`#${hashtag}`}</Text>;
 });
 
 export default Hashtag;

app/containers/markdown/index.tsx

@@ -3,6 +3,7 @@ import { Image, Text } from 'react-native';
 import { Node, Parser } from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
 import removeMarkdown from 'remove-markdown';
+import { MarkdownAST } from '@rocket.chat/message-parser';
 
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import I18n from '../../i18n';
@@ -20,9 +21,20 @@ import MarkdownTableCell from './TableCell';
 import mergeTextNodes from './mergeTextNodes';
 import styles from './styles';
 import { isValidURL } from '../../utils/url';
+import NewMarkdown from './new';
+
+interface IUser {
+	_id: string;
+	username: string;
+	name: string;
+}
+
+type UserMention = Pick<IUser, '_id' | 'username' | 'name'>;
 
 interface IMarkdownProps {
 	msg: string;
+	md: MarkdownAST;
+	mentions: UserMention[];
 	getCustomEmoji: Function;
 	baseUrl: string;
 	username: string;
@@ -35,7 +47,7 @@ interface IMarkdownProps {
 		name: string;
 		_id: number;
 	}[];
-	mentions: object[];
+	enableMessageParser: boolean;
 	navToRoomInfo: Function;
 	preview: boolean;
 	theme: string;
@@ -97,7 +109,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 
 	constructor(props: IMarkdownProps) {
 		super(props);
-		this.renderer = this.createRenderer();
+		if (!this.isNewMarkdown) {
+			this.renderer = this.createRenderer();
+		}
 	}
 
 	createRenderer = () =>
@@ -139,6 +153,11 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 			renderParagraphsInLists: true
 		});
 
+	get isNewMarkdown(): boolean {
+		const { md, enableMessageParser } = this.props;
+		return enableMessageParser && !!md;
+	}
+
 	editedMessage = (ast: any) => {
 		const { isEdited } = this.props;
 		if (isEdited) {
@@ -227,20 +246,19 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 	};
 
 	renderHashtag = ({ hashtag }: { hashtag: string }) => {
-		const { channels, navToRoomInfo, style, theme } = this.props;
-		return <MarkdownHashtag hashtag={hashtag} channels={channels} navToRoomInfo={navToRoomInfo} theme={theme} style={style} />;
+		const { channels, navToRoomInfo, style } = this.props;
+		return <MarkdownHashtag hashtag={hashtag} channels={channels} navToRoomInfo={navToRoomInfo} style={style} />;
 	};
 
 	renderAtMention = ({ mentionName }: { mentionName: string }) => {
-		const { username, mentions, navToRoomInfo, useRealName, style, theme } = this.props;
+		const { username, mentions, navToRoomInfo, useRealName, style } = this.props;
 		return (
 			<MarkdownAtMention
 				mentions={mentions}
 				mention={mentionName}
 				useRealName={useRealName}
 				username={username}
 				navToRoomInfo={navToRoomInfo}
-				theme={theme}
 				style={style}
 			/>
 		);
@@ -329,12 +347,44 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 	};
 
 	render() {
-		const { msg, numberOfLines, preview = false, theme, style = [], testID } = this.props;
+		const {
+			msg,
+			md,
+			numberOfLines,
+			preview = false,
+			theme,
+			style = [],
+			testID,
+			mentions,
+			channels,
+			navToRoomInfo,
+			useRealName,
+			username,
+			getCustomEmoji,
+			baseUrl,
+			onLinkPress
+		} = this.props;
 
 		if (!msg) {
 			return null;
 		}
 
+		if (this.isNewMarkdown) {
+			return (
+				<NewMarkdown
+					username={username}
+					baseUrl={baseUrl}
+					getCustomEmoji={getCustomEmoji}
+					useRealName={useRealName}
+					tokens={md}
+					mentions={mentions}
+					channels={channels}
+					navToRoomInfo={navToRoomInfo}
+					onLinkPress={onLinkPress}
+				/>
+			);
+		}
+
 		let m = formatText(msg);
 
 		// Ex: '[ ](https://open.rocket.chat/group/test?msg=abcdef)  Test'

app/containers/markdown/new/BigEmoji.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { BigEmoji as BigEmojiProps } from '@rocket.chat/message-parser';
+
+import Emoji from './Emoji';
+
+interface IBigEmojiProps {
+	value: BigEmojiProps['value'];
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row'
+	}
+});
+
+const BigEmoji = ({ value }: IBigEmojiProps): JSX.Element => (
+	<View style={styles.container}>
+		{value.map(block => (
+			<Emoji value={block.value} isBigEmoji />
+		))}
+	</View>
+);
+
+export default BigEmoji;

app/containers/markdown/new/Bold.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+import { Bold as BoldProps } from '@rocket.chat/message-parser';
+
+import sharedStyles from '../../../views/Styles';
+import Strike from './Strike';
+import Italic from './Italic';
+import Plain from './Plain';
+import Link from './Link';
+
+interface IBoldProps {
+	value: BoldProps['value'];
+}
+
+const styles = StyleSheet.create({
+	text: {
+		...sharedStyles.textBold
+	}
+});
+
+const Bold = ({ value }: IBoldProps): JSX.Element => (
+	<Text style={styles.text}>
+		{value.map(block => {
+			switch (block.type) {
+				case 'LINK':
+					return <Link value={block.value} />;
+				case 'PLAIN_TEXT':
+					return <Plain value={block.value} />;
+				case 'STRIKE':
+					return <Strike value={block.value} />;
+				case 'ITALIC':
+					return <Italic value={block.value} />;
+				default:
+					return null;
+			}
+		})}
+	</Text>
+);
+
+export default Bold;

app/containers/markdown/new/Code.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { Code as CodeProps } from '@rocket.chat/message-parser';
+
+import styles from '../styles';
+import { themes } from '../../../constants/colors';
+import { useTheme } from '../../../theme';
+import CodeLine from './CodeLine';
+
+interface ICodeProps {
+	value: CodeProps['value'];
+}
+
+const Code = ({ value }: ICodeProps): JSX.Element => {
+	const { theme } = useTheme();
+
+	return (
+		<Text
+			style={[
+				styles.codeBlock,
+				{
+					color: themes[theme!].bodyText,
+					backgroundColor: themes[theme!].bannerBackground,
+					borderColor: themes[theme!].borderColor
+				}
+			]}>
+			{value.map(block => {
+				switch (block.type) {
+					case 'CODE_LINE':
+						return <CodeLine value={block.value} />;
+					default:
+						return null;
+				}
+			})}
+		</Text>
+	);
+};
+
+export default Code;

app/containers/markdown/new/CodeLine.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { CodeLine as CodeLineProps } from '@rocket.chat/message-parser';
+
+interface ICodeLineProps {
+	value: CodeLineProps['value'];
+}
+
+const CodeLine = ({ value }: ICodeLineProps): JSX.Element | null => {
+	if (value.type !== 'PLAIN_TEXT') {
+		return null;
+	}
+
+	return <Text>{value.value}</Text>;
+};
+
+export default CodeLine;

app/containers/markdown/new/Emoji.tsx

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+import { Text } from 'react-native';
+import { Emoji as EmojiProps } from '@rocket.chat/message-parser';
+
+import shortnameToUnicode from '../../../utils/shortnameToUnicode';
+import { themes } from '../../../constants/colors';
+import { useTheme } from '../../../theme';
+import styles from '../styles';
+import CustomEmoji from '../../EmojiPicker/CustomEmoji';
+import MarkdownContext from './MarkdownContext';
+
+interface IEmojiProps {
+	value: EmojiProps['value'];
+	isBigEmoji?: boolean;
+}
+
+const Emoji = ({ value, isBigEmoji }: IEmojiProps): JSX.Element => {
+	const { theme } = useTheme();
+	const { baseUrl, getCustomEmoji } = useContext(MarkdownContext);
+	const emojiUnicode = shortnameToUnicode(`:${value.value}:`);
+	const emoji = getCustomEmoji?.(value.value);
+
+	if (emoji) {
+		return <CustomEmoji baseUrl={baseUrl} style={[isBigEmoji ? styles.customEmojiBig : styles.customEmoji]} emoji={emoji} />;
+	}
+	return <Text style={[{ color: themes[theme!].bodyText }, isBigEmoji ? styles.textBig : styles.text]}>{emojiUnicode}</Text>;
+};
+
+export default Emoji;