import React from 'react'; import { Text, Image } from 'react-native'; import PropTypes from 'prop-types'; import { emojify } from 'react-emojione'; import MarkdownRenderer, { PluginContainer } from 'react-native-markdown-renderer'; import MarkdownFlowdock from 'markdown-it-flowdock'; import styles from './styles'; import CustomEmoji from '../EmojiPicker/CustomEmoji'; import MarkdownEmojiPlugin from './MarkdownEmojiPlugin'; // Support const formatText = text => text.replace( new RegExp('(?:<|<)((?:https|http):\\/\\/[^\\|]+)\\|(.+?)(?=>|>)(?:>|>)', 'gm'), (match, url, title) => `[${ title }](${ url })` ); export default class Markdown extends React.Component { shouldComponentUpdate(nextProps) { return nextProps.msg !== this.props.msg; } render() { const { msg, customEmojis, style, rules, baseUrl, username, edited } = this.props; if (!msg) { return null; } let m = formatText(msg); m = emojify(m, { output: 'unicode' }); m = m.replace(/^\[([^\]]*)\]\(([^)]*)\)/, '').trim(); return ( ( {children}{edited ? (edited) : null} ), mention: (node) => { const { content, key } = node; let mentionStyle = styles.mention; if (content === 'all' || content === 'here') { mentionStyle = { ...mentionStyle, ...styles.mentionAll }; } else if (content === username) { mentionStyle = { ...mentionStyle, ...styles.mentionLoggedUser }; } return (  {content}  ); }, hashtag: node => (  #{node.content}  ), emoji: (node) => { if (node.children && node.children.length && node.children[0].content) { const { content } = node.children[0]; const emojiExtension = customEmojis[content]; if (emojiExtension) { const emoji = { extension: emojiExtension, content }; return ; } return :{content}:; } return null; }, hardbreak: () => null, blocklink: () => null, image: node => ( ), ...rules }} style={{ paragraph: styles.paragraph, text: { color: '#0C0D0F', fontSize: 16, letterSpacing: 0.1 }, codeInline: { borderWidth: 1, borderColor: '#CCCCCC', backgroundColor: '#f5f5f5', padding: 2, borderRadius: 4 }, link: { color: '#1D74F5' }, ...style }} plugins={[ new PluginContainer(MarkdownFlowdock), new PluginContainer(MarkdownEmojiPlugin) ]} >{m} ); } } Markdown.propTypes = { msg: PropTypes.string, username: PropTypes.string.isRequired, baseUrl: PropTypes.string.isRequired, customEmojis: PropTypes.object.isRequired, style: PropTypes.any, rules: PropTypes.object, edited: PropTypes.bool };