Renamed folder, add @rocket.chat/message-parser, migrate some files to TypeScript

app/containers/markdown/MessageBody/BigEmoji.js

@@ -1,19 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import React from 'react';
-import { View } from 'react-native';
-import PropTypes from 'prop-types';
-
-import Emoji from './Emoji';
-
-
-const BigEmoji = ({ value }) => (
-	<View style={{ flexDirection: 'row' }}>
-		{value.map((block, index) => <Emoji key={index} emojiHandle={`:${ block.value.value }:`} isBigEmoji />)}
-	</View>
-);
-
-BigEmoji.propTypes = {
-	value: PropTypes.object
-};
-
-export default BigEmoji;

app/containers/markdown/MessageBody/Plain.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import PropTypes from 'prop-types';
-
-const Plain = ({ value }) => (
-	<Text accessibilityLabel={value}>
-		{value}
-	</Text>
-);
-
-Plain.propTypes = {
-	value: PropTypes.string
-};
-
-export default Plain;

app/containers/markdown/index.tsx

@@ -4,6 +4,7 @@ import { Node, Parser } from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
 import removeMarkdown from 'remove-markdown';
 import { connect } from 'react-redux';
+import { MarkdownAST } from '@rocket.chat/message-parser';
 
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import I18n from '../../i18n';
@@ -22,10 +23,16 @@ import mergeTextNodes from './mergeTextNodes';
 import styles from './styles';
 import { isValidURL } from '../../utils/url';
 import { getUserSelector } from '../../selectors/login';
-import MessageBody from './MessageBody';
+import NewMarkdown from './new';
 
 interface IMarkdownProps {
 	msg: string;
+	md: [
+		{
+			tokens: MarkdownAST;
+			mentions: object[];
+		}
+	];
 	getCustomEmoji: Function;
 	baseUrl: string;
 	username: string;
@@ -39,6 +46,9 @@ interface IMarkdownProps {
 		_id: number;
 	}[];
 	mentions: object[];
+	user: {
+		enableMessageParserEarlyAdoption: boolean;
+	};
 	navToRoomInfo: Function;
 	preview: boolean;
 	theme: string;
@@ -351,7 +361,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 		}
 
 		if (user.enableMessageParserEarlyAdoption && md) {
-			return <MessageBody tokens={md} style={style} mentions={mentions} channels={channels} navToRoomInfo={navToRoomInfo} />;
+			return <NewMarkdown tokens={md} style={style} mentions={mentions} channels={channels} navToRoomInfo={navToRoomInfo} />;
 		}
 
 		let m = formatText(msg);
@@ -385,7 +395,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	user: getUserSelector(state)
 });
 

app/containers/markdown/new/BigEmoji.tsx

@@ -0,0 +1,25 @@
+import React, { FC } 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: FC<IBigEmojiProps> = ({ value }) => (
+	<View style={styles.container}>
+		{value.map(block => (
+			<Emoji emojiHandle={`:${block.value.value}:`} isBigEmoji />
+		))}
+	</View>
+);
+
+export default BigEmoji;

app/containers/markdown/new/Bold.tsx

@@ -1,28 +1,32 @@
 /* eslint-disable react/no-array-index-key */
-import React from 'react';
+import React, { FC } from 'react';
 import { StyleSheet, Text } from 'react-native';
-import PropTypes from 'prop-types';
+import { Bold as BoldProps } from '@rocket.chat/message-parser';
 
 import Strike from './Strike';
 import Italic from './Italic';
 import Plain from './Plain';
 
+interface IBoldProps {
+	value: BoldProps['value'];
+}
+
 const styles = StyleSheet.create({
 	text: {
 		fontWeight: 'bold'
 	}
 });
 
