diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index d21d2d1d1..872906406 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -200,27 +200,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Message - + ], + ] + } + > + Message - + @@ -428,27 +423,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + ], + ] + } + > + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + @@ -656,27 +646,22 @@ exports[`Storyshots Message list 1`] = ` - - - - ... - + ], + ] + } + > + ... - + @@ -866,27 +851,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Different user - + ], + ] + } + > + Different user - + @@ -958,27 +938,22 @@ exports[`Storyshots Message list 1`] = ` } > - - - - This is the third message - + ], + ] + } + > + This is the third message - + @@ -1050,27 +1025,22 @@ exports[`Storyshots Message list 1`] = ` } > - - - - This is the second message - + ], + ] + } + > + This is the second message - + @@ -1260,27 +1230,22 @@ exports[`Storyshots Message list 1`] = ` - - - - This is the first message - + ], + ] + } + > + This is the first message - + @@ -1370,27 +1335,22 @@ exports[`Storyshots Message list 1`] = ` } > - - - - Message - + ], + ] + } + > + Message - + @@ -1612,27 +1572,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Message - + ], + ] + } + > + Message - + @@ -1836,27 +1791,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Message - + ], + ] + } + > + Message - + @@ -2064,27 +2014,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Message - + ], + ] + } + > + Message - + @@ -2317,27 +2262,22 @@ exports[`Storyshots Message list 1`] = ` } } > - - - - Testing block quote - + ], + ] + } + > + Testing block quote - + @@ -2555,27 +2495,22 @@ exports[`Storyshots Message list 1`] = ` } } > - - - - Testing block quote - + ], + ] + } + > + Testing block quote - + - - - - Testing block quote - + ], + ] + } + > + Testing block quote - + @@ -2854,27 +2784,22 @@ exports[`Storyshots Message list 1`] = ` } } > - - - - Dogs - + ], + ] + } + > + Dogs - + - - - - cats - + ], + ] + } + > + cats - + - - - - cats - + ], + ] + } + > + cats - + @@ -3266,27 +3181,22 @@ exports[`Storyshots Message list 1`] = ` } } > - - - - Dogs - + ], + ] + } + > + Dogs - + - - - - Cats - + ], + ] + } + > + Cats - + @@ -3602,27 +3507,22 @@ exports[`Storyshots Message list 1`] = ` } } > - - - - Dogs - + ], + ] + } + > + Dogs - + @@ -3730,27 +3630,22 @@ exports[`Storyshots Message list 1`] = ` } } > - - - - Cats - + ], + ] + } + > + Cats - + @@ -3962,27 +3857,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Message - + ], + ] + } + > + Message - + @@ -4190,27 +4080,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Message - + ], + ] + } + > + Message - + @@ -4418,19 +4303,13 @@ exports[`Storyshots Message list 1`] = ` - - - - @rocket.cat - - + @rocket.cat + + - - - + + + - @diego.mello - - + @diego.mello + + - - - + + + - @all - - + @all + + - - - + + + - @here - - + @here + + - - - + + + - #general - + }, + ] + } + > + #general - + @@ -4793,19 +4692,20 @@ exports[`Storyshots Message list 1`] = ` - - - - 👊🤙👏 - + ], + ] + } + > + 👊🤙👏 - + @@ -5021,19 +4921,20 @@ exports[`Storyshots Message list 1`] = ` - - - - 👏 - + ], + ] + } + > + 👏 - + @@ -5249,51 +5150,52 @@ exports[`Storyshots Message list 1`] = ` - - - + - - - + + - - - - - - - - - - - + ], + ] + } + > + - + + + + + + + + + + @@ -5597,50 +5508,42 @@ exports[`Storyshots Message list 1`] = ` - - - + - - - - + } + /> + + @@ -5833,19 +5736,20 @@ exports[`Storyshots Message list 1`] = ` - - - - 🤙 - - - - + ], + ] + } + > + 🤙 - + + + + @@ -6093,19 +5997,20 @@ exports[`Storyshots Message list 1`] = ` - - - - 🤙 - - - - - - 🤙🤙 - + ], + ] + } + > + 🤙 - + + + + + 🤙🤙 + + @@ -6377,27 +6291,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Testing - + ], + ] + } + > + Testing - + @@ -6605,27 +6514,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Reactions - + ], + ] + } + > + Reactions - + - - - - Multiple Reactions - + ], + ] + } + > + Multiple Reactions - + - - - - Fourth message - + ], + ] + } + > + Fourth message - + @@ -8320,27 +8214,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Third message - + ], + ] + } + > + Third message - + @@ -8530,27 +8419,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Second message - + ], + ] + } + > + Second message - + @@ -8740,27 +8624,22 @@ exports[`Storyshots Message list 1`] = ` - - - - First message - + ], + ] + } + > + First message - + @@ -8968,27 +8847,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Fourth message - + ], + ] + } + > + Fourth message - + @@ -9243,27 +9117,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Third message - + ], + ] + } + > + Third message - + @@ -9382,27 +9251,22 @@ exports[`Storyshots Message list 1`] = ` } > - - - - Second message - + ], + ] + } + > + Second message - + @@ -9592,27 +9456,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Second message - + ], + ] + } + > + Second message - + @@ -9841,27 +9700,22 @@ exports[`Storyshots Message list 1`] = ` - - - - First message - + ], + ] + } + > + First message - + @@ -10124,26 +9978,19 @@ exports[`Storyshots Message list 1`] = ` } /> - - - + - This is a description - + ], + ] + } + > + This is a description - + @@ -10389,26 +10236,19 @@ exports[`Storyshots Message list 1`] = ` } /> - - - + - This is a description - - - - + ], + ] + } + > + This is a description - + + + + @@ -10696,26 +10536,19 @@ exports[`Storyshots Message list 1`] = `  - - - + - This is a description - - - - + ], + ] + } + > + This is a description - + + + + @@ -11370,26 +11203,19 @@ exports[`Storyshots Message list 1`] = ` 00:00 - - - + - This is a description - - - - + ], + ] + } + > + This is a description - + + + + @@ -11492,27 +11318,22 @@ exports[`Storyshots Message list 1`] = ` } > - - - - First message - + ], + ] + } + > + First message - + @@ -11780,26 +11601,19 @@ exports[`Storyshots Message list 1`] = ` 00:00 - - - + - This is a description - + ], + ] + } + > + This is a description - + @@ -12508,27 +12322,22 @@ exports[`Storyshots Message list 1`] = ` - - - - I - - - 'm fine - - - ! - + ], + ] + } + > + I - + + 'm fine + + + ! + + - - - + - How are you? - + ], + ] + } + > + How are you? - + @@ -12877,27 +12685,22 @@ exports[`Storyshots Message list 1`] = ` - - - - I - - - 'm fine - - - ! - + ], + ] + } + > + I - + + 'm fine + + + ! + + - - - + - How are you? - - - - + ], + ] + } + > + How are you? - + + + + @@ -13296,27 +13098,22 @@ exports[`Storyshots Message list 1`] = ` - - - - I - - - 'm fine - - - ! - + ], + ] + } + > + I - + + 'm fine + + + ! + + @@ -13436,27 +13239,22 @@ exports[`Storyshots Message list 1`] = ` } > - - - - I - - - 'm fine - - - ! - + ], + ] + } + > + I - + + 'm fine + + + ! + + @@ -13694,27 +13498,22 @@ exports[`Storyshots Message list 1`] = ` - - - - I - - - 'm fine - - - ! - + ], + ] + } + > + I - + + 'm fine + + + ! + + - - - - I - - - 'm fine - - - ! - + ], + ] + } + > + I - + + 'm fine + + + ! + + - - - - How are you? - + ], + ] + } + > + How are you? - + - - - - How are you? - + ], + ] + } + > + How are you? - + - - - - I - - - 'm fine - - - ! - + + I - + + 'm fine + + + ! + + @@ -15054,90 +14821,61 @@ exports[`Storyshots Message list 1`] = ` } > - - - - I - - - 'm fine - - - ! - + + I - + + 'm fine + + + ! + + @@ -15342,90 +15080,61 @@ exports[`Storyshots Message list 1`] = ` } > - - - - I - - - 'm fine - - - ! - + + I - + + 'm fine + + + ! + + @@ -15630,90 +15339,61 @@ exports[`Storyshots Message list 1`] = ` } > - - - - I - - - 'm fine - - - ! - + + I - + + 'm fine + + + ! + + @@ -15918,42 +15598,27 @@ exports[`Storyshots Message list 1`] = ` } > - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + @@ -16158,42 +15823,27 @@ exports[`Storyshots Message list 1`] = ` } > - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + @@ -16603,27 +16253,22 @@ exports[`Storyshots Message list 1`] = ` - - - - How are you? - + ], + ] + } + > + How are you? - + - - - - I - - - 'm fine - - - ! - + + I - + + 'm fine + + + ! + + @@ -17062,42 +16678,27 @@ exports[`Storyshots Message list 1`] = ` } > - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + @@ -17462,90 +17063,61 @@ exports[`Storyshots Message list 1`] = ` } > - - - - I - - - 'm fine - - - ! - + + I - + + 'm fine + + + ! + + @@ -17675,66 +17247,44 @@ exports[`Storyshots Message list 1`] = ` } > - - - - Cool - - - ! - + + Cool - + + ! + + @@ -17864,42 +17414,27 @@ exports[`Storyshots Message list 1`] = ` } > - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + @@ -19762,27 +19297,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Message - - - - + ], + ] + } + > + Message - + + + + - - - - Message - + ], + ] + } + > + Message - + - - - + - Custom fields - + ], + ] + } + > + Custom fields - + - - - - Message - + ], + ] + } + > + Message - + - - - + - Custom fields - + ], + ] + } + > + Custom fields - + - - - + - Custom fields 2 - + ], + ] + } + > + Custom fields 2 - + - - - - Broadcasted message - + ], + ] + } + > + Broadcasted message - + - - - - This message is inside an archived room - + ], + ] + } + > + This message is inside an archived room - + @@ -21952,27 +21441,22 @@ exports[`Storyshots Message list 1`] = ` - - - - This message has error - + ], + ] + } + > + This message has error - + @@ -22124,27 +21608,22 @@ exports[`Storyshots Message list 1`] = ` - - - - This message has error too - + ], + ] + } + > + This message has error too - + @@ -22357,27 +21836,22 @@ exports[`Storyshots Message list 1`] = ` } } > - - - - Temp message - + ], + ] + } + > + Temp message - + @@ -22585,27 +22059,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Message being edited - + ], + ] + } + > + Message being edited - + @@ -25203,27 +24672,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Message - + ], + ] + } + > + Message - + @@ -25431,27 +24895,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Italic with single - - - underscore - - - or double - - - underscores - - - . Bold with single - - - asterisk - - - or double - - - asterisks - - - . Strikethrough with single - - - Strikethrough - - - or double - - - Strikethrough - + ], + ] + } + > + Italic with single - + + underscore + + + or double + + + underscores + + + . Bold with single + + + asterisk + + + or double + + + asterisks + + + . Strikethrough with single + + + Strikethrough + + + or double + + + Strikethrough + + @@ -25944,7 +25436,9 @@ exports[`Storyshots Message list 1`] = ` - + H1 - + H2 - + H3 - + H4 - + H5 - + @@ -26280,16 +25802,48 @@ exports[`Storyshots Message list 1`] = ` - - + + Support + + - Support - - - - Google - - - - - - - - I - - - \` - - - m an inline-style link - - - - - - - - https://google.com - + Google - + + + + + + I + + + \` + + + m an inline-style link + + + + + + + + https://google.com + + + @@ -26750,32 +26288,24 @@ exports[`Storyshots Message list 1`] = ` - - - - - + } + /> + @@ -26968,64 +26498,22 @@ exports[`Storyshots Message list 1`] = ` - - - - Inline - - - code - - - has - - - back-ticks around - - - it. - + ], + ] + } + > + Inline - + + code + + + has + + + back-ticks around + + + it. + + - - - - Quote - + ], + ] + } + > + Quote - + @@ -27638,13 +27164,16 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "borderColor": "#e1e5e8", - "borderLeftWidth": 1, - "borderTopWidth": 1, - }, - undefined, - undefined, + Array [ + Object {}, + Object { + "borderColor": "#e1e5e8", + "borderLeftWidth": 1, + "borderTopWidth": 1, + }, + undefined, + undefined, + ], ] } > @@ -27681,13 +27210,16 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "borderColor": "#e1e5e8", - "borderLeftWidth": 1, - "borderTopWidth": 1, - }, - undefined, - undefined, + Array [ + Object {}, + Object { + "borderColor": "#e1e5e8", + "borderLeftWidth": 1, + "borderTopWidth": 1, + }, + undefined, + undefined, + ], ] } > @@ -27741,13 +27273,16 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "borderColor": "#e1e5e8", - "borderLeftWidth": 1, - "borderTopWidth": 1, - }, - undefined, - undefined, + Array [ + Object {}, + Object { + "borderColor": "#e1e5e8", + "borderLeftWidth": 1, + "borderTopWidth": 1, + }, + undefined, + undefined, + ], ] } > @@ -27784,13 +27319,16 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "borderColor": "#e1e5e8", - "borderLeftWidth": 1, - "borderTopWidth": 1, - }, - undefined, - undefined, + Array [ + Object {}, + Object { + "borderColor": "#e1e5e8", + "borderLeftWidth": 1, + "borderTopWidth": 1, + }, + undefined, + undefined, + ], ] } > @@ -27840,13 +27378,16 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "borderColor": "#e1e5e8", - "borderLeftWidth": 1, - "borderTopWidth": 1, - }, - undefined, - undefined, + Array [ + Object {}, + Object { + "borderColor": "#e1e5e8", + "borderLeftWidth": 1, + "borderTopWidth": 1, + }, + undefined, + undefined, + ], ] } > @@ -27883,13 +27424,16 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "borderColor": "#e1e5e8", - "borderLeftWidth": 1, - "borderTopWidth": 1, - }, - undefined, - undefined, + Array [ + Object {}, + Object { + "borderColor": "#e1e5e8", + "borderLeftWidth": 1, + "borderTopWidth": 1, + }, + undefined, + undefined, + ], ] } > diff --git a/app/containers/MessageBox/ReplyPreview.js b/app/containers/MessageBox/ReplyPreview.js index 193d48331..06fc074ba 100644 --- a/app/containers/MessageBox/ReplyPreview.js +++ b/app/containers/MessageBox/ReplyPreview.js @@ -79,7 +79,7 @@ class ReplyPreview extends Component { {message.u.username} {time} - + diff --git a/app/containers/markdown/AtMention.js b/app/containers/markdown/AtMention.js index 375d5d6fe..5b5f0480f 100644 --- a/app/containers/markdown/AtMention.js +++ b/app/containers/markdown/AtMention.js @@ -5,7 +5,7 @@ import { Text } from 'react-native'; import styles from './styles'; const AtMention = React.memo(({ - mention, mentions, username, navToRoomInfo + mention, mentions, username, navToRoomInfo, style = [] }) => { let mentionStyle = styles.mention; if (mention === 'all' || mention === 'here') { @@ -33,7 +33,7 @@ const AtMention = React.memo(({ return ( {`@${ mention }`} @@ -45,6 +45,7 @@ AtMention.propTypes = { mention: PropTypes.string, username: PropTypes.string, navToRoomInfo: PropTypes.func, + style: PropTypes.array, mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) }; diff --git a/app/containers/markdown/Emoji.js b/app/containers/markdown/Emoji.js index 49aed9cf4..b676c6994 100644 --- a/app/containers/markdown/Emoji.js +++ b/app/containers/markdown/Emoji.js @@ -8,11 +8,11 @@ import CustomEmoji from '../EmojiPicker/CustomEmoji'; import styles from './styles'; const Emoji = React.memo(({ - emojiName, literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl + emojiName, literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl, customEmojis, style = [] }) => { const emojiUnicode = shortnameToUnicode(literal); const emoji = getCustomEmoji && getCustomEmoji(emojiName); - if (emoji) { + if (emoji && customEmojis) { return ( ); } - return {emojiUnicode}; + return ( + + {emojiUnicode} + + ); }); Emoji.propTypes = { @@ -29,7 +38,9 @@ Emoji.propTypes = { literal: PropTypes.string, isMessageContainsOnlyEmoji: PropTypes.bool, getCustomEmoji: PropTypes.func, - baseUrl: PropTypes.string + baseUrl: PropTypes.string, + customEmojis: PropTypes.bool, + style: PropTypes.array }; export default Emoji; diff --git a/app/containers/markdown/Hashtag.js b/app/containers/markdown/Hashtag.js index 47e50cb3b..25bd9258c 100644 --- a/app/containers/markdown/Hashtag.js +++ b/app/containers/markdown/Hashtag.js @@ -5,7 +5,7 @@ import { Text } from 'react-native'; import styles from './styles'; const Hashtag = React.memo(({ - hashtag, channels, navToRoomInfo + hashtag, channels, navToRoomInfo, style = [] }) => { const handlePress = () => { const index = channels.findIndex(channel => channel.name === hashtag); @@ -19,7 +19,7 @@ const Hashtag = React.memo(({ if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) { return ( {`#${ hashtag }`} @@ -32,6 +32,7 @@ const Hashtag = React.memo(({ Hashtag.propTypes = { hashtag: PropTypes.string, navToRoomInfo: PropTypes.func, + style: PropTypes.array, channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) }; diff --git a/app/containers/markdown/List.js b/app/containers/markdown/List.js index 951b1f306..f934a878e 100644 --- a/app/containers/markdown/List.js +++ b/app/containers/markdown/List.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; const List = React.memo(({ - children, ordered, start, tight + children, ordered, start, tight, numberOfLines = 0 }) => { let bulletWidth = 15; @@ -11,7 +11,13 @@ const List = React.memo(({ bulletWidth = (9 * lastNumber.toString().length) + 7; } - const _children = React.Children.map(children, (child, index) => React.cloneElement(child, { + let items = React.Children.toArray(children); + + if (numberOfLines) { + items = items.slice(0, numberOfLines); + } + + const _children = items.map((child, index) => React.cloneElement(child, { bulletWidth, ordered, tight, @@ -29,7 +35,8 @@ List.propTypes = { children: PropTypes.node, ordered: PropTypes.bool, start: PropTypes.number, - tight: PropTypes.bool + tight: PropTypes.bool, + numberOfLines: PropTypes.number }; List.defaultProps = { diff --git a/app/containers/markdown/index.js b/app/containers/markdown/index.js index 1ccd8692b..6b1b60640 100644 --- a/app/containers/markdown/index.js +++ b/app/containers/markdown/index.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { View, Text, Image } from 'react-native'; +import { Text, Image } from 'react-native'; import { Parser, Node } from 'commonmark'; import Renderer from 'commonmark-react-renderer'; import PropTypes from 'prop-types'; @@ -53,8 +53,6 @@ const emojiCount = (str) => { return counter; }; -const encodeEmojis = str => toShort(shortnameToUnicode(str)); - export default class Markdown extends PureComponent { static propTypes = { msg: PropTypes.string, @@ -65,21 +63,24 @@ export default class Markdown extends PureComponent { isEdited: PropTypes.bool, numberOfLines: PropTypes.number, useMarkdown: PropTypes.bool, + customEmojis: PropTypes.bool, channels: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), mentions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), - navToRoomInfo: PropTypes.func + navToRoomInfo: PropTypes.func, + preview: PropTypes.bool, + style: PropTypes.array }; constructor(props) { super(props); this.parser = this.createParser(); - this.renderer = this.createRenderer(); + this.renderer = this.createRenderer(props.preview); } createParser = () => new Parser(); - createRenderer = () => new Renderer({ + createRenderer = (preview = false) => new Renderer({ renderers: { text: this.renderText, @@ -112,7 +113,7 @@ export default class Markdown extends PureComponent { table_row: this.renderTableRow, table_cell: this.renderTableCell, - editedIndicator: this.renderEditedIndicator + editedIndicator: preview ? () => null : this.renderEditedIndicator }, renderParagraphsInLists: true }); @@ -133,12 +134,17 @@ export default class Markdown extends PureComponent { }; renderText = ({ context, literal }) => { - const { numberOfLines } = this.props; + const { numberOfLines, preview, style = [] } = this.props; + const defaultStyle = [ + this.isMessageContainsOnlyEmoji && !preview ? styles.textBig : {}, + ...context.map(type => styles[type]) + ]; return ( styles[type]) + styles.text, + !preview ? defaultStyle : {}, + ...style ]} numberOfLines={numberOfLines} > @@ -147,9 +153,15 @@ export default class Markdown extends PureComponent { ); } - renderCodeInline = ({ literal }) => {literal}; + renderCodeInline = ({ literal }) => { + const { preview } = this.props; + return {literal}; + }; - renderCodeBlock = ({ literal }) => {literal}; + renderCodeBlock = ({ literal }) => { + const { preview } = this.props; + return {literal}; + }; renderBreak = () => { const { tmid } = this.props; @@ -157,15 +169,14 @@ export default class Markdown extends PureComponent { } renderParagraph = ({ children }) => { + const { numberOfLines, style } = this.props; if (!children || children.length === 0) { return null; } return ( - - - {children} - - + + {children} + ); }; @@ -176,37 +187,45 @@ export default class Markdown extends PureComponent { ); renderHashtag = ({ hashtag }) => { - const { channels, navToRoomInfo } = this.props; + const { channels, navToRoomInfo, style } = this.props; return ( ); } renderAtMention = ({ mentionName }) => { - const { username, mentions, navToRoomInfo } = this.props; + const { + username, mentions, navToRoomInfo, style + } = this.props; return ( ); } renderEmoji = ({ emojiName, literal }) => { - const { getCustomEmoji, baseUrl } = this.props; + const { + getCustomEmoji, baseUrl, customEmojis = true, preview, style + } = this.props; return ( ); } @@ -216,9 +235,10 @@ export default class Markdown extends PureComponent { renderEditedIndicator = () => ({I18n.t('edited')}); renderHeading = ({ children, level }) => { + const { numberOfLines } = this.props; const textStyle = styles[`heading${ level }Text`]; return ( - + {children} ); @@ -226,15 +246,19 @@ export default class Markdown extends PureComponent { renderList = ({ children, start, tight, type - }) => ( - - {children} - - ); + }) => { + const { numberOfLines } = this.props; + return ( + + {children} + + ); + }; renderListItem = ({ children, context, ...otherProps @@ -269,7 +293,7 @@ export default class Markdown extends PureComponent { render() { const { - msg, useMarkdown = true, numberOfLines + msg, useMarkdown = true, numberOfLines, preview = false } = this.props; if (!msg) { @@ -281,13 +305,18 @@ export default class Markdown extends PureComponent { // Ex: '[ ](https://open.rocket.chat/group/test?msg=abcdef) Test' // Return: 'Test' m = m.replace(/^\[([\s]]*)\]\(([^)]*)\)\s/, '').trim(); + m = shortnameToUnicode(m); - if (!useMarkdown) { + if (preview) { + m = m.split('\n').reduce((lines, line) => `${ lines } ${ line }`, ''); + } + + if (!useMarkdown && !preview) { return {m}; } const ast = this.parser.parse(m); - const encodedEmojis = encodeEmojis(m); + const encodedEmojis = toShort(m); this.isMessageContainsOnlyEmoji = isOnlyEmoji(encodedEmojis) && emojiCount(encodedEmojis) <= 3; this.editedMessage(ast); diff --git a/app/containers/markdown/styles.js b/app/containers/markdown/styles.js index b2642fdc6..b6cafa12a 100644 --- a/app/containers/markdown/styles.js +++ b/app/containers/markdown/styles.js @@ -21,7 +21,8 @@ export default StyleSheet.create({ block: { alignItems: 'flex-start', flexDirection: 'row', - flexWrap: 'wrap' + flexWrap: 'wrap', + flex: 1 }, emph: { fontStyle: 'italic' diff --git a/app/containers/message/Content.js b/app/containers/message/Content.js index 7272c11c6..57e1baa98 100644 --- a/app/containers/message/Content.js +++ b/app/containers/message/Content.js @@ -25,6 +25,7 @@ const Content = React.memo((props) => { username={props.user.username} isEdited={props.isEdited} numberOfLines={(props.tmid && !props.isThreadRoom) ? 1 : 0} + preview={props.tmid && !props.isThreadRoom} channels={props.channels} mentions={props.mentions} useMarkdown={props.useMarkdown && (!props.tmid || props.isThreadRoom)} diff --git a/app/presentation/RoomItem/LastMessage.js b/app/presentation/RoomItem/LastMessage.js index 98598994b..bafd0acc8 100644 --- a/app/presentation/RoomItem/LastMessage.js +++ b/app/presentation/RoomItem/LastMessage.js @@ -1,11 +1,11 @@ import React from 'react'; -import { Text } from 'react-native'; import { shortnameToUnicode } from 'emoji-toolkit'; import PropTypes from 'prop-types'; import _ from 'lodash'; import I18n from '../../i18n'; import styles from './styles'; +import Markdown from '../../containers/markdown'; const formatMsg = ({ lastMessage, type, showLastMessage, username @@ -47,11 +47,15 @@ const arePropsEqual = (oldProps, newProps) => _.isEqual(oldProps, newProps); const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username, alert }) => ( - - {formatMsg({ + + style={[styles.markdownText, alert && styles.markdownTextAlert]} + customEmojis={false} + numberOfLines={2} + preview + /> ), arePropsEqual); LastMessage.propTypes = {