import React from 'react'; import { Text, Platform } from 'react-native'; import PropTypes from 'prop-types'; import { emojify } from 'react-emojione'; import { connect } from 'react-redux'; 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 })` ); @connect(state => ({ customEmojis: state.customEmojis })) export default class Markdown extends React.Component { shouldComponentUpdate(nextProps) { return nextProps.msg !== this.props.msg; } render() { const { msg, customEmojis, style, rules } = this.props; if (!msg) { return null; } let m = formatText(msg); m = emojify(m, { output: 'unicode' }); return ( ( {children} ) }, mention: node => ( alert(`Username @${ node.content }`)} style={styles.mention}> @{node.content} ), hashtag: node => ( alert(`Room #${ node.content }`)} style={styles.mention}> #{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; }, blocklink: () => {}, ...rules }} style={{ paragraph: styles.paragraph, codeInline: { borderWidth: 1, borderColor: '#CCCCCC', backgroundColor: '#f5f5f5', padding: 2, borderRadius: 4 }, ...style }} plugins={[ new PluginContainer(MarkdownFlowdock), new PluginContainer(MarkdownEmojiPlugin) ]} >{m} ); } } Markdown.propTypes = { msg: PropTypes.string, customEmojis: PropTypes.object, style: PropTypes.any, rules: PropTypes.object };