[NEW] Emphasis Elements (italic, strike and bold) in Message Parser Components (#4621)

* [NEW] Emphasis Elements (italic, strike and bold) in Message Parser Components

* update storyshot

* minor tweak and remove of isLink

* Add theme provider to new md stories

* Cleanup

* Update tests

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/containers/markdown/new/Link.tsx

@@ -41,18 +41,21 @@ const Link = ({ value }: ILinkProps) => {
 	return (
 		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].actionTintColor }]}>
 			{(block => {
-				switch (block.type) {
+				const blockArray = Array.isArray(block) ? block : [block];
-					case 'PLAIN_TEXT':
+				return blockArray.map(blockInArray => {
-						return block.value;
+					switch (blockInArray.type) {
-					case 'STRIKE':
+						case 'PLAIN_TEXT':
-						return <Strike value={block.value} />;
+							return blockInArray.value;
-					case 'ITALIC':
+						case 'STRIKE':
-						return <Italic value={block.value} />;
+							return <Strike value={blockInArray.value} />;
-					case 'BOLD':
+						case 'ITALIC':
-						return <Bold value={block.value} />;
+							return <Italic value={blockInArray.value} />;
-					default:
+						case 'BOLD':
-						return null;
+							return <Bold value={blockInArray.value} />;
-				}
+						default:
+							return null;
+					}
+				});
 			})(label)}
 		</Text>
 	);

app/containers/markdown/new/NewMarkdown.stories.tsx

@@ -3,22 +3,25 @@ import { StyleSheet, View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 
 import NewMarkdownComponent from '.';
-import { themes } from '../../../lib/constants';
+import { colors, themes } from '../../../lib/constants';
 import { longText } from '../../../../.storybook/utils';
+import { ThemeContext } from '../../../theme';
+
+const theme = 'light';
 
 export default {
 	title: 'NewMarkdown',
 	decorators: [
 		(Story: any) => (
 			<NavigationContainer>
-				<Story />
+				<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
+					<Story />
+				</ThemeContext.Provider>
 			</NavigationContainer>
 		)
 	]
 };
 
-const theme = 'light';
-
 const styles = StyleSheet.create({
 	container: {
 		marginHorizontal: 15,
@@ -420,10 +423,73 @@ const markdownLink = [
 	}
 ];
 
+const markdownLinkWithEmphasis = [
+	{
+		type: 'PARAGRAPH',
+		value: [
+			{
+				type: 'LINK',
+				value: {
+					src: {
+						type: 'PLAIN_TEXT',
+						value: 'https://rocket.chat/'
+					},
+					label: [
+						{
+							type: 'PLAIN_TEXT',
+							value: 'Normal Link - '
+						},
+						{
+							type: 'BOLD',
+							value: [
+								{
+									type: 'PLAIN_TEXT',
+									value: 'Bold'
+								}
+							]
+						},
+						{
+							type: 'PLAIN_TEXT',
+							value: ' '
+						},
+						{
+							type: 'STRIKE',
+							value: [
+								{
+									type: 'PLAIN_TEXT',
+									value: 'strike'
+								}
+							]
+						},
+						{
+							type: 'PLAIN_TEXT',
+							value: ' and '
+						},
+						{
+							type: 'ITALIC',
+							value: [
+								{
+									type: 'PLAIN_TEXT',
+									value: 'Italic'
+								}
+							]
+						},
+						{
+							type: 'PLAIN_TEXT',
+							value: ' Styles'
+						}
+					]
+				}
+			}
+		]
+	}
+];
+
 export const Links = () => (
 	<View style={styles.container}>
 		<NewMarkdown tokens={rocketChatLink} />
 		<NewMarkdown tokens={markdownLink} />
+		<NewMarkdown tokens={markdownLinkWithEmphasis} />
 	</View>
 );
 

app/containers/markdown/new/Plain.tsx

@@ -3,20 +3,15 @@ import { Text } from 'react-native';
 import { Plain as PlainProps } from '@rocket.chat/message-parser';
 
 import styles from '../styles';
-import { useTheme } from '../../../theme';
-import { themes } from '../../../lib/constants';
 
 interface IPlainProps {
 	value: PlainProps['value'];
 }
 
-const Plain = ({ value }: IPlainProps) => {
+const Plain = ({ value }: IPlainProps) => (
-	const { theme } = useTheme();
+	<Text accessibilityLabel={value} style={styles.plainText}>
-	return (
+		{value}
-		<Text accessibilityLabel={value} style={[styles.plainText, { color: themes[theme].bodyText }]}>
+	</Text>
-			{value}
+);
-		</Text>
-	);
-};
 
 export default Plain;