-const Bold = ({ value }) => (
+const Bold: FC<IBoldProps> = ({ value }) => (
 	<Text style={styles.text}>
-		{value.map((block, index) => {
+		{value.map(block => {
 			switch (block.type) {
 				case 'PLAIN_TEXT':
 					return <Plain value={block.value} />;
 				case 'STRIKE':
-					return <Strike key={index} value={block.value} />;
+					return <Strike value={block.value} />;
 				case 'ITALIC':
-					return <Italic key={index} value={block.value} />;
+					return <Italic value={block.value} />;
 				default:
 					return null;
 			}
@@ -30,8 +34,4 @@ const Bold = ({ value }) => (
 	</Text>
 );
 
-Bold.propTypes = {
-	value: PropTypes.string
-};
-
 export default Bold;

app/containers/markdown/new/Code.js

@@ -3,15 +3,12 @@ import React from 'react';
 import { Text } from 'react-native';
 import PropTypes from 'prop-types';
 
-import CodeLine from './CodeLine';
 import styles from '../styles';
-
 import { themes } from '../../../constants/colors';
 import { useTheme } from '../../../theme';
+import CodeLine from './CodeLine';
 
-const Code = ({
+const Code = ({ value, style }) => {
-	value, style
-}) => {
 	const { theme } = useTheme();
 
 	return (
@@ -24,8 +21,7 @@ const Code = ({
 					borderColor: themes[theme].borderColor
 				},
 				...style
-			]}
+			]}>
-		>
 			{value.map((block, index) => {
 				switch (block.type) {
 					case 'CODE_LINE':

app/containers/markdown/new/CodeLine.js

@@ -2,9 +2,7 @@ import React from 'react';
 import { Text } from 'react-native';
 import PropTypes from 'prop-types';
 
-const CodeLine = ({ value }) => (
+const CodeLine = ({ value }) => <Text>{value.type === 'PLAIN_TEXT' && value.value}</Text>;
-	<Text>{value.type === 'PLAIN_TEXT' && value.value}</Text>
-);
 
 CodeLine.propTypes = {
 	value: PropTypes.object

app/containers/markdown/new/Emoji.js

@@ -11,15 +11,7 @@ const Emoji = ({ emojiHandle, style, isBigEmoji }) => {
 	const { theme } = useTheme();
 	const emojiUnicode = shortnameToUnicode(emojiHandle);
 	return (
-		<Text
+		<Text style={[{ color: themes[theme].bodyText }, isBigEmoji ? styles.textBig : styles.text, style]}>{emojiUnicode}</Text>
-			style={[
-				{ color: themes[theme].bodyText },
-				isBigEmoji ? styles.textBig : styles.text,
-				style
-			]}
-		>
-			{emojiUnicode}
-		</Text>
 	);
 };
 

app/containers/markdown/new/Heading.js

@@ -7,18 +7,14 @@ import { useTheme } from '../../../theme';
 
 const Heading = ({ value, level }) => {
 	const { theme } = useTheme();
-	const textStyle = styles[`heading${ level }`];
+	const textStyle = styles[`heading${level}`];
 
 	return (
 		<>
-			{value.map((block) => {
+			{value.map(block => {
 				switch (block.type) {
 					case 'PLAIN_TEXT':
-						return (
+						return <Text style={[textStyle, { color: themes[theme].bodyText }]}>{block.value}</Text>;
-							<Text style={[textStyle, { color: themes[theme].bodyText }]}>
-								{block.value}
-							</Text>
-						);
 					default:
 						return null;
 				}

app/containers/markdown/new/Inline.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { Text } from 'react-native';
 import PropTypes from 'prop-types';
 
+import Hashtag from '../Hashtag';
+
 import Link from './Link';
 import Plain from './Plain';
 import Bold from './Bold';
@@ -10,14 +12,10 @@ import Italic from './Italic';
 import Emoji from './Emoji';
 import Mention from './Mention';
 import InlineCode from './InlineCode';
-import Hashtag from '../Hashtag';
 
-
+const Inline = ({ value, mentions, channels, navToRoomInfo, style }) => (
-const Inline = ({
-	value, mentions, channels, navToRoomInfo, style
-}) => (
 	<Text>
-		{value.map((block) => {
+		{value.map(block => {
 			switch (block.type) {
 				case 'PLAIN_TEXT':
 					return <Plain value={block.value} />;
@@ -33,7 +31,7 @@ const Inline = ({
 				case 'MENTION_USER':
 					return <Mention value={block.value} navToRoomInfo={navToRoomInfo} mentions={mentions} style={style} />;
 				case 'EMOJI':
-					return <Emoji emojiHandle={`:${ block.value.value }:`} />;
+					return <Emoji emojiHandle={`:${block.value.value}:`} />;
 				case 'MENTION_CHANNEL':
 					return <Hashtag hashtag={block.value.value} navToRoomInfo={navToRoomInfo} channels={channels} style={style} />;
 				case 'INLINE_CODE':

app/containers/markdown/new/InlineCode.js

@@ -10,7 +10,8 @@ const InlineCode = ({ value, style }) => {
 	const { theme } = useTheme();
 
 	return (
-		<Text style={[
+		<Text
+			style={[
 				{
 					...styles.codeInline,
 					color: themes[theme].bodyText,
@@ -18,9 +19,8 @@ const InlineCode = ({ value, style }) => {
 					borderColor: themes[theme].borderColor
 				},
 				...style
-		]}
+			]}>
-		>
+			{(block => {
-			{((block) => {
 				switch (block.type) {
 					case 'PLAIN_TEXT':
 						return block.value;

app/containers/markdown/new/Italic.tsx

@@ -1,19 +1,23 @@
 /* eslint-disable react/no-array-index-key */
-import React from 'react';
+import React, { FC } from 'react';
 import { StyleSheet, Text } from 'react-native';
-import PropTypes from 'prop-types';
+import { Italic as ItalicProps } from '@rocket.chat/message-parser';
 
 import Strike from './Strike';
 import Bold from './Bold';
 import Plain from './Plain';
 
+interface IItalicProps {
+	value: ItalicProps['value'];
+}
+
 const styles = StyleSheet.create({
 	text: {
 		fontStyle: 'italic'
 	}
 });
 
-const Italic = ({ value }) => (
+const Italic: FC<IItalicProps> = ({ value }) => (
 	<Text style={styles.text}>
 		{value.map((block, index) => {
 			switch (block.type) {
@@ -30,8 +34,4 @@ const Italic = ({ value }) => (
 	</Text>
 );
 
-Italic.propTypes = {
-	value: PropTypes.string
-};
-
 export default Italic;

app/containers/markdown/new/Link.js

@@ -2,9 +2,6 @@ import React from 'react';
 import { Text, Clipboard } from 'react-native';
 import PropTypes from 'prop-types';
 
-import Strike from './Strike';
-import Italic from './Italic';
-import Bold from './Bold';
 import styles from '../styles';
 import I18n from '../../../i18n';
 import { LISTENER } from '../../Toast';
@@ -13,6 +10,10 @@ import openLink from '../../../utils/openLink';
 import EventEmitter from '../../../utils/events';
 import { themes } from '../../../constants/colors';
 
+import Strike from './Strike';
+import Italic from './Italic';
+import Bold from './Bold';
+
 const Link = ({ value }) => {
 	const { theme } = useTheme();
 	const { src, label } = value;
@@ -29,12 +30,8 @@ const Link = ({ value }) => {
 	};
 
 	return (
-		<Text
+		<Text onPress={handlePress} onLongPress={onLongPress} style={{ ...styles.link, color: themes[theme].actionTintColor }}>
-			onPress={handlePress}
+			{(block => {
-			onLongPress={onLongPress}
-			style={{ ...styles.link, color: themes[theme].actionTintColor }}
-		>
-			{((block) => {
 				switch (block.type) {
 					case 'PLAIN_TEXT':
 						return block.value;

app/containers/markdown/new/Mention.js

@@ -7,9 +7,7 @@ import { events, logEvent } from '../../../utils/log';
 import { useTheme } from '../../../theme';
 import { themes } from '../../../constants/colors';
 
-const Mention = ({
+const Mention = ({ value: mention, mentions, navToRoomInfo, style }) => {
-	value: mention, mentions, navToRoomInfo, style
-}) => {
 	const { theme } = useTheme();
 	let mentionStyle = [];
 	const notMentionedStyle = [styles.text, { color: themes[theme].bodyText }, ...style];
@@ -43,10 +41,14 @@ const Mention = ({
 
 	return (
 		<Text
-			style={[styles.mention, (mention || mentionedUser) && mentionStyle, !(mention || mentionedUser) && notMentionedStyle, ...style]}
+			style={[
-			onPress={handlePress}
+				styles.mention,
-		>
+				(mention || mentionedUser) && mentionStyle,
-			{mentionedUser ? mentionedUser.name || mention.value : `@{${ mention }}` }
+				!(mention || mentionedUser) && notMentionedStyle,
+				...style
+			]}
+			onPress={handlePress}>
+			{mentionedUser ? mentionedUser.name || mention.value : `@{${mention}}`}
 		</Text>
 	);
 };

app/containers/markdown/new/Paragraph.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 
 import Inline from './Inline';
 
-const Paragraph = ({
+const Paragraph = ({ value, mentions, channels, navToRoomInfo, style }) => (
-	value, mentions, channels, navToRoomInfo, style
+	<Inline value={value} mentions={mentions} channels={channels} navToRoomInfo={navToRoomInfo} style={style} />
-}) => <Inline value={value} mentions={mentions} channels={channels} navToRoomInfo={navToRoomInfo} style={style} />;
+);
 
 Paragraph.propTypes = {
 	value: PropTypes.string,

app/containers/markdown/new/Plain.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import { Text } from 'react-native';
+import { Plain as PlainProps } from '@rocket.chat/message-parser';
+
+interface IPlainProps {
+	value: PlainProps['value'];
+}
+
+const Plain: FC<IPlainProps> = ({ value }) => <Text accessibilityLabel={value}>{value}</Text>;
+
+export default Plain;

app/containers/markdown/new/Strike.tsx

@@ -1,28 +1,32 @@
 /* eslint-disable react/no-array-index-key */
-import React from 'react';
+import React, { FC } from 'react';
 import { StyleSheet, Text } from 'react-native';
-import PropTypes from 'prop-types';
+import { Strike as StrikeProps } from '@rocket.chat/message-parser';
 
 import Bold from './Bold';
 import Italic from './Italic';
 import Plain from './Plain';
 
+interface IStrikeProps {
+	value: StrikeProps['value'];
+}
+
 const styles = StyleSheet.create({
 	text: {
 		textDecorationLine: 'line-through'
 	}
 });
 
-const Strike = ({ value }) => (
+const Strike: FC<IStrikeProps> = ({ value }) => (
 	<Text style={styles.text}>
-		{value.map((block, index) => {
+		{value.map(block => {
 			switch (block.type) {
 				case 'PLAIN_TEXT':
-					return <Plain key={index} value={block.value} />;
+					return <Plain value={block.value} />;
 				case 'BOLD':
-					return <Bold key={index} value={block.value} />;
+					return <Bold value={block.value} />;
 				case 'ITALIC':
-					return <Italic key={index} value={block.value} />;
+					return <Italic value={block.value} />;
 				default:
 					return null;
 			}
@@ -30,8 +34,4 @@ const Strike = ({ value }) => (
 	</Text>
 );
 
-Strike.propTypes = {
-	value: PropTypes.string
-};
-
 export default Strike;

app/containers/markdown/new/index.js

@@ -13,9 +13,7 @@ import UnorderedList from './UnorderedList';
 
 const isBigEmoji = tokens => tokens.length === 1 && tokens[0].type === 'BIG_EMOJI';
 
-const Body = ({
+const Body = ({ tokens, mentions, channels, navToRoomInfo, style }) => {
-	tokens, mentions, channels, navToRoomInfo, style
-}) => {
 	if (isBigEmoji(tokens)) {
 		return <BigEmoji value={tokens[0].value} />;
 	}

package.json

@@ -47,6 +47,7 @@
 		"@react-navigation/drawer": "5.12.5",
 		"@react-navigation/native": "5.9.4",
 		"@react-navigation/stack": "5.14.5",
+		"@rocket.chat/message-parser": "^0.29.0",
 		"@rocket.chat/react-native-fast-image": "^8.2.0",
 		"@rocket.chat/sdk": "RocketChat/Rocket.Chat.js.SDK#mobile",
 		"@rocket.chat/ui-kit": "0.13.0",

yarn.lock

@@ -3203,6 +3203,11 @@
   dependencies:
     eslint-plugin-import "^2.17.2"
 
+"@rocket.chat/message-parser@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/message-parser/-/message-parser-0.29.0.tgz#9577f354756653e6271b9fe2290fadafcb5d4293"
+  integrity sha512-2qEPTNSHeWRCFfxCETqz9Asju6bf5dR98+AQUYwNus5911WW4tuehvrfvoqLYrlYqs4w5Qj6q9m2THCXqN27Gw==
+
 "@rocket.chat/react-native-fast-image@^8.2.0":
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/@rocket.chat/react-native-fast-image/-/react-native-fast-image-8.2.0.tgz#4f48858f95f40afcb10b39cee9b1239c150d6c51"