From 76ec550a7c870e0b154920e67b18c65fc4e0aab6 Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Tue, 17 Sep 2019 11:02:31 -0300 Subject: [PATCH 01/10] Fix emojis on thread preview --- .../__snapshots__/Storyshots.test.js.snap | 312 +++++++++++++----- app/containers/markdown/index.js | 63 ++-- app/containers/message/Content.js | 1 + 3 files changed, 268 insertions(+), 108 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 34962552ecd..c9e8cebde1e 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -209,7 +209,9 @@ exports[`Storyshots Message list 1`] = ` } } > - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + { return counter; }; -const encodeEmojis = str => toShort(shortnameToUnicode(str)); - export default class Markdown extends PureComponent { static propTypes = { msg: PropTypes.string, @@ -67,52 +65,54 @@ export default class Markdown extends PureComponent { useMarkdown: 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, emph: Renderer.forwardChildren, strong: Renderer.forwardChildren, del: Renderer.forwardChildren, - code: this.renderCodeInline, - link: this.renderLink, - image: this.renderImage, - atMention: this.renderAtMention, + code: preview ? this.renderText : this.renderCodeInline, + link: preview ? this.renderText : this.renderLink, + image: preview ? this.renderText : this.renderImage, + atMention: preview ? this.renderText : this.renderAtMention, emoji: this.renderEmoji, - hashtag: this.renderHashtag, + hashtag: preview ? this.renderText : this.renderHashtag, paragraph: this.renderParagraph, - heading: this.renderHeading, - codeBlock: this.renderCodeBlock, - blockQuote: this.renderBlockQuote, + heading: preview ? this.renderText : this.renderHeading, + codeBlock: preview ? this.renderText : this.renderCodeBlock, + blockQuote: preview ? this.renderText : this.renderBlockQuote, - list: this.renderList, - item: this.renderListItem, + list: preview ? this.renderText : this.renderList, + item: preview ? this.renderText : this.renderListItem, hardBreak: this.renderBreak, thematicBreak: this.renderBreak, softBreak: this.renderBreak, - htmlBlock: this.renderText, - htmlInline: this.renderText, + htmlBlock: preview ? this.renderText : this.renderText, + htmlInline: preview ? this.renderText : this.renderText, - table: this.renderTable, - table_row: this.renderTableRow, - table_cell: this.renderTableCell, + table: preview ? this.renderText : this.renderTable, + table_row: preview ? this.renderText : this.renderTableRow, + table_cell: preview ? this.renderText : this.renderTableCell, - editedIndicator: this.renderEditedIndicator + editedIndicator: preview ? this.renderText : this.renderEditedIndicator }, renderParagraphsInLists: true }); @@ -133,12 +133,13 @@ export default class Markdown extends PureComponent { }; renderText = ({ context, literal }) => { - const { numberOfLines } = this.props; + const { numberOfLines, preview, style = [] } = this.props; return ( styles[type]) + this.isMessageContainsOnlyEmoji && !preview ? styles.textBig : styles.text, + ...context.map(type => styles[type]), + ...style ]} numberOfLines={numberOfLines} > @@ -157,12 +158,13 @@ export default class Markdown extends PureComponent { } renderParagraph = ({ children }) => { + const { numberOfLines } = this.props; if (!children || children.length === 0) { return null; } return ( - + {children} @@ -199,12 +201,12 @@ export default class Markdown extends PureComponent { } renderEmoji = ({ emojiName, literal }) => { - const { getCustomEmoji, baseUrl } = this.props; + const { getCustomEmoji, baseUrl, preview } = this.props; return ( @@ -269,7 +271,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 +283,14 @@ 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 (!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/message/Content.js b/app/containers/message/Content.js index 7272c11c6d7..57e1baa9897 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)} From de70fe69b2c525ec55e7887461605b71852ec12c Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Tue, 17 Sep 2019 14:46:51 -0300 Subject: [PATCH 02/10] Stash --- app/containers/markdown/styles.js | 3 ++- app/presentation/RoomItem/LastMessage.js | 23 ++++++++++++++++++----- app/presentation/RoomItem/index.js | 10 +++++++--- 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/app/containers/markdown/styles.js b/app/containers/markdown/styles.js index b2642fdc6a6..b6cafa12a8a 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/presentation/RoomItem/LastMessage.js b/app/presentation/RoomItem/LastMessage.js index 9ab34a6a00d..a510b38f785 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 @@ -41,13 +41,24 @@ const formatMsg = ({ const arePropsEqual = (oldProps, newProps) => _.isEqual(oldProps, newProps); const LastMessage = React.memo(({ - lastMessage, type, showLastMessage, username, alert + lastMessage, type, showLastMessage, username, alert, baseUrl, customEmojis }) => ( - - {formatMsg({ + + baseUrl={baseUrl} + getCustomEmoji={(name) => { + const emoji = customEmojis[name]; + if (emoji) { + return emoji; + } + return null; + }} + style={[styles.markdownText, alert && styles.markdownTextAlert]} + numberOfLines={2} + preview + /> ), arePropsEqual); LastMessage.propTypes = { @@ -55,6 +66,8 @@ LastMessage.propTypes = { type: PropTypes.string, showLastMessage: PropTypes.bool, username: PropTypes.string, + baseUrl: PropTypes.string, + customEmojis: PropTypes.object, alert: PropTypes.bool }; diff --git a/app/presentation/RoomItem/index.js b/app/presentation/RoomItem/index.js index 938517dc227..82fe5e760a7 100644 --- a/app/presentation/RoomItem/index.js +++ b/app/presentation/RoomItem/index.js @@ -63,7 +63,8 @@ class RoomItem extends React.Component { status: PropTypes.string, toggleFav: PropTypes.func, toggleRead: PropTypes.func, - hideChannel: PropTypes.func + hideChannel: PropTypes.func, + customEmojis: PropTypes.object }; static defaultProps = { @@ -217,7 +218,7 @@ class RoomItem extends React.Component { render() { const { - unread, userMentions, name, _updatedAt, alert, testID, type, avatarSize, baseUrl, userId, username, token, id, prid, showLastMessage, lastMessage, isRead, width, favorite, status + unread, userMentions, name, _updatedAt, alert, testID, type, avatarSize, baseUrl, userId, username, token, id, prid, showLastMessage, lastMessage, isRead, width, favorite, status, customEmojis } = this.props; const date = formatDate(_updatedAt); @@ -320,6 +321,8 @@ class RoomItem extends React.Component { showLastMessage={showLastMessage} username={username} alert={alert} + customEmojis={customEmojis} + baseUrl={baseUrl} /> ({ - status: state.meteor.connected && ownProps.type === 'd' ? state.activeUsers[ownProps.id] : 'offline' + status: state.meteor.connected && ownProps.type === 'd' ? state.activeUsers[ownProps.id] : 'offline', + customEmojis: state.customEmojis }); export default connect(mapStateToProps)(RoomItem); From ca08ea097074c13ad90e59efbfb6960f36027167 Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Fri, 27 Sep 2019 17:33:04 -0300 Subject: [PATCH 03/10] Merge Develop --- .../__snapshots__/Storyshots.test.js.snap | 400 ++++++++++++++---- app/containers/markdown/index.js | 59 +-- app/containers/markdown/styles.js | 3 +- app/containers/message/Content.js | 1 + app/presentation/RoomItem/LastMessage.js | 23 +- app/presentation/RoomItem/index.js | 8 +- 6 files changed, 380 insertions(+), 114 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index d21d2d1d17a..e32a23c61c1 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -204,12 +204,15 @@ exports[`Storyshots Message list 1`] = ` style={ Object { "alignItems": "flex-start", + "flex": 1, "flexDirection": "row", "flexWrap": "wrap", } } > - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + { return counter; }; -const encodeEmojis = str => toShort(shortnameToUnicode(str)); - export default class Markdown extends PureComponent { static propTypes = { msg: PropTypes.string, @@ -67,39 +65,41 @@ export default class Markdown extends PureComponent { useMarkdown: 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, emph: Renderer.forwardChildren, strong: Renderer.forwardChildren, del: Renderer.forwardChildren, - code: this.renderCodeInline, - link: this.renderLink, - image: this.renderImage, - atMention: this.renderAtMention, + code: preview ? this.renderText : this.renderCodeInline, + link: preview ? this.renderText : this.renderLink, + image: preview ? this.renderText : this.renderImage, + atMention: preview ? this.renderText : this.renderAtMention, emoji: this.renderEmoji, - hashtag: this.renderHashtag, + hashtag: preview ? this.renderText : this.renderHashtag, paragraph: this.renderParagraph, - heading: this.renderHeading, - codeBlock: this.renderCodeBlock, - blockQuote: this.renderBlockQuote, + heading: preview ? this.renderText : this.renderHeading, + codeBlock: preview ? this.renderText : this.renderCodeBlock, + blockQuote: preview ? this.renderText : this.renderBlockQuote, - list: this.renderList, - item: this.renderListItem, + list: preview ? this.renderText : this.renderList, + item: preview ? this.renderText : this.renderListItem, hardBreak: this.renderBreak, thematicBreak: this.renderBreak, @@ -108,11 +108,11 @@ export default class Markdown extends PureComponent { htmlBlock: this.renderText, htmlInline: this.renderText, - table: this.renderTable, - table_row: this.renderTableRow, - table_cell: this.renderTableCell, + table: preview ? this.renderText : this.renderTable, + table_row: preview ? this.renderText : this.renderTableRow, + table_cell: preview ? this.renderText : this.renderTableCell, - editedIndicator: this.renderEditedIndicator + editedIndicator: preview ? this.renderText : this.renderEditedIndicator }, renderParagraphsInLists: true }); @@ -133,12 +133,13 @@ export default class Markdown extends PureComponent { }; renderText = ({ context, literal }) => { - const { numberOfLines } = this.props; + const { numberOfLines, preview, style = [] } = this.props; return ( styles[type]) + this.isMessageContainsOnlyEmoji && !preview ? styles.textBig : styles.text, + ...context.map(type => styles[type]), + ...style ]} numberOfLines={numberOfLines} > @@ -157,12 +158,13 @@ export default class Markdown extends PureComponent { } renderParagraph = ({ children }) => { + const { numberOfLines } = this.props; if (!children || children.length === 0) { return null; } return ( - + {children} @@ -199,12 +201,12 @@ export default class Markdown extends PureComponent { } renderEmoji = ({ emojiName, literal }) => { - const { getCustomEmoji, baseUrl } = this.props; + const { getCustomEmoji, baseUrl, preview } = this.props; return ( @@ -269,7 +271,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 +283,14 @@ 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 (!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 b2642fdc6a6..b6cafa12a8a 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 7272c11c6d7..57e1baa9897 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 98598994b02..90c702eed15 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 @@ -45,13 +45,24 @@ const formatMsg = ({ const arePropsEqual = (oldProps, newProps) => _.isEqual(oldProps, newProps); const LastMessage = React.memo(({ - lastMessage, type, showLastMessage, username, alert + lastMessage, type, showLastMessage, username, alert, baseUrl, customEmojis }) => ( - - {formatMsg({ + + baseUrl={baseUrl} + getCustomEmoji={(name) => { + const emoji = customEmojis[name]; + if (emoji) { + return emoji; + } + return null; + }} + style={[styles.markdownText, alert && styles.markdownTextAlert]} + numberOfLines={2} + preview + /> ), arePropsEqual); LastMessage.propTypes = { @@ -59,6 +70,8 @@ LastMessage.propTypes = { type: PropTypes.string, showLastMessage: PropTypes.bool, username: PropTypes.string, + baseUrl: PropTypes.string, + customEmojis: PropTypes.object, alert: PropTypes.bool }; diff --git a/app/presentation/RoomItem/index.js b/app/presentation/RoomItem/index.js index f0e05a3b1ca..26a3072e09c 100644 --- a/app/presentation/RoomItem/index.js +++ b/app/presentation/RoomItem/index.js @@ -64,6 +64,7 @@ class RoomItem extends React.Component { toggleFav: PropTypes.func, toggleRead: PropTypes.func, hideChannel: PropTypes.func, + customEmojis: PropTypes.object, avatar: PropTypes.bool } @@ -218,7 +219,7 @@ class RoomItem extends React.Component { render() { const { - unread, userMentions, name, _updatedAt, alert, testID, type, avatarSize, baseUrl, userId, username, token, id, prid, showLastMessage, lastMessage, isRead, width, favorite, status, avatar + unread, userMentions, name, _updatedAt, alert, testID, type, avatarSize, baseUrl, userId, username, token, id, prid, showLastMessage, lastMessage, isRead, width, favorite, status, avatar, customEmojis } = this.props; const date = formatDate(_updatedAt); @@ -321,6 +322,8 @@ class RoomItem extends React.Component { showLastMessage={showLastMessage} username={username} alert={alert} + customEmojis={customEmojis} + baseUrl={baseUrl} /> ({ - status: state.meteor.connected && ownProps.type === 'd' ? state.activeUsers[ownProps.id] : 'offline' + status: state.meteor.connected && ownProps.type === 'd' ? state.activeUsers[ownProps.id] : 'offline', + customEmojis: state.customEmojis }); export default connect(mapStateToProps)(RoomItem); From defad2af9d6dcda942d6e9bf033d71dac5c04c9c Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Fri, 27 Sep 2019 19:45:26 -0300 Subject: [PATCH 04/10] Fix multiline previews --- app/containers/markdown/List.js | 13 ++++++++++--- app/containers/markdown/index.js | 27 ++++++++++++++++++--------- 2 files changed, 28 insertions(+), 12 deletions(-) diff --git a/app/containers/markdown/List.js b/app/containers/markdown/List.js index 951b1f3060e..f934a878ec5 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 3bd8b3934d6..eba55e3c579 100644 --- a/app/containers/markdown/index.js +++ b/app/containers/markdown/index.js @@ -228,15 +228,19 @@ export default class Markdown extends PureComponent { renderList = ({ children, start, tight, type - }) => ( - - {children} - - ); + }) => { + const { numberOfLines } = this.props; + return ( + + {children} + + ); + }; renderListItem = ({ children, context, ...otherProps @@ -285,6 +289,11 @@ export default class Markdown extends PureComponent { m = m.replace(/^\[([\s]]*)\]\(([^)]*)\)\s/, '').trim(); m = shortnameToUnicode(m); + // We need to replace hardbreaks on previews + if (preview) { + m = m.replace('\n\n', ' '); + } + if (!useMarkdown && !preview) { return {m}; } From 94be0a4142981a4144abf5f3ea4a8bb17fb272f4 Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Fri, 27 Sep 2019 20:53:48 -0300 Subject: [PATCH 05/10] Improve preview --- .../__snapshots__/Storyshots.test.js.snap | 2826 +++++++++-------- app/containers/markdown/Emoji.js | 19 +- app/containers/markdown/index.js | 64 +- 3 files changed, 1596 insertions(+), 1313 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index e32a23c61c1..52246dab881 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -224,14 +224,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -455,14 +458,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -686,14 +692,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -899,14 +908,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -994,14 +1006,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -1089,14 +1104,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -1302,14 +1320,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -1415,14 +1436,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -1660,14 +1684,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -1887,14 +1914,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -2118,14 +2148,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -2374,15 +2407,18 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - undefined, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + undefined, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -2615,15 +2651,18 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - undefined, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + undefined, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -2657,14 +2696,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -2920,16 +2962,19 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - undefined, - undefined, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + undefined, + undefined, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -2993,18 +3038,21 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - undefined, - undefined, - undefined, - undefined, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + undefined, + undefined, + undefined, + undefined, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -3070,23 +3118,26 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - undefined, - undefined, - undefined, - undefined, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - ] - } - > - cats - + Array [ + Object {}, + undefined, + undefined, + undefined, + undefined, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], + ] + } + > + cats + @@ -3341,16 +3392,19 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - undefined, - undefined, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + undefined, + undefined, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -3416,16 +3470,19 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - undefined, - undefined, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + undefined, + undefined, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -3683,16 +3740,19 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - undefined, - undefined, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + undefined, + undefined, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -3814,16 +3874,19 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - undefined, - undefined, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + undefined, + undefined, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -4049,14 +4112,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -4280,14 +4346,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -4526,14 +4595,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -4565,14 +4637,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -4604,14 +4679,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -4643,14 +4721,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -4886,17 +4967,26 @@ exports[`Storyshots Message list 1`] = ` "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "System", - "fontSize": 30, + "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object { + "backgroundColor": "transparent", + "color": "#2F343D", + "fontFamily": "System", + "fontSize": 30, + "fontWeight": "400", + }, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -5117,17 +5207,26 @@ exports[`Storyshots Message list 1`] = ` "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "System", - "fontSize": 30, + "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object { + "backgroundColor": "transparent", + "color": "#2F343D", + "fontFamily": "System", + "fontSize": 30, + "fontWeight": "400", + }, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -5380,17 +5479,26 @@ exports[`Storyshots Message list 1`] = ` "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "System", - "fontSize": 30, + "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object { + "backgroundColor": "transparent", + "color": "#2F343D", + "fontFamily": "System", + "fontSize": 30, + "fontWeight": "400", + }, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -5436,30 +5544,39 @@ exports[`Storyshots Message list 1`] = ` "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "System", - "fontSize": 30, + "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - ] - } - > - - - + + + @@ -6201,17 +6327,26 @@ exports[`Storyshots Message list 1`] = ` "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "System", - "fontSize": 30, + "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object { + "backgroundColor": "transparent", + "color": "#2F343D", + "fontFamily": "System", + "fontSize": 30, + "fontWeight": "400", + }, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -6257,17 +6392,26 @@ exports[`Storyshots Message list 1`] = ` "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "System", - "fontSize": 30, + "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object { + "backgroundColor": "transparent", + "color": "#2F343D", + "fontFamily": "System", + "fontSize": 30, + "fontWeight": "400", + }, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -6491,14 +6635,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -6722,14 +6869,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -7272,14 +7422,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -8233,14 +8386,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -8446,14 +8602,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -8659,14 +8818,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -8872,14 +9034,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -9103,14 +9268,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -9381,14 +9549,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -9523,14 +9694,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -9736,14 +9910,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -9988,14 +10165,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -10271,14 +10451,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -10537,14 +10720,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -10845,14 +11031,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -11520,14 +11709,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -11646,14 +11838,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -11934,14 +12129,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -12666,14 +12864,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -12690,14 +12891,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -12714,14 +12918,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -12825,14 +13032,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13039,14 +13249,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13063,14 +13276,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13087,14 +13303,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13198,14 +13417,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13462,14 +13684,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13486,14 +13711,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13510,14 +13738,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13605,14 +13836,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13629,14 +13863,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13653,14 +13890,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13866,14 +14106,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13890,14 +14133,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -13914,14 +14160,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -14031,14 +14280,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -14055,14 +14307,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -14079,14 +14334,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -14332,14 +14590,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -14626,14 +14887,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -14950,14 +15214,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -14974,14 +15231,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -14998,14 +15248,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -15241,14 +15484,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -15265,14 +15501,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -15289,14 +15518,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -15532,14 +15754,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -15556,14 +15771,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -15580,14 +15788,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -15823,14 +16024,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -15847,14 +16041,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -15871,14 +16058,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -16114,14 +16294,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -16357,14 +16530,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -16805,14 +16971,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -17054,14 +17223,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -17078,14 +17240,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -17102,14 +17257,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -17270,14 +17418,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -17673,14 +17814,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -17697,14 +17831,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -17721,14 +17848,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -17889,14 +18009,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -17913,14 +18026,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -18081,14 +18187,7 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Object {}, ] } > @@ -19982,20 +20081,23 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - ] - } - > - Message - - + Message + + @@ -20541,14 +20646,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -20983,14 +21091,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -21094,14 +21205,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -21296,14 +21410,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -21618,14 +21735,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -21928,14 +22048,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -22190,14 +22313,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -22365,14 +22491,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -22601,14 +22730,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -22832,14 +22964,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -25453,14 +25588,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -25684,14 +25822,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -25708,17 +25849,20 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - Object { - "fontStyle": "italic", - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + Object { + "fontStyle": "italic", + }, + ], ] } > @@ -25735,14 +25879,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -25759,17 +25906,20 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - Object { - "fontStyle": "italic", - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + Object { + "fontStyle": "italic", + }, + ], ] } > @@ -25786,14 +25936,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -25810,17 +25963,20 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - Object { - "fontWeight": "bold", - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + Object { + "fontWeight": "bold", + }, + ], ] } > @@ -25837,14 +25993,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -25861,17 +26020,20 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - Object { - "fontWeight": "bold", - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + Object { + "fontWeight": "bold", + }, + ], ] } > @@ -25888,14 +26050,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -25912,17 +26077,20 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - Object { - "textDecorationLine": "line-through", - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + Object { + "textDecorationLine": "line-through", + }, + ], ] } > @@ -25939,14 +26107,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -25963,20 +26134,23 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - Object { - "textDecorationLine": "line-through", - }, - Object { - "textDecorationLine": "line-through", - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + Object { + "textDecorationLine": "line-through", + }, + Object { + "textDecorationLine": "line-through", + }, + ], ] } > @@ -26176,7 +26350,9 @@ exports[`Storyshots Message list 1`] = ` - + H1 - + H2 - + H3 - + H4 - + H5 - + @@ -26536,14 +26740,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -26562,31 +26769,34 @@ exports[`Storyshots Message list 1`] = ` } > @@ -26604,14 +26814,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -26640,21 +26853,24 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - Object { - "backgroundColor": "transparent", - "color": "#1d74f5", - "fontFamily": "System", - "fontSize": 16, - "fontWeight": "400", - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + Object { + "backgroundColor": "transparent", + "color": "#1d74f5", + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "400", + }, + ], ] } > @@ -26671,21 +26887,24 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - Object { - "backgroundColor": "transparent", - "color": "#1d74f5", - "fontFamily": "System", - "fontSize": 16, - "fontWeight": "400", - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + Object { + "backgroundColor": "transparent", + "color": "#1d74f5", + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "400", + }, + ], ] } > @@ -26702,21 +26921,24 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - Object { - "backgroundColor": "transparent", - "color": "#1d74f5", - "fontFamily": "System", - "fontSize": 16, - "fontWeight": "400", - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + Object { + "backgroundColor": "transparent", + "color": "#1d74f5", + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "400", + }, + ], ] } > @@ -26734,14 +26956,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -26770,21 +26995,24 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, - Object { - "backgroundColor": "transparent", - "color": "#1d74f5", - "fontFamily": "System", - "fontSize": 16, - "fontWeight": "400", - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + Object { + "backgroundColor": "transparent", + "color": "#1d74f5", + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "400", + }, + ], ] } > @@ -27230,14 +27458,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -27267,14 +27498,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -27304,14 +27538,17 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -27576,15 +27813,18 @@ exports[`Storyshots Message list 1`] = ` "fontSize": 16, "fontWeight": "400", }, - undefined, - Object { - "alignItems": "flex-start", - "flexDirection": "row", - "flexWrap": "wrap", - "justifyContent": "flex-start", - "marginBottom": 0, - "marginTop": 0, - }, + Array [ + Object {}, + undefined, + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], ] } > @@ -27882,13 +28122,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, + ], ] } > @@ -27925,13 +28168,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, + ], ] } > @@ -27985,13 +28231,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, + ], ] } > @@ -28028,13 +28277,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, + ], ] } > @@ -28084,13 +28336,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, + ], ] } > @@ -28127,13 +28382,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/markdown/Emoji.js b/app/containers/markdown/Emoji.js index 49aed9cf442..0e15a6495ca 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, preview, style = [] }) => { const emojiUnicode = shortnameToUnicode(literal); const emoji = getCustomEmoji && getCustomEmoji(emojiName); - if (emoji) { + if (emoji && !preview) { 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, + preview: PropTypes.bool, + style: PropTypes.array }; export default Emoji; diff --git a/app/containers/markdown/index.js b/app/containers/markdown/index.js index eba55e3c579..7ad0a9784f2 100644 --- a/app/containers/markdown/index.js +++ b/app/containers/markdown/index.js @@ -86,33 +86,33 @@ export default class Markdown extends PureComponent { emph: Renderer.forwardChildren, strong: Renderer.forwardChildren, del: Renderer.forwardChildren, - code: preview ? this.renderText : this.renderCodeInline, - link: preview ? this.renderText : this.renderLink, - image: preview ? this.renderText : this.renderImage, - atMention: preview ? this.renderText : this.renderAtMention, + code: this.renderCodeInline, + link: this.renderLink, + image: this.renderImage, + atMention: this.renderAtMention, emoji: this.renderEmoji, - hashtag: preview ? this.renderText : this.renderHashtag, + hashtag: this.renderHashtag, paragraph: this.renderParagraph, - heading: preview ? this.renderText : this.renderHeading, - codeBlock: preview ? this.renderText : this.renderCodeBlock, - blockQuote: preview ? this.renderText : this.renderBlockQuote, + heading: this.renderHeading, + codeBlock: this.renderCodeBlock, + blockQuote: this.renderBlockQuote, - list: preview ? this.renderText : this.renderList, - item: preview ? this.renderText : this.renderListItem, + list: this.renderList, + item: this.renderListItem, hardBreak: this.renderBreak, thematicBreak: this.renderBreak, softBreak: this.renderBreak, - htmlBlock: preview ? this.renderText : this.renderText, - htmlInline: preview ? this.renderText : this.renderText, + htmlBlock: this.renderText, + htmlInline: this.renderText, - table: preview ? this.renderText : this.renderTable, - table_row: preview ? this.renderText : this.renderTableRow, - table_cell: preview ? this.renderText : this.renderTableCell, + table: this.renderTable, + table_row: this.renderTableRow, + table_cell: this.renderTableCell, - editedIndicator: preview ? this.renderText : this.renderEditedIndicator + editedIndicator: preview ? () => null : this.renderEditedIndicator }, renderParagraphsInLists: true }); @@ -134,11 +134,15 @@ export default class Markdown extends PureComponent { renderText = ({ context, literal }) => { 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} @@ -148,9 +152,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; @@ -201,14 +211,18 @@ export default class Markdown extends PureComponent { } renderEmoji = ({ emojiName, literal }) => { - const { getCustomEmoji, baseUrl, preview } = this.props; + const { + getCustomEmoji, baseUrl, preview, style + } = this.props; return ( ); } @@ -218,9 +232,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} ); @@ -289,9 +304,8 @@ export default class Markdown extends PureComponent { m = m.replace(/^\[([\s]]*)\]\(([^)]*)\)\s/, '').trim(); m = shortnameToUnicode(m); - // We need to replace hardbreaks on previews if (preview) { - m = m.replace('\n\n', ' '); + m = m.split('\n').reduce((lines, line) => `${ lines } ${ line }`, ''); } if (!useMarkdown && !preview) { From 160014c85ab35d64fd03c4512f7181cc9fdf0351 Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Fri, 27 Sep 2019 21:04:59 -0300 Subject: [PATCH 06/10] Fix some styles --- .../__snapshots__/Storyshots.test.js.snap | 90 ++++++++++--------- app/containers/markdown/AtMention.js | 5 +- app/containers/markdown/Hashtag.js | 5 +- app/containers/markdown/index.js | 12 ++- 4 files changed, 64 insertions(+), 48 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 52246dab881..7a5719a494c 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -4572,14 +4572,16 @@ exports[`Storyshots Message list 1`] = ` @rocket.cat @@ -4614,14 +4616,16 @@ exports[`Storyshots Message list 1`] = ` @diego.mello @@ -4656,14 +4660,16 @@ exports[`Storyshots Message list 1`] = ` @all @@ -4698,14 +4704,16 @@ exports[`Storyshots Message list 1`] = ` @here @@ -4740,14 +4748,16 @@ exports[`Storyshots Message list 1`] = ` #general diff --git a/app/containers/markdown/AtMention.js b/app/containers/markdown/AtMention.js index 375d5d6fe77..5b5f0480f2b 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/Hashtag.js b/app/containers/markdown/Hashtag.js index 47e50cb3b43..25bd9258c2e 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/index.js b/app/containers/markdown/index.js index 7ad0a9784f2..cc08806b662 100644 --- a/app/containers/markdown/index.js +++ b/app/containers/markdown/index.js @@ -168,13 +168,13 @@ export default class Markdown extends PureComponent { } renderParagraph = ({ children }) => { - const { numberOfLines } = this.props; + const { numberOfLines, style } = this.props; if (!children || children.length === 0) { return null; } return ( - + {children} @@ -188,24 +188,28 @@ 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 ( ); } From 3861b46637ea2bee3fd087e2d929c9cb4368ac77 Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Fri, 27 Sep 2019 21:15:29 -0300 Subject: [PATCH 07/10] Reply preview --- app/containers/MessageBox/ReplyPreview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/containers/MessageBox/ReplyPreview.js b/app/containers/MessageBox/ReplyPreview.js index 193d483314b..06fc074bac0 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} - + From c4f9a1f0fc73547aa54c489408c2133d96b31f54 Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Mon, 30 Sep 2019 09:42:27 -0300 Subject: [PATCH 08/10] Remove unnecessary view --- .../__snapshots__/Storyshots.test.js.snap | 8362 ++++++++--------- app/containers/markdown/index.js | 10 +- 2 files changed, 3701 insertions(+), 4671 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 7a5719a494c..872906406bf 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -200,48 +200,37 @@ exports[`Storyshots Message list 1`] = ` - - - Message - + ], + ] + } + > + Message - + @@ -434,48 +423,37 @@ 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. - + @@ -668,48 +646,37 @@ exports[`Storyshots Message list 1`] = ` - - - ... - + ], + ] + } + > + ... - + @@ -884,48 +851,37 @@ exports[`Storyshots Message list 1`] = ` - - - Different user - + ], + ] + } + > + Different user - + @@ -982,48 +938,37 @@ exports[`Storyshots Message list 1`] = ` } > - - - This is the third message - + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], + ] + } + > + This is the third message - + @@ -1080,48 +1025,37 @@ exports[`Storyshots Message list 1`] = ` } > - - - This is the second message - + ], + ] + } + > + This is the second message - + @@ -1296,48 +1230,37 @@ exports[`Storyshots Message list 1`] = ` - - - This is the first message - + ], + ] + } + > + This is the first message - + @@ -1412,48 +1335,37 @@ exports[`Storyshots Message list 1`] = ` } > - - - Message - + ], + ] + } + > + Message - + @@ -1660,48 +1572,37 @@ exports[`Storyshots Message list 1`] = ` - - - Message - + ], + ] + } + > + Message - + @@ -1890,48 +1791,37 @@ exports[`Storyshots Message list 1`] = ` - - - Message - + ], + ] + } + > + Message - + @@ -2124,48 +2014,37 @@ exports[`Storyshots Message list 1`] = ` - - - Message - + ], + ] + } + > + Message - + @@ -2383,49 +2262,38 @@ exports[`Storyshots Message list 1`] = ` } } > - - - Testing block quote - + ], + ] + } + > + Testing block quote - + @@ -2627,93 +2495,71 @@ exports[`Storyshots Message list 1`] = ` } } > - - - Testing block quote - + ], + ] + } + > + Testing block quote - + - - - Testing block quote - + ], + ] + } + > + Testing block quote - + @@ -2938,50 +2784,39 @@ exports[`Storyshots Message list 1`] = ` } } > - - - Dogs - + ], + ] + } + > + Dogs - + - - - cats - + ], + ] + } + > + cats - + - - - cats - + ], + ] + } + > + cats - + @@ -3368,50 +3181,39 @@ exports[`Storyshots Message list 1`] = ` } } > - - - Dogs - + ], + ] + } + > + Dogs - + - - - Cats - + ], + ] + } + > + Cats - + @@ -3716,50 +3507,39 @@ exports[`Storyshots Message list 1`] = ` } } > - - - Dogs - + ], + ] + } + > + Dogs - + @@ -3850,50 +3630,39 @@ exports[`Storyshots Message list 1`] = ` } } > - - - Cats - + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], + ] + } + > + Cats - + @@ -4088,48 +3857,37 @@ exports[`Storyshots Message list 1`] = ` - - - Message - + ], + ] + } + > + Message - + @@ -4322,48 +4080,37 @@ exports[`Storyshots Message list 1`] = ` - - - Message - + ], + ] + } + > + Message - + @@ -4556,214 +4303,203 @@ exports[`Storyshots Message list 1`] = ` - - - @rocket.cat - - + - - - + + + + @diego.mello + + - @diego.mello - - - - - - @all - - - - - - @here - - + + + + @all + + - - - + + + + @here + + - #general - + ], + ] + } + > + - + + #general + + @@ -4956,54 +4692,43 @@ exports[`Storyshots Message list 1`] = ` - - - 👊🤙👏 - + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], + ] + } + > + 👊🤙👏 - + @@ -5196,54 +4921,43 @@ exports[`Storyshots Message list 1`] = ` - - - 👏 - + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], + ] + } + > + 👏 - + @@ -5436,183 +5150,172 @@ exports[`Storyshots Message list 1`] = ` - - - - - - + + - - - - + + + + - - + + - - - - + + + + - - - + } + /> + + @@ -5805,53 +5508,42 @@ exports[`Storyshots Message list 1`] = ` - - - - - - - + } + /> + + @@ -6044,86 +5736,75 @@ exports[`Storyshots Message list 1`] = ` - - - 🤙 - - - + 🤙 + + + - - - + } + /> + + @@ -6316,119 +5997,108 @@ exports[`Storyshots Message list 1`] = ` - - - 🤙 - - - + 🤙 + + + - - + + - 🤙🤙 - + Object { + "alignItems": "flex-start", + "flexDirection": "row", + "flexWrap": "wrap", + "justifyContent": "flex-start", + "marginBottom": 0, + "marginTop": 0, + }, + ], + ] + } + > + 🤙🤙 - + @@ -6621,48 +6291,37 @@ exports[`Storyshots Message list 1`] = ` - - - Testing - + ], + ] + } + > + Testing - + @@ -6855,49 +6514,38 @@ exports[`Storyshots Message list 1`] = ` - - - Reactions - - - - + ], + ] + } + > + Reactions + + + - - - Multiple Reactions - + ], + ] + } + > + Multiple Reactions - + - - - Fourth message - + ], + ] + } + > + Fourth message - + @@ -8588,48 +8214,37 @@ exports[`Storyshots Message list 1`] = ` - - - Third message - + ], + ] + } + > + Third message - + @@ -8804,48 +8419,37 @@ exports[`Storyshots Message list 1`] = ` - - - Second message - + ], + ] + } + > + Second message - + @@ -9020,48 +8624,37 @@ exports[`Storyshots Message list 1`] = ` - - - First message - + ], + ] + } + > + First message - + @@ -9254,48 +8847,37 @@ exports[`Storyshots Message list 1`] = ` - - - Fourth message - + ], + ] + } + > + Fourth message - + @@ -9535,48 +9117,37 @@ exports[`Storyshots Message list 1`] = ` - - - Third message - + ], + ] + } + > + Third message - + @@ -9680,48 +9251,37 @@ exports[`Storyshots Message list 1`] = ` } > - - - Second message - + ], + ] + } + > + Second message - + @@ -9896,48 +9456,37 @@ exports[`Storyshots Message list 1`] = ` - - - Second message - + ], + ] + } + > + Second message - + @@ -10151,48 +9700,37 @@ exports[`Storyshots Message list 1`] = ` - - - First message - + ], + ] + } + > + First message - + @@ -10440,45 +9978,34 @@ exports[`Storyshots Message list 1`] = ` } /> - - - + - This is a description - + ], + ] + } + > + This is a description - + @@ -10709,77 +10236,66 @@ exports[`Storyshots Message list 1`] = ` } /> - - - + + This is a description + + + - This is a description - - - - - - + } + /> + + @@ -11020,77 +10536,66 @@ exports[`Storyshots Message list 1`] = `  - - - + - This is a description - - - + This is a description + + + - - - + } + /> + + @@ -11698,77 +11203,66 @@ exports[`Storyshots Message list 1`] = ` 00:00 - - - + + This is a description + + + - This is a description - - - - - - + } + /> + + @@ -11824,48 +11318,37 @@ exports[`Storyshots Message list 1`] = ` } > - - - First message - + ], + ] + } + > + First message - + @@ -12118,45 +11601,34 @@ exports[`Storyshots Message list 1`] = ` 00:00 - - - + - This is a description - + ], + ] + } + > + This is a description - + @@ -12850,102 +12322,91 @@ exports[`Storyshots Message list 1`] = ` - - - I - - + I + + - 'm fine - - + 'm fine + + - ! - + ], + ] + } + > + ! - + - - - + - How are you? - + ], + ] + } + > + How are you? - + @@ -13235,102 +12685,91 @@ exports[`Storyshots Message list 1`] = ` - - - I - - + I + + - 'm fine - - + 'm fine + + - ! - + ], + ] + } + > + ! - + - - - + + How are you? + + + - How are you? - - - - - - + } + /> + + @@ -13670,102 +13098,91 @@ exports[`Storyshots Message list 1`] = ` - - - I - - + I + + - 'm fine - - + 'm fine + + - ! - + ], + ] + } + > + ! - + @@ -13822,102 +13239,91 @@ exports[`Storyshots Message list 1`] = ` } > - - - I - - + I + + - 'm fine - - + 'm fine + + - ! - + ], + ] + } + > + ! - + @@ -14092,102 +13498,91 @@ exports[`Storyshots Message list 1`] = ` - - - I - - + I + + - 'm fine - - + 'm fine + + - ! - + ], + ] + } + > + ! - + - - - I - - + I + + - 'm fine - - + 'm fine + + - ! - + ], + ] + } + > + ! - + - - - How are you? - + ], + ] + } + > + How are you? - + - - - How are you? - + ], + ] + } + > + How are you? - + - - - I - - - 'm fine - - - ! - + I - - - - - - - - + 'm fine + + + ! + + + + + + + + + @@ -15470,72 +14821,61 @@ exports[`Storyshots Message list 1`] = ` } > - - - I - - - 'm fine - - - ! - + I - + + 'm fine + + + ! + + @@ -15740,103 +15080,92 @@ exports[`Storyshots Message list 1`] = ` } > - - - I - - - 'm fine - - - ! - + I - - - - - - - - - - + 'm fine + + + ! + + + + + + + + + + + - - - I - - - 'm fine - - - ! - + I - + + 'm fine + + + ! + + @@ -16280,38 +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. - + @@ -16516,38 +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. - + @@ -16957,48 +16253,37 @@ exports[`Storyshots Message list 1`] = ` - - - How are you? - + ], + ] + } + > + How are you? - + - - - I - - - 'm fine - - - ! - + I - + + 'm fine + + + ! + + @@ -17404,38 +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. - + @@ -17800,72 +17063,61 @@ exports[`Storyshots Message list 1`] = ` } > - - - I - - - 'm fine - - - ! - + I - + + 'm fine + + + ! + + @@ -17995,55 +17247,44 @@ exports[`Storyshots Message list 1`] = ` } > - - - Cool - - - ! - + Cool - + + ! + + @@ -18173,38 +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. - + @@ -20067,127 +19297,116 @@ exports[`Storyshots Message list 1`] = ` + + + Message + + + + + + + - - Message - - - - - - - - - - Google @@ -20518,48 +19737,37 @@ exports[`Storyshots Message list 1`] = ` - - - 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 - + @@ -22299,48 +21441,37 @@ exports[`Storyshots Message list 1`] = ` - - - This message has error - + ], + ] + } + > + This message has error - + @@ -22477,48 +21608,37 @@ exports[`Storyshots Message list 1`] = ` - - - This message has error too - + ], + ] + } + > + This message has error too - + @@ -22716,48 +21836,37 @@ exports[`Storyshots Message list 1`] = ` } } > - - - Temp message - + ], + ] + } + > + Temp message - + @@ -22950,48 +22059,37 @@ exports[`Storyshots Message list 1`] = ` - - - Message being edited - + ], + ] + } + > + Message being edited - + @@ -25574,48 +24672,37 @@ exports[`Storyshots Message list 1`] = ` - - - Message - + ], + ] + } + > + Message - + @@ -25808,366 +24895,355 @@ exports[`Storyshots Message list 1`] = ` - - + - Italic with single - - + underscore + + - underscore - - + or double + + - or double - - + underscores + + - underscores - - + . Bold with single + + - . Bold with single - - + asterisk + + - asterisk - - + or double + + - or double - - + asterisks + + - asterisks - - + . Strikethrough with single + + - . Strikethrough with single - - - Strikethrough - - + Strikethrough + + - or double - - + or double + + - Strikethrough - + Object { + "textDecorationLine": "line-through", + }, + Object { + "textDecorationLine": "line-through", + }, + ], + ] + } + > + Strikethrough - + @@ -26726,18 +25802,121 @@ exports[`Storyshots Message list 1`] = ` - + + Support + + + + Google + + + + > + + - Support - - - - Google - + ], + ] + } + > + I - - - - - I - - - \` - - - m an inline-style link - + ], + ] + } + > + \` - + m an inline-style link - + + + + - + - https://google.com - + ], + ] + } + > + https://google.com - + @@ -27223,35 +26288,24 @@ exports[`Storyshots Message list 1`] = ` - - - - - + } + /> + @@ -27444,128 +26498,117 @@ exports[`Storyshots Message list 1`] = ` - - + Inline + + - Inline - - + code + + - code - - + has + + - has - - + back-ticks around + + - back-ticks around - - - it. - + ], + ] + } + > + it. - + - - - Quote - + ], + ] + } + > + Quote - + diff --git a/app/containers/markdown/index.js b/app/containers/markdown/index.js index cc08806b662..73edcaaa609 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'; @@ -173,11 +173,9 @@ export default class Markdown extends PureComponent { return null; } return ( - - - {children} - - + + {children} + ); }; From 2cf0247921bb1c66f1cb8b8cb00723e708ab535e Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Mon, 30 Sep 2019 09:53:37 -0300 Subject: [PATCH 09/10] Remove unnecesary changes --- app/presentation/RoomItem/LastMessage.js | 12 +----------- app/presentation/RoomItem/index.js | 8 ++------ 2 files changed, 3 insertions(+), 17 deletions(-) diff --git a/app/presentation/RoomItem/LastMessage.js b/app/presentation/RoomItem/LastMessage.js index 90c702eed15..f1b28f4e55a 100644 --- a/app/presentation/RoomItem/LastMessage.js +++ b/app/presentation/RoomItem/LastMessage.js @@ -45,20 +45,12 @@ const formatMsg = ({ const arePropsEqual = (oldProps, newProps) => _.isEqual(oldProps, newProps); const LastMessage = React.memo(({ - lastMessage, type, showLastMessage, username, alert, baseUrl, customEmojis + lastMessage, type, showLastMessage, username, alert }) => ( { - const emoji = customEmojis[name]; - if (emoji) { - return emoji; - } - return null; - }} style={[styles.markdownText, alert && styles.markdownTextAlert]} numberOfLines={2} preview @@ -70,8 +62,6 @@ LastMessage.propTypes = { type: PropTypes.string, showLastMessage: PropTypes.bool, username: PropTypes.string, - baseUrl: PropTypes.string, - customEmojis: PropTypes.object, alert: PropTypes.bool }; diff --git a/app/presentation/RoomItem/index.js b/app/presentation/RoomItem/index.js index 26a3072e09c..f0e05a3b1ca 100644 --- a/app/presentation/RoomItem/index.js +++ b/app/presentation/RoomItem/index.js @@ -64,7 +64,6 @@ class RoomItem extends React.Component { toggleFav: PropTypes.func, toggleRead: PropTypes.func, hideChannel: PropTypes.func, - customEmojis: PropTypes.object, avatar: PropTypes.bool } @@ -219,7 +218,7 @@ class RoomItem extends React.Component { render() { const { - unread, userMentions, name, _updatedAt, alert, testID, type, avatarSize, baseUrl, userId, username, token, id, prid, showLastMessage, lastMessage, isRead, width, favorite, status, avatar, customEmojis + unread, userMentions, name, _updatedAt, alert, testID, type, avatarSize, baseUrl, userId, username, token, id, prid, showLastMessage, lastMessage, isRead, width, favorite, status, avatar } = this.props; const date = formatDate(_updatedAt); @@ -322,8 +321,6 @@ class RoomItem extends React.Component { showLastMessage={showLastMessage} username={username} alert={alert} - customEmojis={customEmojis} - baseUrl={baseUrl} /> ({ - status: state.meteor.connected && ownProps.type === 'd' ? state.activeUsers[ownProps.id] : 'offline', - customEmojis: state.customEmojis + status: state.meteor.connected && ownProps.type === 'd' ? state.activeUsers[ownProps.id] : 'offline' }); export default connect(mapStateToProps)(RoomItem); From bb9c3d7ac1ab1d7824c72129aceaacf3986bac3b Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Tue, 1 Oct 2019 10:57:26 -0300 Subject: [PATCH 10/10] Custom Emojis preview --- app/containers/markdown/Emoji.js | 8 ++++---- app/containers/markdown/index.js | 7 ++++--- app/presentation/RoomItem/LastMessage.js | 1 + 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/app/containers/markdown/Emoji.js b/app/containers/markdown/Emoji.js index 0e15a6495ca..b676c6994a2 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, preview, style = [] + emojiName, literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl, customEmojis, style = [] }) => { const emojiUnicode = shortnameToUnicode(literal); const emoji = getCustomEmoji && getCustomEmoji(emojiName); - if (emoji && !preview) { + if (emoji && customEmojis) { return ( @@ -39,7 +39,7 @@ Emoji.propTypes = { isMessageContainsOnlyEmoji: PropTypes.bool, getCustomEmoji: PropTypes.func, baseUrl: PropTypes.string, - preview: PropTypes.bool, + customEmojis: PropTypes.bool, style: PropTypes.array }; diff --git a/app/containers/markdown/index.js b/app/containers/markdown/index.js index 73edcaaa609..6b1b6064002 100644 --- a/app/containers/markdown/index.js +++ b/app/containers/markdown/index.js @@ -63,6 +63,7 @@ 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, @@ -214,16 +215,16 @@ export default class Markdown extends PureComponent { renderEmoji = ({ emojiName, literal }) => { const { - getCustomEmoji, baseUrl, preview, style + getCustomEmoji, baseUrl, customEmojis = true, preview, style } = this.props; return ( ); diff --git a/app/presentation/RoomItem/LastMessage.js b/app/presentation/RoomItem/LastMessage.js index f1b28f4e55a..bafd0acc8b3 100644 --- a/app/presentation/RoomItem/LastMessage.js +++ b/app/presentation/RoomItem/LastMessage.js @@ -52,6 +52,7 @@ const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username })} style={[styles.markdownText, alert && styles.markdownTextAlert]} + customEmojis={false} numberOfLines={2} preview />