diff --git a/app/components/markdown/markdown_emoji/__snapshots__/markdown_emoji.test.js.snap b/app/components/markdown/markdown_emoji/__snapshots__/markdown_emoji.test.js.snap new file mode 100644 index 000000000..43bc80abf --- /dev/null +++ b/app/components/markdown/markdown_emoji/__snapshots__/markdown_emoji.test.js.snap @@ -0,0 +1,33 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MarkdownEmoji should match snapshot 1`] = ` + + + + + +`; diff --git a/app/components/markdown/markdown_emoji/index.js b/app/components/markdown/markdown_emoji/index.js new file mode 100644 index 000000000..11c2e2cf9 --- /dev/null +++ b/app/components/markdown/markdown_emoji/index.js @@ -0,0 +1,16 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {connect} from 'react-redux'; + +import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; + +import MarkdownEmoji from './markdown_emoji'; + +function mapStateToProps(state) { + return { + theme: getTheme(state), + }; +} + +export default connect(mapStateToProps)(MarkdownEmoji); diff --git a/app/components/markdown/markdown_emoji/markdown_emoji.js b/app/components/markdown/markdown_emoji/markdown_emoji.js new file mode 100644 index 000000000..a8aa43ba9 --- /dev/null +++ b/app/components/markdown/markdown_emoji/markdown_emoji.js @@ -0,0 +1,148 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {Node, Parser} from 'commonmark'; +import Renderer from 'commonmark-react-renderer'; +import React, {PureComponent} from 'react'; +import {Platform, Text, View} from 'react-native'; +import PropTypes from 'prop-types'; + +import Emoji from 'app/components/emoji'; +import FormattedText from 'app/components/formatted_text'; +import CustomPropTypes from 'app/constants/custom_prop_types'; +import {blendColors, concatStyles, makeStyleSheetFromTheme} from 'app/utils/theme'; + +export default class MarkdownEmoji extends PureComponent { + static propTypes = { + baseTextStyle: CustomPropTypes.Style, + isEdited: PropTypes.bool, + shouldRenderJumboEmoji: PropTypes.bool.isRequired, + theme: PropTypes.object.isRequired, + value: PropTypes.string.isRequired, + }; + + constructor(props) { + super(props); + + this.parser = this.createParser(); + this.renderer = this.createRenderer(); + } + + createParser = () => { + return new Parser(); + } + + createRenderer = () => { + return new Renderer({ + renderers: { + editedIndicator: this.renderEditedIndicator, + emoji: this.renderEmoji, + paragraph: this.renderParagraph, + text: this.renderText, + }, + }); + }; + + computeTextStyle = (baseStyle) => { + if (!this.props.shouldRenderJumboEmoji) { + return baseStyle; + } + + const style = getStyleSheet(this.props.theme); + + return concatStyles(baseStyle, style.jumboEmoji); + }; + + renderEmoji = ({context, emojiName, literal}) => { + return ( + + ); + }; + + renderParagraph = ({children}) => { + const style = getStyleSheet(this.props.theme); + return ( + {children} + ); + }; + + renderText = ({context, literal}) => { + const style = this.computeTextStyle(this.props.baseTextStyle, context); + + return {literal}; + }; + + renderEditedIndicator = ({context}) => { + let spacer = ''; + if (context[0] === 'paragraph') { + spacer = ' '; + } + + const style = getStyleSheet(this.props.theme); + const styles = [ + this.props.baseTextStyle, + style.editedIndicatorText, + ]; + + return ( + + {spacer} + + + ); + }; + + render() { + const ast = this.parser.parse(this.props.value); + + if (this.props.isEdited) { + const editIndicatorNode = new Node('edited_indicator'); + if (ast.lastChild && ['heading', 'paragraph'].includes(ast.lastChild.type)) { + ast.lastChild.appendChild(editIndicatorNode); + } else { + const node = new Node('paragraph'); + node.appendChild(editIndicatorNode); + + ast.appendChild(node); + } + } + + return this.renderer.render(ast); + } +} + +const getStyleSheet = makeStyleSheetFromTheme((theme) => { + // Android has trouble giving text transparency depending on how it's nested, + // so we calculate the resulting colour manually + const editedOpacity = Platform.select({ + ios: 0.3, + android: 1.0, + }); + const editedColor = Platform.select({ + ios: theme.centerChannelColor, + android: blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.3), + }); + + return { + block: { + alignItems: 'flex-start', + flexDirection: 'row', + flexWrap: 'wrap', + }, + editedIndicatorText: { + color: editedColor, + opacity: editedOpacity, + }, + jumboEmoji: { + fontSize: 40, + lineHeight: 50, + }, + }; +}); diff --git a/app/components/markdown/markdown_emoji/markdown_emoji.test.js b/app/components/markdown/markdown_emoji/markdown_emoji.test.js new file mode 100644 index 000000000..55df28316 --- /dev/null +++ b/app/components/markdown/markdown_emoji/markdown_emoji.test.js @@ -0,0 +1,27 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {shallow} from 'enzyme'; + +import Preferences from 'mattermost-redux/constants/preferences'; + +import MarkdownEmoji from './markdown_emoji'; + +describe('MarkdownEmoji', () => { + const baseProps = { + baseTextStyle: {color: '#3d3c40', fontSize: 15, lineHeight: 20}, + isEdited: false, + shouldRenderJumboEmoji: true, + theme: Preferences.THEMES.default, + value: ':smile:', + }; + + test('should match snapshot', () => { + const wrapper = shallow( + + ); + + expect(wrapper.getElement()).toMatchSnapshot(); + }); +}); diff --git a/app/components/post_body/index.js b/app/components/post_body/index.js index 62854803a..0926f1f96 100644 --- a/app/components/post_body/index.js +++ b/app/components/post_body/index.js @@ -10,6 +10,8 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general'; import {getCurrentUserId, getCurrentUserRoles} from 'mattermost-redux/selectors/entities/users'; import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams'; +import {getCustomEmojisByName} from 'mattermost-redux/selectors/entities/emojis'; +import {memoizeResult} from 'mattermost-redux/utils/helpers'; import { isEdited, @@ -19,68 +21,79 @@ import { } from 'mattermost-redux/utils/post_utils'; import {isAdmin as checkIsAdmin, isSystemAdmin as checkIsSystemAdmin} from 'mattermost-redux/utils/user_utils'; +import {hasEmojisOnly} from 'app/utils/emoji_utils'; + import PostBody from './post_body'; const POST_TIMEOUT = 20000; -function mapStateToProps(state, ownProps) { - const post = getPost(state, ownProps.postId) || {}; - const channel = getChannel(state, post.channel_id) || {}; +function makeMapStateToProps() { + const memoizeHasEmojisOnly = memoizeResult((message, customEmojis) => hasEmojisOnly(message, customEmojis)); - let isFailed = post.failed; - let isPending = post.id === post.pending_post_id; - if (isPending && Date.now() - post.create_at > POST_TIMEOUT) { - // Something has prevented the post from being set to failed, so it's safe to assume - // that it has actually failed by this point - isFailed = true; - isPending = false; - } + return (state, ownProps) => { + const post = getPost(state, ownProps.postId) || {}; + const channel = getChannel(state, post.channel_id) || {}; - const isUserCanManageMembers = canManageChannelMembers(state); - const isEphemeralPost = isPostEphemeral(post); + let isFailed = post.failed; + let isPending = post.id === post.pending_post_id; + if (isPending && Date.now() - post.create_at > POST_TIMEOUT) { + // Something has prevented the post from being set to failed, so it's safe to assume + // that it has actually failed by this point + isFailed = true; + isPending = false; + } - const config = getConfig(state); - const license = getLicense(state); - const currentUserId = getCurrentUserId(state); - const currentTeamId = getCurrentTeamId(state); - const currentChannelId = getCurrentChannelId(state); - const roles = getCurrentUserId(state) ? getCurrentUserRoles(state) : ''; - const isAdmin = checkIsAdmin(roles); - const isSystemAdmin = checkIsSystemAdmin(roles); - let canDelete = false; + const isUserCanManageMembers = canManageChannelMembers(state); + const isEphemeralPost = isPostEphemeral(post); - if (post && !ownProps.channelIsArchived) { - canDelete = canDeletePost(state, config, license, currentTeamId, currentChannelId, currentUserId, post, isAdmin, isSystemAdmin); - } + const config = getConfig(state); + const license = getLicense(state); + const currentUserId = getCurrentUserId(state); + const currentTeamId = getCurrentTeamId(state); + const currentChannelId = getCurrentChannelId(state); + const roles = getCurrentUserId(state) ? getCurrentUserRoles(state) : ''; + const isAdmin = checkIsAdmin(roles); + const isSystemAdmin = checkIsSystemAdmin(roles); + let canDelete = false; - let isPostAddChannelMember = false; - if ( - channel && - (channel.type === General.PRIVATE_CHANNEL || channel.type === General.OPEN_CHANNEL) && - isUserCanManageMembers && - isEphemeralPost && - post.props && - post.props.add_channel_member - ) { - isPostAddChannelMember = true; - } + if (post && !ownProps.channelIsArchived) { + canDelete = canDeletePost(state, config, license, currentTeamId, currentChannelId, currentUserId, post, isAdmin, isSystemAdmin); + } - return { - postProps: post.props || {}, - postType: post.type || '', - fileIds: post.file_ids, - hasBeenDeleted: post.state === Posts.POST_DELETED, - hasBeenEdited: isEdited(post), - hasReactions: post.has_reactions, - isFailed, - isPending, - isPostAddChannelMember, - isPostEphemeral: isEphemeralPost, - isSystemMessage: isSystemMessage(post), - message: post.message, - theme: getTheme(state), - canDelete, + let isPostAddChannelMember = false; + if ( + channel && + (channel.type === General.PRIVATE_CHANNEL || channel.type === General.OPEN_CHANNEL) && + isUserCanManageMembers && + isEphemeralPost && + post.props && + post.props.add_channel_member + ) { + isPostAddChannelMember = true; + } + + const customEmojis = getCustomEmojisByName(state); + const {isEmojiOnly, shouldRenderJumboEmoji} = memoizeHasEmojisOnly(post.message, customEmojis); + + return { + postProps: post.props || {}, + postType: post.type || '', + fileIds: post.file_ids, + hasBeenDeleted: post.state === Posts.POST_DELETED, + hasBeenEdited: isEdited(post), + hasReactions: post.has_reactions, + isFailed, + isPending, + isPostAddChannelMember, + isPostEphemeral: isEphemeralPost, + isSystemMessage: isSystemMessage(post), + message: post.message, + isEmojiOnly, + shouldRenderJumboEmoji, + theme: getTheme(state), + canDelete, + }; }; } -export default connect(mapStateToProps, null, null, {withRef: true})(PostBody); +export default connect(makeMapStateToProps, null, null, {withRef: true})(PostBody); diff --git a/app/components/post_body/post_body.js b/app/components/post_body/post_body.js index e547e2c87..33dbaf3c8 100644 --- a/app/components/post_body/post_body.js +++ b/app/components/post_body/post_body.js @@ -16,6 +16,7 @@ import {Posts} from 'mattermost-redux/constants'; import CombinedSystemMessage from 'app/components/combined_system_message'; import FormattedText from 'app/components/formatted_text'; import Markdown from 'app/components/markdown'; +import MarkdownEmoji from 'app/components/markdown/markdown_emoji'; import ShowMoreButton from 'app/components/show_more_button'; import {emptyFunction} from 'app/utils/general'; @@ -58,6 +59,8 @@ export default class PostBody extends PureComponent { replyBarStyle: PropTypes.array, showAddReaction: PropTypes.bool, showLongPost: PropTypes.bool.isRequired, + isEmojiOnly: PropTypes.bool.isRequired, + shouldRenderJumboEmoji: PropTypes.bool.isRequired, theme: PropTypes.object, }; @@ -275,6 +278,7 @@ export default class PostBody extends PureComponent { hasBeenDeleted, hasBeenEdited, highlight, + isEmojiOnly, isFailed, isPending, isPostAddChannelMember, @@ -290,6 +294,7 @@ export default class PostBody extends PureComponent { postProps, postType, replyBarStyle, + shouldRenderJumboEmoji, theme, } = this.props; const {isLongPost, maxHeight} = this.state; @@ -331,6 +336,17 @@ export default class PostBody extends PureComponent { ); + } else if (isEmojiOnly) { + messageComponent = ( + + + + ); } else if (message.length) { messageComponent = ( diff --git a/app/utils/emoji_utils.js b/app/utils/emoji_utils.js new file mode 100644 index 000000000..66ce4859f --- /dev/null +++ b/app/utils/emoji_utils.js @@ -0,0 +1,93 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {EmojiIndicesByAlias} from './emojis'; + +const RE_NAMED_EMOJI = /(:([a-zA-Z0-9_-]+):)/g; + +// http://www.unicode.org/Public/UNIDATA/EmojiSources.txt +const RE_UNICODE_EMOJI = /((?:\ud83c\udde8\ud83c\uddf3|\ud83c\uddfa\ud83c\uddf8|\ud83c\uddf7\ud83c\uddfa|\ud83c\uddf0\ud83c\uddf7|\ud83c\uddef\ud83c\uddf5|\ud83c\uddee\ud83c\uddf9|\ud83c\uddec\ud83c\udde7|\ud83c\uddeb\ud83c\uddf7|\ud83c\uddea\ud83c\uddf8|\ud83c\udde9\ud83c\uddea|\u0039\ufe0f?\u20e3|\u0038\ufe0f?\u20e3|\u0037\ufe0f?\u20e3|\u0036\ufe0f?\u20e3|\u0035\ufe0f?\u20e3|\u0034\ufe0f?\u20e3|\u0033\ufe0f?\u20e3|\u0032\ufe0f?\u20e3|\u0031\ufe0f?\u20e3|\u0030\ufe0f?\u20e3|\u0023\ufe0f?\u20e3|\ud83d\udeb3|\ud83d\udeb1|\ud83d\udeb0|\ud83d\udeaf|\ud83d\udeae|\ud83d\udea6|\ud83d\udea3|\ud83d\udea1|\ud83d\udea0|\ud83d\ude9f|\ud83d\ude9e|\ud83d\ude9d|\ud83d\ude9c|\ud83d\ude9b|\ud83d\ude98|\ud83d\ude96|\ud83d\ude94|\ud83d\ude90|\ud83d\ude8e|\ud83d\ude8d|\ud83d\ude8b|\ud83d\ude8a|\ud83d\ude88|\ud83d\ude86|\ud83d\ude82|\ud83d\ude81|\ud83d\ude36|\ud83d\ude34|\ud83d\ude2f|\ud83d\ude2e|\ud83d\ude2c|\ud83d\ude27|\ud83d\ude26|\ud83d\ude1f|\ud83d\ude1b|\ud83d\ude19|\ud83d\ude17|\ud83d\ude15|\ud83d\ude11|\ud83d\ude10|\ud83d\ude0e|\ud83d\ude08|\ud83d\ude07|\ud83d\ude00|\ud83d\udd67|\ud83d\udd66|\ud83d\udd65|\ud83d\udd64|\ud83d\udd63|\ud83d\udd62|\ud83d\udd61|\ud83d\udd60|\ud83d\udd5f|\ud83d\udd5e|\ud83d\udd5d|\ud83d\udd5c|\ud83d\udd2d|\ud83d\udd2c|\ud83d\udd15|\ud83d\udd09|\ud83d\udd08|\ud83d\udd07|\ud83d\udd06|\ud83d\udd05|\ud83d\udd04|\ud83d\udd02|\ud83d\udd01|\ud83d\udd00|\ud83d\udcf5|\ud83d\udcef|\ud83d\udced|\ud83d\udcec|\ud83d\udcb7|\ud83d\udcb6|\ud83d\udcad|\ud83d\udc6d|\ud83d\udc6c|\ud83d\udc65|\ud83d\udc2a|\ud83d\udc16|\ud83d\udc15|\ud83d\udc13|\ud83d\udc10|\ud83d\udc0f|\ud83d\udc0b|\ud83d\udc0a|\ud83d\udc09|\ud83d\udc08|\ud83d\udc07|\ud83d\udc06|\ud83d\udc05|\ud83d\udc04|\ud83d\udc03|\ud83d\udc02|\ud83d\udc01|\ud83d\udc00|\ud83c\udfe4|\ud83c\udfc9|\ud83c\udfc7|\ud83c\udf7c|\ud83c\udf50|\ud83c\udf4b|\ud83c\udf33|\ud83c\udf32|\ud83c\udf1e|\ud83c\udf1d|\ud83c\udf1c|\ud83c\udf1a|\ud83c\udf18|\ud83c\udccf|\ud83c\udd8e|\ud83c\udd91|\ud83c\udd92|\ud83c\udd93|\ud83c\udd94|\ud83c\udd95|\ud83c\udd96|\ud83c\udd97|\ud83c\udd98|\ud83c\udd99|\ud83c\udd9a|\ud83d\udc77|\ud83d\udec5|\ud83d\udec4|\ud83d\udec3|\ud83d\udec2|\ud83d\udec1|\ud83d\udebf|\ud83d\udeb8|\ud83d\udeb7|\ud83d\udeb5|\ud83c\ude01|\ud83c\ude32|\ud83c\ude33|\ud83c\ude34|\ud83c\ude35|\ud83c\ude36|\ud83c\ude38|\ud83c\ude39|\ud83c\ude3a|\ud83c\ude50|\ud83c\ude51|\ud83c\udf00|\ud83c\udf01|\ud83c\udf02|\ud83c\udf03|\ud83c\udf04|\ud83c\udf05|\ud83c\udf06|\ud83c\udf07|\ud83c\udf08|\ud83c\udf09|\ud83c\udf0a|\ud83c\udf0b|\ud83c\udf0c|\ud83c\udf0f|\ud83c\udf11|\ud83c\udf13|\ud83c\udf14|\ud83c\udf15|\ud83c\udf19|\ud83c\udf1b|\ud83c\udf1f|\ud83c\udf20|\ud83c\udf30|\ud83c\udf31|\ud83c\udf34|\ud83c\udf35|\ud83c\udf37|\ud83c\udf38|\ud83c\udf39|\ud83c\udf3a|\ud83c\udf3b|\ud83c\udf3c|\ud83c\udf3d|\ud83c\udf3e|\ud83c\udf3f|\ud83c\udf40|\ud83c\udf41|\ud83c\udf42|\ud83c\udf43|\ud83c\udf44|\ud83c\udf45|\ud83c\udf46|\ud83c\udf47|\ud83c\udf48|\ud83c\udf49|\ud83c\udf4a|\ud83c\udf4c|\ud83c\udf4d|\ud83c\udf4e|\ud83c\udf4f|\ud83c\udf51|\ud83c\udf52|\ud83c\udf53|\ud83c\udf54|\ud83c\udf55|\ud83c\udf56|\ud83c\udf57|\ud83c\udf58|\ud83c\udf59|\ud83c\udf5a|\ud83c\udf5b|\ud83c\udf5c|\ud83c\udf5d|\ud83c\udf5e|\ud83c\udf5f|\ud83c\udf60|\ud83c\udf61|\ud83c\udf62|\ud83c\udf63|\ud83c\udf64|\ud83c\udf65|\ud83c\udf66|\ud83c\udf67|\ud83c\udf68|\ud83c\udf69|\ud83c\udf6a|\ud83c\udf6b|\ud83c\udf6c|\ud83c\udf6d|\ud83c\udf6e|\ud83c\udf6f|\ud83c\udf70|\ud83c\udf71|\ud83c\udf72|\ud83c\udf73|\ud83c\udf74|\ud83c\udf75|\ud83c\udf76|\ud83c\udf77|\ud83c\udf78|\ud83c\udf79|\ud83c\udf7a|\ud83c\udf7b|\ud83c\udf80|\ud83c\udf81|\ud83c\udf82|\ud83c\udf83|\ud83c\udf84|\ud83c\udf85|\ud83c\udf86|\ud83c\udf87|\ud83c\udf88|\ud83c\udf89|\ud83c\udf8a|\ud83c\udf8b|\ud83c\udf8c|\ud83c\udf8d|\ud83c\udf8e|\ud83c\udf8f|\ud83c\udf90|\ud83c\udf91|\ud83c\udf92|\ud83c\udf93|\ud83c\udfa0|\ud83c\udfa1|\ud83c\udfa2|\ud83c\udfa3|\ud83c\udfa4|\ud83c\udfa5|\ud83c\udfa6|\ud83c\udfa7|\ud83c\udfa8|\ud83c\udfa9|\ud83c\udfaa|\ud83c\udfab|\ud83c\udfac|\ud83c\udfad|\ud83c\udfae|\ud83c\udfaf|\ud83c\udfb0|\ud83c\udfb1|\ud83c\udfb2|\ud83c\udfb3|\ud83c\udfb4|\ud83c\udfb5|\ud83c\udfb6|\ud83c\udfb7|\ud83c\udfb8|\ud83c\udfb9|\ud83c\udfba|\ud83c\udfbb|\ud83c\udfbc|\ud83c\udfbd|\ud83c\udfbe|\ud83c\udfbf|\ud83c\udfc0|\ud83c\udfc1|\ud83c\udfc2|\ud83c\udfc3|\ud83c\udfc4|\ud83c\udfc6|\ud83c\udfc8|\ud83c\udfca|\ud83c\udfe0|\ud83c\udfe1|\ud83c\udfe2|\ud83c\udfe3|\ud83c\udfe5|\ud83c\udfe6|\ud83c\udfe7|\ud83c\udfe8|\ud83c\udfe9|\ud83c\udfea|\ud83c\udfeb|\ud83c\udfec|\ud83c\udfed|\ud83c\udfee|\ud83c\udfef|\ud83c\udff0|\ud83d\udc0c|\ud83d\udc0d|\ud83d\udc0e|\ud83d\udc11|\ud83d\udc12|\ud83d\udc14|\ud83d\udc17|\ud83d\udc18|\ud83d\udc19|\ud83d\udc1a|\ud83d\udc1b|\ud83d\udc1c|\ud83d\udc1d|\ud83d\udc1e|\ud83d\udc1f|\ud83d\udc20|\ud83d\udc21|\ud83d\udc22|\ud83d\udc23|\ud83d\udc24|\ud83d\udc25|\ud83d\udc26|\ud83d\udc27|\ud83d\udc28|\ud83d\udc29|\ud83d\udc2b|\ud83d\udc2c|\ud83d\udc2d|\ud83d\udc2e|\ud83d\udc2f|\ud83d\udc30|\ud83d\udc31|\ud83d\udc32|\ud83d\udc33|\ud83d\udc34|\ud83d\udc35|\ud83d\udc36|\ud83d\udc37|\ud83d\udc38|\ud83d\udc39|\ud83d\udc3a|\ud83d\udc3b|\ud83d\udc3c|\ud83d\udc3d|\ud83d\udc3e|\ud83d\udc40|\ud83d\udc42|\ud83d\udc43|\ud83d\udc44|\ud83d\udc45|\ud83d\udc46|\ud83d\udc47|\ud83d\udc48|\ud83d\udc49|\ud83d\udc4a|\ud83d\udc4b|\ud83d\udc4c|\ud83d\udc4d|\ud83d\udc4e|\ud83d\udc4f|\ud83d\udc50|\ud83d\udc51|\ud83d\udc52|\ud83d\udc53|\ud83d\udc54|\ud83d\udc55|\ud83d\udc56|\ud83d\udc57|\ud83d\udc58|\ud83d\udc59|\ud83d\udc5a|\ud83d\udc5b|\ud83d\udc5c|\ud83d\udc5d|\ud83d\udc5e|\ud83d\udc5f|\ud83d\udc60|\ud83d\udc61|\ud83d\udc62|\ud83d\udc63|\ud83d\udc64|\ud83d\udc66|\ud83d\udc67|\ud83d\udc68|\ud83d\udc69|\ud83d\udc6a|\ud83d\udc6b|\ud83d\udc6e|\ud83d\udc6f|\ud83d\udc70|\ud83d\udc71|\ud83d\udc72|\ud83d\udc73|\ud83d\udc74|\ud83d\udc75|\ud83d\udc76|\ud83d\udeb4|\ud83d\udc78|\ud83d\udc79|\ud83d\udc7a|\ud83d\udc7b|\ud83d\udc7c|\ud83d\udc7d|\ud83d\udc7e|\ud83d\udc7f|\ud83d\udc80|\ud83d\udc81|\ud83d\udc82|\ud83d\udc83|\ud83d\udc84|\ud83d\udc85|\ud83d\udc86|\ud83d\udc87|\ud83d\udc88|\ud83d\udc89|\ud83d\udc8a|\ud83d\udc8b|\ud83d\udc8c|\ud83d\udc8d|\ud83d\udc8e|\ud83d\udc8f|\ud83d\udc90|\ud83d\udc91|\ud83d\udc92|\ud83d\udc93|\ud83d\udc94|\ud83d\udc95|\ud83d\udc96|\ud83d\udc97|\ud83d\udc98|\ud83d\udc99|\ud83d\udc9a|\ud83d\udc9b|\ud83d\udc9c|\ud83d\udc9d|\ud83d\udc9e|\ud83d\udc9f|\ud83d\udca0|\ud83d\udca1|\ud83d\udca2|\ud83d\udca3|\ud83d\udca4|\ud83d\udca5|\ud83d\udca6|\ud83d\udca7|\ud83d\udca8|\ud83d\udca9|\ud83d\udcaa|\ud83d\udcab|\ud83d\udcac|\ud83d\udcae|\ud83d\udcaf|\ud83d\udcb0|\ud83d\udcb1|\ud83d\udcb2|\ud83d\udcb3|\ud83d\udcb4|\ud83d\udcb5|\ud83d\udcb8|\ud83d\udcb9|\ud83d\udcba|\ud83d\udcbb|\ud83d\udcbc|\ud83d\udcbd|\ud83d\udcbe|\ud83d\udcbf|\ud83d\udcc0|\ud83d\udcc1|\ud83d\udcc2|\ud83d\udcc3|\ud83d\udcc4|\ud83d\udcc5|\ud83d\udcc6|\ud83d\udcc7|\ud83d\udcc8|\ud83d\udcc9|\ud83d\udcca|\ud83d\udccb|\ud83d\udccc|\ud83d\udccd|\ud83d\udcce|\ud83d\udccf|\ud83d\udcd0|\ud83d\udcd1|\ud83d\udcd2|\ud83d\udcd3|\ud83d\udcd4|\ud83d\udcd5|\ud83d\udcd6|\ud83d\udcd7|\ud83d\udcd8|\ud83d\udcd9|\ud83d\udcda|\ud83d\udcdb|\ud83d\udcdc|\ud83d\udcdd|\ud83d\udcde|\ud83d\udcdf|\ud83d\udce0|\ud83d\udce1|\ud83d\udce2|\ud83d\udce3|\ud83d\udce4|\ud83d\udce5|\ud83d\udce6|\ud83d\udce7|\ud83d\udce8|\ud83d\udce9|\ud83d\udcea|\ud83d\udceb|\ud83d\udcee|\ud83d\udcf0|\ud83d\udcf1|\ud83d\udcf2|\ud83d\udcf3|\ud83d\udcf4|\ud83d\udcf6|\ud83d\udcf7|\ud83d\udcf9|\ud83d\udcfa|\ud83d\udcfb|\ud83d\udcfc|\ud83d\udd03|\ud83d\udd0a|\ud83d\udd0b|\ud83d\udd0c|\ud83d\udd0d|\ud83d\udd0e|\ud83d\udd0f|\ud83d\udd10|\ud83d\udd11|\ud83d\udd12|\ud83d\udd13|\ud83d\udd14|\ud83d\udd16|\ud83d\udd17|\ud83d\udd18|\ud83d\udd19|\ud83d\udd1a|\ud83d\udd1b|\ud83d\udd1c|\ud83d\udd1d|\ud83d\udd1e|\ud83d\udd1f|\ud83d\udd20|\ud83d\udd21|\ud83d\udd22|\ud83d\udd23|\ud83d\udd24|\ud83d\udd25|\ud83d\udd26|\ud83d\udd27|\ud83d\udd28|\ud83d\udd29|\ud83d\udd2a|\ud83d\udd2b|\ud83d\udd2e|\ud83d\udd2f|\ud83d\udd30|\ud83d\udd31|\ud83d\udd32|\ud83d\udd33|\ud83d\udd34|\ud83d\udd35|\ud83d\udd36|\ud83d\udd37|\ud83d\udd38|\ud83d\udd39|\ud83d\udd3a|\ud83d\udd3b|\ud83d\udd3c|\ud83d\udd3d|\ud83d\udd50|\ud83d\udd51|\ud83d\udd52|\ud83d\udd53|\ud83d\udd54|\ud83d\udd55|\ud83d\udd56|\ud83d\udd57|\ud83d\udd58|\ud83d\udd59|\ud83d\udd5a|\ud83d\udd5b|\ud83d\uddfb|\ud83d\uddfc|\ud83d\uddfd|\ud83d\uddfe|\ud83d\uddff|\ud83d\ude01|\ud83d\ude02|\ud83d\ude03|\ud83d\ude04|\ud83d\ude05|\ud83d\ude06|\ud83d\ude09|\ud83d\ude0a|\ud83d\ude0b|\ud83d\ude0c|\ud83d\ude0d|\ud83d\ude0f|\ud83d\ude12|\ud83d\ude13|\ud83d\ude14|\ud83d\ude16|\ud83d\ude18|\ud83d\ude1a|\ud83d\ude1c|\ud83d\ude1d|\ud83d\ude1e|\ud83d\ude20|\ud83d\ude21|\ud83d\ude22|\ud83d\ude23|\ud83d\ude24|\ud83d\ude25|\ud83d\ude28|\ud83d\ude29|\ud83d\ude2a|\ud83d\ude2b|\ud83d\ude2d|\ud83d\ude30|\ud83d\ude31|\ud83d\ude32|\ud83d\ude33|\ud83d\ude35|\ud83d\ude37|\ud83d\ude38|\ud83d\ude39|\ud83d\ude3a|\ud83d\ude3b|\ud83d\ude3c|\ud83d\ude3d|\ud83d\ude3e|\ud83d\ude3f|\ud83d\ude40|\ud83d\ude45|\ud83d\ude46|\ud83d\ude47|\ud83d\ude48|\ud83d\ude49|\ud83d\ude4a|\ud83d\ude4b|\ud83d\ude4c|\ud83d\ude4d|\ud83d\ude4e|\ud83d\ude4f|\ud83d\ude80|\ud83d\ude83|\ud83d\ude84|\ud83d\ude85|\ud83d\ude87|\ud83d\ude89|\ud83d\ude8c|\ud83d\ude8f|\ud83d\ude91|\ud83d\ude92|\ud83d\ude93|\ud83d\ude95|\ud83d\ude97|\ud83d\ude99|\ud83d\ude9a|\ud83d\udea2|\ud83d\udea4|\ud83d\udea5|\ud83d\udea7|\ud83d\udea8|\ud83d\udea9|\ud83d\udeaa|\ud83d\udeab|\ud83d\udeac|\ud83d\udead|\ud83d\udeb2|\ud83d\udeb6|\ud83d\udeb9|\ud83d\udeba|\ud83d\udebb|\ud83d\udebc|\ud83d\udebd|\ud83d\udebe|\ud83d\udec0|\ud83c\udde6|\ud83c\udde7|\ud83c\udde8|\ud83c\udde9|\ud83c\uddea|\ud83c\uddeb|\ud83c\uddec|\ud83c\udded|\ud83c\uddee|\ud83c\uddef|\ud83c\uddf0|\ud83c\uddf1|\ud83c\uddf2|\ud83c\uddf3|\ud83c\uddf4|\ud83c\uddf5|\ud83c\uddf6|\ud83c\uddf7|\ud83c\uddf8|\ud83c\uddf9|\ud83c\uddfa|\ud83c\uddfb|\ud83c\uddfc|\ud83c\uddfd|\ud83c\uddfe|\ud83c\uddff|\ud83c\udf0d|\ud83c\udf0e|\ud83c\udf10|\ud83c\udf12|\ud83c\udf16|\ud83c\udf17|\ue50a|\u27b0|\u2797|\u2796|\u2795|\u2755|\u2754|\u2753|\u274e|\u274c|\u2728|\u270b|\u270a|\u2705|\u26ce|\u23f3|\u23f0|\u23ec|\u23eb|\u23ea|\u23e9|\u27bf|\u00a9|\u00ae)|(?:(?:\ud83c\udc04|\ud83c\udd70|\ud83c\udd71|\ud83c\udd7e|\ud83c\udd7f|\ud83c\ude02|\ud83c\ude1a|\ud83c\ude2f|\ud83c\ude37|\u3299|\u303d|\u3030|\u2b55|\u2b50|\u2b1c|\u2b1b|\u2b07|\u2b06|\u2b05|\u2935|\u2934|\u27a1|\u2764|\u2757|\u2747|\u2744|\u2734|\u2733|\u2716|\u2714|\u2712|\u270f|\u270c|\u2709|\u2708|\u2702|\u26fd|\u26fa|\u26f5|\u26f3|\u26f2|\u26ea|\u26d4|\u26c5|\u26c4|\u26be|\u26bd|\u26ab|\u26aa|\u26a1|\u26a0|\u2693|\u267f|\u267b|\u3297|\u2666|\u2665|\u2663|\u2660|\u2653|\u2652|\u2651|\u2650|\u264f|\u264e|\u264d|\u264c|\u264b|\u264a|\u2649|\u2648|\u263a|\u261d|\u2615|\u2614|\u2611|\u260e|\u2601|\u2600|\u25fe|\u25fd|\u25fc|\u25fb|\u25c0|\u25b6|\u25ab|\u25aa|\u24c2|\u231b|\u231a|\u21aa|\u21a9|\u2199|\u2198|\u2197|\u2196|\u2195|\u2194|\u2139|\u2122|\u2049|\u203c|\u2668)([\uFE0E\uFE0F]?)))/g; + +const RE_EMOTICON = { + slightly_smiling_face: /(^|\s)(:-?\))(?=$|\s)/g, // :) + wink: /(^|\s)(;-?\))(?=$|\s)/g, // ;) + open_mouth: /(^|\s)(:o)(?=$|\s)/gi, // :o + scream: /(^|\s)(:-o)(?=$|\s)/gi, // :-o + smirk: /(^|\s)(:-?])(?=$|\s)/g, // :] + smile: /(^|\s)(:-?d)(?=$|\s)/gi, // :D + stuck_out_tongue_closed_eyes: /(^|\s)(x-d)(?=$|\s)/gi, // x-d + stuck_out_tongue: /(^|\s)(:-?p)(?=$|\s)/gi, // :p + rage: /(^|\s)(:-?[[@])(?=$|\s)/g, // :@ + slightly_frowning_face: /(^|\s)(:-?\()(?=$|\s)/g, // :( + cry: /(^|\s)(:['’]-?\(|:'\(|:'\()(?=$|\s)/g, // :`( + confused: /(^|\s)(:-?\/)(?=$|\s)/g, // :/ + confounded: /(^|\s)(:-?s)(?=$|\s)/gi, // :s + neutral_face: /(^|\s)(:-?\|)(?=$|\s)/g, // :| + flushed: /(^|\s)(:-?\$)(?=$|\s)/g, // :$ + mask: /(^|\s)(:-x)(?=$|\s)/gi, // :-x + heart: /(^|\s)(<3|<3)(?=$|\s)/g, // <3 + broken_heart: /(^|\s)(<\/3|</3)(?=$|\s)/g, // m && m.length > 0); + + if (chunks.length === 0) { + return {isEmojiOnly: false, shouldRenderJumboEmoji: false}; + } + + let emojiCount = 0; + for (const chunk of chunks) { + const matchNamedEmoji = chunk.match(RE_NAMED_EMOJI); + if (matchNamedEmoji && matchNamedEmoji[0] === chunk) { + const emojiName = chunk.substring(1, chunk.length - 1); + if (EmojiIndicesByAlias.has(emojiName)) { + emojiCount++; + continue; + } + + if (customEmojis && customEmojis.has(emojiName)) { + emojiCount++; + continue; + } + } + + const matchUnicodeEmoji = chunk.match(RE_UNICODE_EMOJI); + if (matchUnicodeEmoji && matchUnicodeEmoji.join('') === chunk) { + emojiCount += matchUnicodeEmoji.length; + continue; + } + + if (isEmoticon(chunk)) { + emojiCount++; + continue; + } + + return {isEmojiOnly: false, shouldRenderJumboEmoji: false}; + } + + return { + isEmojiOnly: true, + shouldRenderJumboEmoji: emojiCount > 0 && emojiCount <= MAX_JUMBO_EMOJIS, + }; +} diff --git a/app/utils/emoji_utils.test.js b/app/utils/emoji_utils.test.js new file mode 100644 index 000000000..8f2712f53 --- /dev/null +++ b/app/utils/emoji_utils.test.js @@ -0,0 +1,220 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {hasEmojisOnly} from './emoji_utils'; + +describe('hasEmojisOnly with named emojis', () => { + const testCases = [{ + name: 'Named emoji', + message: ':smile:', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Valid custom emoji', + message: ':valid_custom:', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Invalid custom emoji', + message: ':invalid_custom:', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'Named emojis', + message: ':smile: :heart:', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Named emojis with white spaces', + message: ' :smile: :heart: ', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Named emojis with potential custom emojis', + message: ':smile: :heart: :valid_custom: :one:', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Named emojis of 4 plus invalid :exceed: named emoji', + message: ':smile: :heart: :valid_custom: :one: :exceed:', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'Named emojis greater than max of 4', + message: ':smile: :heart: :valid_custom: :one: :heart:', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: false}, + }, { + name: 'Not valid named emoji', + message: 'smile', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'Not valid named emoji', + message: 'smile:', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'Not valid named emoji', + message: ':smile', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'Not valid named emoji', + message: ':smile::', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'Not valid named emoji', + message: '::smile:', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'Mixed valid and invalid named emojis', + message: ' :smile: invalid :heart: ', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }]; + + const customEmojis = new Map([['valid_custom', 0]]); + for (const testCase of testCases) { + it(`${testCase.name} - ${testCase.message}`, () => { + expect(hasEmojisOnly(testCase.message, customEmojis)).toEqual(testCase.expected); + }); + } +}); + +describe('hasEmojisOnly with unicode emojis', () => { + const testCases = [{ + name: 'Unicode emoji', + message: '👍', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Unicode emoji', + message: '🙌', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Unicode emojis', + message: '🙌 👏', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Unicode emojis without whitespace in between', + message: '🙌👏', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Unicode emojis with white spaces', + message: ' 😣 😖 ', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: '4 unicode emojis', + message: '😣 😖 🙌 👏', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Unicode emojis greater than max of 4', + message: '😣 😖 🙌 👏 💩', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: false}, + }, { + name: 'Unicode emoji', + message: '\ud83d\udd5f', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Not valid unicode emoji', + message: '\ud83d\udd5fnotvalid', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'Mixed valid and invalid unicode emojis', + message: '😣 invalid 😖', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }]; + + const customEmojis = new Map(); + for (const testCase of testCases) { + it(`${testCase.name} - ${testCase.message}`, () => { + expect(hasEmojisOnly(testCase.message, customEmojis)).toEqual(testCase.expected); + }); + } +}); + +describe('hasEmojisOnly with emoticons', () => { + const testCases = [{ + name: 'Emoticon', + message: ':)', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Emoticon', + message: ':+1:', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Emoticons', + message: ':) :-o', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Emoticons with white spaces', + message: ' :) :-o ', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: '4 emoticons', + message: ':) :-o :+1: :|', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'Emoticons greater than max of 4', + message: ':) :-o :+1: :| :p', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: false}, + }, { + name: 'Not valid emoticon', + message: ':|:p', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'Not valid named emoji', + message: ':) :-o :+1::|', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'Mixed valid and invalid named emojis', + message: ':) :-o invalid :|', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }]; + + const customEmojis = new Map(); + for (const testCase of testCases) { + it(`${testCase.name} - ${testCase.message}`, () => { + expect(hasEmojisOnly(testCase.message, customEmojis)).toEqual(testCase.expected); + }); + } +}); + +describe('hasEmojisOnly with empty and mixed emojis', () => { + const testCases = [{ + name: 'not with empty message', + message: '', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'not with empty message', + message: ' ', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'not with no emoji pattern', + message: 'smile', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'with invalid custom emoji', + message: ':smile: :) :invalid_custom:', + expected: {isEmojiOnly: false, shouldRenderJumboEmoji: false}, + }, { + name: 'with named emoji and emoticon', + message: ':smile: :) :valid_custom:', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'with unicode emoji and emoticon', + message: '👍 :)', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'with named and unicode emojis', + message: ':smile: 👍', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'with named & unicode emojis and emoticon', + message: ':smile: 👍 :)', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'with 4 named & unicode emojis and emoticon', + message: ':smile: 👍 :) :heart:', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true}, + }, { + name: 'with named & unicode emojis and emoticon greater than max of 4', + message: ':smile: 👍 :) :heart: 👏', + expected: {isEmojiOnly: true, shouldRenderJumboEmoji: false}, + }]; + + const customEmojis = new Map([['valid_custom', 0]]); + for (const testCase of testCases) { + it(`${testCase.name} - ${testCase.message}`, () => { + expect(hasEmojisOnly(testCase.message, customEmojis)).toEqual(testCase.expected); + }); + } +});