Updated components and added more Code components

app/containers/markdown/MessageBody/Code.js

@@ -1,18 +1,24 @@
+/* eslint-disable react/no-array-index-key */
 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';
 
 const Code = ({
-	type, styles, style, literal
+	value, style
 }) => {
-	const theme = useTheme();
+	const { theme } = useTheme();
+
 	return (
 		<Text
 			style={[
 				{
-					...(type === 'INLINE_CODE' ? styles.codeInline : styles.codeBlock),
+					...styles.codeBlock,
 					color: themes[theme].bodyText,
 					backgroundColor: themes[theme].bannerBackground,
 					borderColor: themes[theme].bannerBackground
@@ -20,15 +26,20 @@ const Code = ({
 				...style
 			]}
 		>
-			{literal}
+			{value.map((block, index) => {
+				switch (block.type) {
+					case 'CODE_LINE':
+						return <CodeLine key={index} value={block.value} />;
+					default:
+						return null;
+				}
+			})}
 		</Text>
 	);
 };
 
 Code.propTypes = {
-	type: PropTypes.string,
-	literal: PropTypes.string,
-	styles: PropTypes.object,
+	value: PropTypes.array,
 	style: PropTypes.object
 };
 

app/containers/markdown/MessageBody/CodeLine.js

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

app/containers/markdown/MessageBody/Inline.js

@@ -4,13 +4,16 @@ import PropTypes from 'prop-types';
 
 import Link from './Link';
 import Plain from './Plain';
-import Code from './Code';
 import Bold from './Bold';
 import Strike from './Strike';
 import Italic from './Italic';
 import Emoji from './Emoji';
+import Mention from './Mention';
+import InlineCode from './InlineCode';
 
-const Inline = ({ value }) => (
+const Inline = ({
+	value, mentions, navToRoomInfo, style
+}) => (
 	<Text>
 		{value.map((block) => {
 			switch (block.type) {
@@ -25,15 +28,15 @@ const Inline = ({ value }) => (
 				case 'LINK':
 					// eslint-disable-next-line jsx-a11y/anchor-is-valid
 					return <Link value={block.value} />;
-					// case 'MENTION_USER':
-					// 	return <Mention value={block.value} mentions={mentions} />;
+				case 'MENTION_USER':
+					return <Mention value={block.value} navToRoomInfo={navToRoomInfo} mentions={mentions} style={style} />;
 				case 'EMOJI':
 					return <Emoji emojiHandle={`:${ block.value.value }:`} />;
-				// case 'MENTION_CHANNEL':
-				// 	// case 'COLOR':
-				// 	return <Plain value={block.value} />;
+				case 'MENTION_CHANNEL':
+					// case 'COLOR':
+					return <Plain value={`${ block.value.value }`} />;
 				case 'INLINE_CODE':
-					return <Code value={block.value} />;
+					return <InlineCode value={block.value} style={style} />;
 				default:
 					return null;
 			}
@@ -42,7 +45,10 @@ const Inline = ({ value }) => (
 );
 
 Inline.propTypes = {
-	value: PropTypes.object
+	value: PropTypes.object,
+	mentions: PropTypes.array,
+	navToRoomInfo: PropTypes.func,
+	style: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
 };
 
 export default Inline;

app/containers/markdown/MessageBody/InlineCode.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Text } from 'react-native';
+import PropTypes from 'prop-types';
+import { useTheme } from '@react-navigation/native';
+
+import styles from '../styles';
+import { themes } from '../../../constants/colors';
+
+const InlineCode = ({ value, style }) => {
+	const { theme } = useTheme();
+
+	return (
+		<Text style={[
+			{
+				...styles.codeInline,
+				color: themes[theme].bodyText,
+				backgroundColor: themes[theme].bannerBackground,
+				borderColor: themes[theme].bannerBackground
+			},
+			...style
+		]}
+		>
+			{((block) => {
+				switch (block.type) {
+					case 'PLAIN_TEXT':
+						return block.value;
+					default:
+						return null;
+				}
+			})(value)}
+		</Text>
+	);
+};
+
+InlineCode.propTypes = {
+	value: PropTypes.object,
+	style: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
+};
+
+export default InlineCode;

app/containers/markdown/MessageBody/Link.js

@@ -32,7 +32,6 @@ const Link = ({ value }) => {
 		<Text
 			onPress={handlePress}
 			onLongPress={onLongPress}
-			o
 			style={{ ...styles.link, color: themes[theme].actionTintColor }}
 		>
 			{((block) => {

app/containers/markdown/MessageBody/Mention.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Text } from 'react-native';
+import PropTypes from 'prop-types';
+
+import styles from '../styles';
+import { events, logEvent } from '../../../utils/log';
+import { useTheme } from '../../../theme';
+import { themes } from '../../../constants/colors';
+
+const Mention = ({
+	value: mention, mentions, navToRoomInfo, style
+}) => {
+	const { theme } = useTheme();
+	let mentionStyle = [];
+	const notMentionedStyle = [styles.text, { color: themes[theme].bodyText }, ...style];
+	const mentionedUser = mentions.find(mentioned => mentioned.username === mention.value);
+
+	if (mention === 'all' || mention === 'here') {
+		mentionStyle = [
+			{
+				color: themes[theme].mentionGroupColor
+			},
+			...style
+		];
+	}
+
+	if (mention === mentionedUser) {
+		mentionStyle = {
+			color: themes[theme].mentionMeColor
+		};
+	} else {
+		mentionStyle = {
+			color: themes[theme].mentionOtherColor
+		};
+	}
+
+	const handlePress = () => {
+		logEvent(events.ROOM_MENTION_GO_USER_INFO);
+		const navParam = {
+			t: 'd',
+			rid: mentionedUser && mentionedUser._id
+		};
+		navToRoomInfo(navParam);
+	};
+
+	return (
+		<Text
+			style={[styles.mention, (mention || mentionedUser) && mentionStyle, !(mention || mentionedUser) && notMentionedStyle, ...style]}
+			onPress={handlePress}
+		>
+			{mentionedUser ? mentionedUser.name || mention.value : `@{${ mention }}` }
+		</Text>
+	);
+};
+
+Mention.propTypes = {
+	value: PropTypes.string,
+	mentions: PropTypes.array,
+	navToRoomInfo: PropTypes.func,
+	style: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
+};
+
+export default Mention;

app/containers/markdown/MessageBody/Paragraph.js

@@ -3,11 +3,15 @@ import PropTypes from 'prop-types';
 
 import Inline from './Inline';
 
-const Paragraph = ({ value, mentions }) => <Inline value={value} mentions={mentions} />;
+const Paragraph = ({
+	value, mentions, navToRoomInfo, style
+}) => <Inline value={value} mentions={mentions} navToRoomInfo={navToRoomInfo} style={style} />;
 
 Paragraph.propTypes = {
 	value: PropTypes.string,
-	mentions: PropTypes.string
+	mentions: PropTypes.string,
+	navToRoomInfo: PropTypes.func,
+	style: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
 };
 
 export default Paragraph;

app/containers/markdown/MessageBody/Quote.js

@@ -6,7 +6,7 @@ import { useTheme } from '../../../theme';
 import styles from '../styles';
 
 const Quote = ({ value }) => {
-	const theme = useTheme();
+	const { theme } = useTheme();
 	return (
 		<>
 			<View style={styles.container}>

app/containers/markdown/MessageBody/index.js

@@ -9,14 +9,14 @@ import Heading from './Heading';
 import Code from './Code';
 import Link from './Link';
 import BigEmoji from './BigEmoji';
-import { useTheme } from '../../../theme';
 
 const isBigEmoji = tokens => tokens.length === 1 && tokens[0].type === 'BIG_EMOJI';
 
-const Body = ({ tokens, mentions }) => {
-	const { theme } = useTheme();
+const Body = ({
+	tokens, mentions, navToRoomInfo, style
+}) => {
 	if (isBigEmoji(tokens)) {
-		return <BigEmoji value={tokens[0].value} theme={theme} />;
+		return <BigEmoji value={tokens[0].value} />;
 	}
 
 	return (
@@ -32,9 +32,9 @@ const Body = ({ tokens, mentions }) => {
 					case 'QUOTE':
 						return <Quote key={index} value={block.value} />;
 					case 'PARAGRAPH':
-						return <Paragraph key={index} value={block.value} mentions={mentions} />;
+						return <Paragraph key={index} value={block.value} navToRoomInfo={navToRoomInfo} mentions={mentions} style={style} />;
 					case 'CODE':
-						return <Code key={index} value={block.value} />;
+						return <Code key={index} value={block.value} style={style} />;
 					case 'LINK':
 						// eslint-disable-next-line jsx-a11y/anchor-is-valid
 						return <Link key={index} value={block.value} />;
@@ -50,7 +50,9 @@ const Body = ({ tokens, mentions }) => {
 
 Body.propTypes = {
 	tokens: PropTypes.array,
-	mentions: PropTypes.array
+	mentions: PropTypes.array,
+	navToRoomInfo: PropTypes.func,
+	style: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
 };
 
 export default Body;

app/containers/markdown/index.js

@@ -376,7 +376,7 @@ class Markdown extends PureComponent {
 
 	render() {
 		const {
-			msg, md, numberOfLines, preview = false, theme, style = [], testID, user, mentions
+			msg, md, numberOfLines, preview = false, theme, style = [], testID, user, mentions, navToRoomInfo
 		} = this.props;
 
 		if (!msg) {
@@ -384,7 +384,7 @@ class Markdown extends PureComponent {
 		}
 
 		if (user.enableMessageParserEarlyAdoption && md) {
-			return <MessageBody tokens={md} theme={theme} style={style} mentions={mentions} />;
+			return <MessageBody tokens={md} theme={theme} style={style} mentions={mentions} navToRoomInfo={navToRoomInfo} />;
 		}
 
 		let m = formatText(msg);