Chore: Migrate Markdown to Typescript

app/containers/Avatar/Avatar.tsx

@@ -43,7 +43,7 @@ const Avatar = React.memo(
 		if (emoji) {
 			image = (
 				<Emoji
-					theme={theme}
+					theme={theme!}
 					baseUrl={server}
 					getCustomEmoji={getCustomEmoji}
 					isMessageContainsOnlyEmoji

app/containers/MessageBox/ReplyPreview.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import moment from 'moment';
 import { connect } from 'react-redux';
 
-import Markdown from '../markdown';
+import Preview from '../markdown/Preview';
 import { CustomIcon } from '../../lib/Icons';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
@@ -43,9 +43,13 @@ const styles = StyleSheet.create({
 interface IMessageBoxReplyPreview {
 	replying: boolean;
 	message: {
+		id: any;
 		ts: Date;
 		msg: string;
-		u: any;
+		u: {
+			username?: string;
+			name?: string;
+		};
 	};
 	Message_TimeFormat: string;
 	close(): void;
@@ -57,17 +61,7 @@ interface IMessageBoxReplyPreview {
 }
 
 const ReplyPreview = React.memo(
-	({
-		message,
-		Message_TimeFormat,
-		baseUrl,
-		username,
-		replying,
-		getCustomEmoji,
-		close,
-		theme,
-		useRealName
-	}: IMessageBoxReplyPreview) => {
+	({ message, Message_TimeFormat, replying, close, theme, useRealName }: IMessageBoxReplyPreview) => {
 		if (!replying) {
 			return null;
 		}
@@ -82,16 +76,7 @@ const ReplyPreview = React.memo(
 						</Text>
 						<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
 					</View>
-					{/* @ts-ignore*/}
-					<Markdown
-						msg={message.msg}
-						baseUrl={baseUrl}
-						username={username}
-						getCustomEmoji={getCustomEmoji}
-						numberOfLines={1}
-						preview
-						theme={theme}
-					/>
+					<Preview msg={message.msg} numberOfLines={1} theme={theme} />
 				</View>
 				<CustomIcon name='close' color={themes[theme].auxiliaryText} size={20} style={styles.close} onPress={close} />
 			</View>

app/containers/MessageBox/index.tsx

@@ -73,10 +73,13 @@ interface IMessageBoxProps {
 	rid: string;
 	baseUrl: string;
 	message: {
+		id: any;
+		ts: Date;
+		msg: string;
 		u: {
-			username: string;
+			username?: string;
+			name?: string;
 		};
-		id: any;
 	};
 	replying: boolean;
 	editing: boolean;
@@ -1068,7 +1071,6 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 
 		const replyPreview = !recording ? (
 			<ReplyPreview
-				// @ts-ignore
 				message={message}
 				close={replyCancel}
 				username={user.username}

app/containers/RoomHeader/RoomHeader.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import I18n from '../../i18n';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
-import Markdown from '../markdown';
+import Preview from '../markdown/Preview';
 import RoomTypeIcon from '../RoomTypeIcon';
 import { withTheme } from '../../theme';
 
@@ -102,9 +102,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, theme, scale }
 	// subtitle
 	if (subtitle) {
 		return (
-			// @ts-ignore
-			<Markdown
-				preview
+			<Preview
 				msg={subtitle}
 				style={[styles.subtitle, { fontSize, color: themes[theme].auxiliaryText }]}
 				numberOfLines={1}
@@ -126,10 +124,7 @@ const HeaderTitle = React.memo(({ title, tmid, prid, scale, theme, testID }: TRo
 		);
 	}
 
-	return (
-		// @ts-ignore
-		<Markdown preview msg={title} style={[styles.title, titleStyle]} numberOfLines={1} theme={theme} testID={testID} />
-	);
+	return <Preview msg={title} style={[styles.title, titleStyle]} numberOfLines={1} theme={theme} testID={testID} />;
 });
 
 const Header = React.memo(

app/containers/UIKit/index.tsx

@@ -4,6 +4,7 @@ import { StyleSheet, Text } from 'react-native';
 import { BLOCK_CONTEXT, UiKitParserMessage, UiKitParserModal, uiKitMessage, uiKitModal } from '@rocket.chat/ui-kit';
 
 import Markdown from '../markdown';
+import Preview from '../markdown/Preview';
 import Button from '../Button';
 import TextInput from '../TextInput';
 import { textParser, useBlockContext } from './utils';
@@ -49,10 +50,10 @@ class MessageParser extends UiKitParserMessage {
 		}
 
 		const isContext = context === BLOCK_CONTEXT.CONTEXT;
-		return (
-			// @ts-ignore
-			<Markdown msg={text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} preview={isContext} />
-		);
+		if (isContext) {
+			return <Preview msg={text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />;
+		}
+		return <Markdown msg={text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} />;
 	}
 
 	button(element: any, context: any) {

app/containers/markdown/Emoji.tsx

@@ -12,8 +12,8 @@ interface IEmoji {
 	getCustomEmoji?: Function;
 	baseUrl: string;
 	customEmojis?: any;
-	style: object;
-	theme?: string;
+	style?: object;
+	theme: string;
 	onEmojiSelected?: Function;
 	tabEmojiStyle?: object;
 }
@@ -32,7 +32,7 @@ const Emoji = React.memo(
 			);
 		}
 		return (
-			<Text style={[{ color: themes[theme!].bodyText }, isMessageContainsOnlyEmoji ? styles.textBig : styles.text, style]}>
+			<Text style={[{ color: themes[theme].bodyText }, isMessageContainsOnlyEmoji ? styles.textBig : styles.text, style]}>
 				{emojiUnicode}
 			</Text>
 		);

app/containers/markdown/Hashtag.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TextStyle } from 'react-native';
+import { Text, TextStyle, StyleProp } from 'react-native';
 
 import { themes } from '../../constants/colors';
 import { useTheme } from '../../theme';
@@ -8,8 +8,8 @@ import styles from './styles';
 interface IHashtag {
 	hashtag: string;
 	navToRoomInfo: Function;
-	style?: TextStyle[];
-	channels: {
+	style?: StyleProp<TextStyle>[];
+	channels?: {
 		[index: number]: string | number;
 		name: string;
 		_id: number;
@@ -23,7 +23,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
 		const index = channels?.findIndex(channel => channel.name === hashtag);
 		const navParam = {
 			t: 'c',
-			rid: channels[index]._id
+			rid: channels?.[index!]._id
 		};
 		navToRoomInfo(navParam);
 	};

app/containers/markdown/Link.tsx

@@ -12,7 +12,7 @@ interface ILink {
 	children: JSX.Element;
 	link: string;
 	theme: string;
-	onLinkPress: Function;
+	onLinkPress?: Function;
 }
 
 const Link = React.memo(({ children, link, theme, onLinkPress }: ILink) => {

app/containers/markdown/List.tsx

@@ -5,7 +5,7 @@ interface IList {
 	ordered: boolean;
 	start: number;
 	tight: boolean;
-	numberOfLines: number;
+	numberOfLines?: number;
 }
 
 const List = React.memo(({ children, ordered, tight, start = 1, numberOfLines = 0 }: IList) => {

app/containers/markdown/Preview.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleProp, Text, TextStyle } from 'react-native';
+import removeMarkdown from 'remove-markdown';
+
+import shortnameToUnicode from '../../utils/shortnameToUnicode';
+import { themes } from '../../constants/colors';
+import { formatText } from './formatText';
+import styles from './styles';
+
+interface IPreview {
+	msg: string;
+	numberOfLines: number;
+	theme: string;
+	testID?: string;
+	style?: StyleProp<TextStyle>[];
+}
+
+const Preview = ({ msg, numberOfLines, testID, theme, style = [] }: IPreview): JSX.Element => {
+	if (!msg) {
+		return <></>;
+	}
+
+	let m = formatText(msg);
+
+	// Ex: '[ ](https://open.rocket.chat/group/test?msg=abcdef)  Test'
+	// Return: 'Test'
+	m = m.replace(/^\[([\s]*)\]\(([^)]*)\)\s/, '').trim();
+	m = shortnameToUnicode(m);
+	// Removes sequential empty spaces
+	m = m.replace(/\s+/g, ' ');
+	m = removeMarkdown(m);
+	m = m.replace(/\n+/g, ' ');
+	return (
+		<Text
+			accessibilityLabel={m}
+			style={[styles.text, { color: themes[theme].bodyText }, ...style]}
+			numberOfLines={numberOfLines}
+			testID={testID}>
+			{m}
+		</Text>
+	);
+};
+
+export default Preview;

app/containers/markdown/formatText.ts

@@ -0,0 +1,6 @@
+// Support <http://link|Text>
+export const formatText = (text: string) =>
+	text.replace(
+		new RegExp('(?:<|<)((?:https|http):\\/\\/[^\\|]+)\\|(.+?)(?=>|>)(?:>|>)', 'gm'),
+		(match, url, title) => `[${title}](${url})`
+	);