Rocket.Chat.ReactNative/app/containers/markdown/index.tsx

import React, { PureComponent } from 'react';
import { Image, Text } from 'react-native';
import { Node, Parser } from 'commonmark';
import Renderer from 'commonmark-react-renderer';
import removeMarkdown from 'remove-markdown';

import shortnameToUnicode from '../../utils/shortnameToUnicode';
import I18n from '../../i18n';
import { themes } from '../../constants/colors';
import MarkdownLink from './Link';
import MarkdownList from './List';
import MarkdownListItem from './ListItem';
import MarkdownAtMention from './AtMention';
import MarkdownHashtag from './Hashtag';
import MarkdownBlockQuote from './BlockQuote';
import MarkdownEmoji from './Emoji';
import MarkdownTable from './Table';
import MarkdownTableRow from './TableRow';
import MarkdownTableCell from './TableCell';
import mergeTextNodes from './mergeTextNodes';
import styles from './styles';
import { isValidURL } from '../../utils/url';

interface IMarkdownProps {
	msg: string;
	getCustomEmoji?: Function;
	baseUrl: string;
	username: string;
	tmid?: string;
	isEdited?: boolean;
	numberOfLines: number;
	customEmojis?: boolean;
	useRealName: boolean;
	channels: {
		name: string;
		_id: number;
	}[];
	mentions?: object[];
	navToRoomInfo: Function;
	preview?: boolean;
	theme: string;
	testID?: string;
	style?: any;
	onLinkPress: Function;
}

type TLiteral = {
	literal: string;
};

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

const emojiRanges = [
	'\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]', // unicode emoji from https://www.regextester.com/106421
	':.{1,40}:', // custom emoji
	' |\n' // allow spaces and line breaks
].join('|');

const removeSpaces = (str: string) => str && str.replace(/\s/g, '');

const removeAllEmoji = (str: string) => str.replace(new RegExp(emojiRanges, 'g'), '');

const isOnlyEmoji = (str: string) => {
	str = removeSpaces(str);
	return !removeAllEmoji(str).length;
};

const removeOneEmoji = (str: string) => str.replace(new RegExp(emojiRanges), '');

const emojiCount = (str: string) => {
	str = removeSpaces(str);
	let oldLength = 0;
	let counter = 0;

	while (oldLength !== str.length) {
		oldLength = str.length;
		str = removeOneEmoji(str);
		if (oldLength !== str.length) {
			counter += 1;
		}
	}

	return counter;
};

const parser = new Parser();

class Markdown extends PureComponent<IMarkdownProps, any> {
	private renderer: any;

	private isMessageContainsOnlyEmoji!: boolean;

	constructor(props: IMarkdownProps) {
		super(props);
		this.renderer = this.createRenderer();
	}

	createRenderer = () =>
		new Renderer({
			renderers: {
				text: this.renderText,

				emph: Renderer.forwardChildren,
				strong: Renderer.forwardChildren,
				del: Renderer.forwardChildren,
				code: this.renderCodeInline,
				link: this.renderLink,
				image: this.renderImage,
				atMention: this.renderAtMention,
				emoji: this.renderEmoji,
				hashtag: this.renderHashtag,

				paragraph: this.renderParagraph,
				heading: this.renderHeading,
				codeBlock: this.renderCodeBlock,
				blockQuote: this.renderBlockQuote,

				list: this.renderList,
				item: this.renderListItem,

				hardBreak: this.renderBreak,
				thematicBreak: this.renderBreak,
				softBreak: this.renderBreak,

				htmlBlock: this.renderText,
				htmlInline: this.renderText,

				table: this.renderTable,
				table_row: this.renderTableRow,
				table_cell: this.renderTableCell,

				editedIndicator: this.renderEditedIndicator
			},
			renderParagraphsInLists: true
		});

	editedMessage = (ast: any) => {
		const { isEdited } = this.props;
		if (isEdited) {
			const editIndicatorNode = new Node('edited_indicator');
			if (ast.lastChild && ['heading', 'paragraph'].includes(ast.lastChild.type)) {
				ast.lastChild.appendChild(editIndicatorNode);
			} else {
				const node = new Node('paragraph');
				node.appendChild(editIndicatorNode);

				ast.appendChild(node);
			}
		}
	};

	renderText = ({ context, literal }: { context: []; literal: string }) => {
		const { numberOfLines, style = [] } = this.props;
		const defaultStyle = [this.isMessageContainsOnlyEmoji ? styles.textBig : {}, ...context.map(type => styles[type])];
		return (
			<Text accessibilityLabel={literal} style={[styles.text, defaultStyle, ...style]} numberOfLines={numberOfLines}>
				{literal}
			</Text>
		);
	};

	renderCodeInline = ({ literal }: TLiteral) => {
		const { theme, style = [] } = this.props;
		return (
			<Text
				style={[
					{
						...styles.codeInline,
						color: themes[theme].bodyText,
						backgroundColor: themes[theme].bannerBackground,
						borderColor: themes[theme].bannerBackground
					},
					...style
				]}>
				{literal}
			</Text>
		);
	};

