diff --git a/app/containers/message/Markdown.js b/app/containers/message/Markdown.js index 805c915f8..3303f29ce 100644 --- a/app/containers/message/Markdown.js +++ b/app/containers/message/Markdown.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Text, StyleSheet } from 'react-native'; +import { Text, StyleSheet, ViewPropTypes } from 'react-native'; import PropTypes from 'prop-types'; import EasyMarkdown from 'react-native-easy-markdown'; // eslint-disable-line import SimpleMarkdown from 'simple-markdown'; @@ -17,13 +17,15 @@ const BlockCode = ({ node, state }) => ( ); const mentionStyle = { color: '#13679a' }; -const Markdown = ({ msg, customEmojis }) => { +const Markdown = ({ + msg, customEmojis, style, markdownStyle, customRules, renderInline +}) => { if (!msg) { return null; } msg = emojify(msg, { output: 'unicode' }); - const rules = { + const defaultRules = { username: { order: -1, match: SimpleMarkdown.inlineRegex(/^@[0-9a-zA-Z-_.]+/), @@ -121,11 +123,13 @@ const Markdown = ({ msg, customEmojis }) => { }; const codeStyle = StyleSheet.flatten(styles.codeStyle); + style = StyleSheet.flatten(style); return ( {msg} ); @@ -133,7 +137,11 @@ const Markdown = ({ msg, customEmojis }) => { Markdown.propTypes = { msg: PropTypes.string.isRequired, - customEmojis: PropTypes.object + customEmojis: PropTypes.object, + style: ViewPropTypes.style, + markdownStyle: PropTypes.object, + customRules: PropTypes.object, + renderInline: PropTypes.bool }; BlockCode.propTypes = { diff --git a/app/presentation/RoomItem.js b/app/presentation/RoomItem.js index 17eb42572..cd590939b 100644 --- a/app/presentation/RoomItem.js +++ b/app/presentation/RoomItem.js @@ -4,9 +4,12 @@ import PropTypes from 'prop-types'; import { View, Text, StyleSheet } from 'react-native'; import { emojify } from 'react-emojione'; import { connect } from 'react-redux'; +import SimpleMarkdown from 'simple-markdown'; import Avatar from '../containers/Avatar'; import Touch from '../utils/touch/index'; //eslint-disable-line +import CustomEmoji from '../containers/EmojiPicker/CustomEmoji'; +import Markdown from '../containers/message/Markdown'; const styles = StyleSheet.create({ container: { @@ -47,10 +50,7 @@ const styles = StyleSheet.create({ lastMessage: { flex: 1, flexShrink: 1, - fontSize: 16, - color: '#444', marginRight: 8 - // margin: 0 }, alert: { fontWeight: 'bold' @@ -72,6 +72,36 @@ const styles = StyleSheet.create({ justifyContent: 'center' } }); +const markdownStyle = { block: { marginBottom: 0, flexWrap: 'wrap', flexDirection: 'row' } }; + +const parseInline = (parse, content, state) => { + const isCurrentlyInline = state.inline || false; + state.inline = true; + const result = parse(content, state); + state.inline = isCurrentlyInline; + return result; +}; +const parseCaptureInline = (capture, parse, state) => ({ content: parseInline(parse, capture[1], state) }); +const customRules = { + strong: { + order: -4, + match: SimpleMarkdown.inlineRegex(/^\*\*([\s\S]+?)\*\*(?!\*)/), + parse: parseCaptureInline, + react: (node, output, state) => ({ + type: 'strong', + key: state.key, + props: { + children: output(node.content, state) + } + }) + }, + text: { + order: -3, + match: SimpleMarkdown.inlineRegex(/^[\s\S]+?(?=[^0-9A-Za-z\s\u00c0-\uffff]|\n\n| {2,}\n|\w+:\S|$)/), + parse: capture => ({ content: capture[0] }), + react: node => node.content + } +} const renderNumber = (unread, userMentions) => { if (!unread || unread <= 0) { @@ -94,7 +124,8 @@ const renderNumber = (unread, userMentions) => { }; @connect(state => ({ - StoreLastMessage: state.settings.Store_Last_Message + StoreLastMessage: state.settings.Store_Last_Message, + customEmojis: state.customEmojis })) export default class RoomItem extends React.PureComponent { static propTypes = { @@ -108,7 +139,8 @@ export default class RoomItem extends React.PureComponent { unread: PropTypes.number, userMentions: PropTypes.number, baseUrl: PropTypes.string, - onPress: PropTypes.func + onPress: PropTypes.func, + customEmojis: PropTypes.object } get icon() { @@ -118,14 +150,18 @@ export default class RoomItem extends React.PureComponent { get lastMessage() { const { - lastMessage + lastMessage, alert } = this.props; if (!this.props.StoreLastMessage) { return ''; } - return lastMessage ? `${ lastMessage.u.username }: ${ emojify(lastMessage.msg, { output: 'unicode' }) }` : 'No Message'; + let msg = lastMessage ? `${ lastMessage.u.username }: ${ emojify(lastMessage.msg, { output: 'unicode' }) }` : 'No Message'; + if (alert) { + msg = `**${ msg }**`; + } + return msg; } formatDate = date => moment(date).calendar(null, { @@ -137,7 +173,7 @@ export default class RoomItem extends React.PureComponent { render() { const { - favorite, alert, unread, userMentions, name, _updatedAt + favorite, unread, userMentions, name, _updatedAt, customEmojis, baseUrl } = this.props; const date = this.formatDate(_updatedAt); @@ -165,7 +201,15 @@ export default class RoomItem extends React.PureComponent { {_updatedAt ? { date } : null} - {this.lastMessage} + {renderNumber(unread, userMentions)} diff --git a/package-lock.json b/package-lock.json index 7db7cef1a..b0fe2cf91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12505,7 +12505,7 @@ } }, "react-native-easy-markdown": { - "version": "git+https://github.com/diegolmello/react-native-easy-markdown.git#ed1afe45f870524f6c23a4ca1df97770f0979c74", + "version": "git+https://github.com/diegolmello/react-native-easy-markdown.git#600a79faf4fdac2c21cfebeb01f96b997674dabe", "requires": { "simple-markdown": "0.1.2" },