chore: Use @rocket.chat/message-parser instead of Commonmark (#6080)

Co-authored-by: Diego Mello <[email protected]>

CONTRIBUTING.md

@@ -78,7 +78,8 @@ We use [Jest](https://jestjs.io/) and [Storybook](https://storybook.js.org/) on
 
 Storybook is a tool for developing UI Components and has some plugins to make Jest generate snapshots of them.
 
-[On the root of the project](https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/develop/index.js#L24), comment everything leaving only the last import to Storybook left  and refresh your project.
+To open the Storybook, run yarn `storybook:start`, and then use `yarn android` or `yarn ios` to launch it on your desired platform.
+
 You'll see some tests like this:
 
 <img src="https://user-images.githubusercontent.com/804994/89677725-56393200-d8c4-11ea-84b0-213be1d24e98.png" width="350" />

app/containers/Avatar/Avatar.tsx

@@ -4,10 +4,11 @@ import FastImage from 'react-native-fast-image';
 import Touchable from 'react-native-platform-touchable';
 import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 
+import Emoji from '../markdown/components/emoji/Emoji';
 import { getAvatarURL } from '../../lib/methods/helpers/getAvatarUrl';
 import { SubscriptionType } from '../../definitions';
-import Emoji from '../markdown/Emoji';
 import { IAvatar } from './interfaces';
+import MarkdownContext from '../markdown/contexts/MarkdownContext';
 import I18n from '../../i18n';
 
 const Avatar = React.memo(
@@ -48,7 +49,14 @@ const Avatar = React.memo(
 
 		let image;
 		if (emoji) {
-			image = <Emoji getCustomEmoji={getCustomEmoji} isMessageContainsOnlyEmoji literal={emoji} style={avatarStyle} />;
+			image = (
+				<MarkdownContext.Provider
+					value={{
+						getCustomEmoji
+					}}>
+					<Emoji block={{ type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: emoji }, shortCode: emoji }} style={avatarStyle} />
+				</MarkdownContext.Provider>
+			);
 		} else {
 			let uri = avatar;
 			if (!isStatic) {

app/containers/CollapsibleText/index.tsx

@@ -3,8 +3,8 @@ import { TextStyle, Text, StyleSheet } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
 import { useTheme } from '../../theme';
-import { previewFormatText } from '../markdown/previewFormatText';
 import I18n from '../../i18n';
+import { previewFormatText } from '../../lib/helpers/previewFormatText';
 
 interface ICollapsibleText {
 	msg?: string;
@@ -67,15 +67,13 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 				} else {
 					setShowTruncated(false);
 				}
-			}}
-		>
+			}}>
 			{m}
 			{truncatedText ? (
 				<Text
 					testID='collapsible-text-show-less'
 					onPress={() => setShowTruncated(true)}
-					style={[styles.textInfo, { color: colors.fontHint }]}
-				>
+					style={[styles.textInfo, { color: colors.fontHint }]}>
 					{` ${I18n.t('Show_less')}`}
 				</Text>
 			) : null}

app/containers/UIKit/index.tsx

@@ -77,7 +77,7 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} numberOfLines={0} />
 			);
 		}
-		return <Markdown msg={element.text} theme={theme} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} />;
+		return <Markdown msg={element.text} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} />;
 	}
 
 	button(element: IButton, context: BlockContext) {