	renderCodeBlock = ({ literal }: TLiteral) => {
		const { theme, style = [] } = this.props;
		return (
			<Text
				style={[
					{
						...styles.codeBlock,
						color: themes[theme].bodyText,
						backgroundColor: themes[theme].bannerBackground,
						borderColor: themes[theme].bannerBackground
					},
					...style
				]}>
				{literal}
			</Text>
		);
	};

	renderBreak = () => {
		const { tmid } = this.props;
		return <Text>{tmid ? ' ' : '\n'}</Text>;
	};

	renderParagraph = ({ children }: any) => {
		const { numberOfLines, style, theme } = this.props;
		if (!children || children.length === 0) {
			return null;
		}
		return (
			<Text style={[styles.text, style, { color: themes[theme].bodyText }]} numberOfLines={numberOfLines}>
				{children}
			</Text>
		);
	};

	renderLink = ({ children, href }: any) => {
		const { theme, onLinkPress } = this.props;
		return (
			<MarkdownLink link={href} theme={theme} onLinkPress={onLinkPress}>
				{children}
			</MarkdownLink>
		);
	};

	renderHashtag = ({ hashtag }: { hashtag: string }) => {
		const { channels, navToRoomInfo, style, theme } = this.props;
		return <MarkdownHashtag hashtag={hashtag} channels={channels} navToRoomInfo={navToRoomInfo} theme={theme} style={style} />;
	};

	renderAtMention = ({ mentionName }: { mentionName: string }) => {
		const { username, mentions, navToRoomInfo, useRealName, style, theme } = this.props;
		return (
			<MarkdownAtMention
				mentions={mentions}
				mention={mentionName}
				useRealName={useRealName}
				username={username}
				navToRoomInfo={navToRoomInfo}
				theme={theme}
				style={style}
			/>
		);
	};

	renderEmoji = ({ literal }: TLiteral) => {
		const { getCustomEmoji, baseUrl, customEmojis, style, theme } = this.props;
		return (
			<MarkdownEmoji
				literal={literal}
				isMessageContainsOnlyEmoji={this.isMessageContainsOnlyEmoji}
				getCustomEmoji={getCustomEmoji}
				baseUrl={baseUrl}
				customEmojis={customEmojis}
				style={style}
				theme={theme}
			/>
		);
	};

	renderImage = ({ src }: { src: string }) => {
		if (!isValidURL(src)) {
			return null;
		}

		return <Image style={styles.inlineImage} source={{ uri: encodeURI(src) }} />;
	};

	renderEditedIndicator = () => {
		const { theme } = this.props;
		return <Text style={[styles.edited, { color: themes[theme].auxiliaryText }]}> ({I18n.t('edited')})</Text>;
	};

	renderHeading = ({ children, level }: any) => {
		const { numberOfLines, theme } = this.props;
		const textStyle = styles[`heading${level}Text`];
		return (
			<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme].bodyText }]}>
				{children}
			</Text>
		);
	};

	renderList = ({ children, start, tight, type }: any) => {
		const { numberOfLines } = this.props;
		return (
			<MarkdownList ordered={type !== 'bullet'} start={start} tight={tight} numberOfLines={numberOfLines}>
				{children}
			</MarkdownList>
		);
	};

	renderListItem = ({ children, context, ...otherProps }: any) => {
		const { theme } = this.props;
		const level = context.filter((type: string) => type === 'list').length;

		return (
			<MarkdownListItem level={level} theme={theme} {...otherProps}>
				{children}
			</MarkdownListItem>
		);
	};

	renderBlockQuote = ({ children }: { children: JSX.Element }) => {
		const { theme } = this.props;
		return <MarkdownBlockQuote theme={theme}>{children}</MarkdownBlockQuote>;
	};

	renderTable = ({ children, numColumns }: { children: JSX.Element; numColumns: number }) => {
		const { theme } = this.props;
		return (
			<MarkdownTable numColumns={numColumns} theme={theme}>
				{children}
			</MarkdownTable>
		);
	};

	renderTableRow = (args: any) => {
		const { theme } = this.props;
		return <MarkdownTableRow {...args} theme={theme} />;
	};

	renderTableCell = (args: any) => {
		const { theme } = this.props;
		return <MarkdownTableCell {...args} theme={theme} />;
	};

	render() {
		const { msg, numberOfLines, preview = false, theme, style = [], testID } = this.props;

		if (!msg) {
			return null;
		}

		let m = formatText(msg);

		// Ex: '[ ](https://open.rocket.chat/group/test?msg=abcdef)  Test'
		// Return: 'Test'
		m = m.replace(/^\[([\s]*)\]\(([^)]*)\)\s/, '').trim();

		if (preview) {
			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>
			);
		}

		let ast = parser.parse(m);
		ast = mergeTextNodes(ast);
		this.isMessageContainsOnlyEmoji = isOnlyEmoji(m) && emojiCount(m) <= 3;
		this.editedMessage(ast);
		return this.renderer.render(ast);
	}
}

export default Markdown;