diff --git a/app/components/emoji/index.js b/app/components/emoji/index.js index 5ed36dfc4..c821839cd 100644 --- a/app/components/emoji/index.js +++ b/app/components/emoji/index.js @@ -10,6 +10,7 @@ import {Client4} from 'mattermost-redux/client'; import {isMinimumServerVersion} from 'mattermost-redux/utils/helpers'; import {EmojiIndicesByAlias, Emojis} from 'app/utils/emojis'; +import {doesMatchNamedEmoji} from 'app/utils/emoji_utils'; import Emoji from './emoji'; @@ -29,6 +30,7 @@ function mapStateToProps(state, ownProps) { isCustomEmoji = true; } else { displayTextOnly = state.entities.emojis.nonExistentEmoji.has(emojiName) || + (doesMatchNamedEmoji(`:${emojiName}:`) && !customEmojis.has(emojiName)) || getConfig(state).EnableCustomEmoji !== 'true' || getCurrentUserId(state) === '' || !isMinimumServerVersion(Client4.getServerVersion(), 4, 7); diff --git a/app/utils/emoji_utils.js b/app/utils/emoji_utils.js index 66ce4859f..ec652a908 100644 --- a/app/utils/emoji_utils.js +++ b/app/utils/emoji_utils.js @@ -58,8 +58,7 @@ export function hasEmojisOnly(message, customEmojis) { let emojiCount = 0; for (const chunk of chunks) { - const matchNamedEmoji = chunk.match(RE_NAMED_EMOJI); - if (matchNamedEmoji && matchNamedEmoji[0] === chunk) { + if (doesMatchNamedEmoji(chunk)) { const emojiName = chunk.substring(1, chunk.length - 1); if (EmojiIndicesByAlias.has(emojiName)) { emojiCount++; @@ -91,3 +90,13 @@ export function hasEmojisOnly(message, customEmojis) { shouldRenderJumboEmoji: emojiCount > 0 && emojiCount <= MAX_JUMBO_EMOJIS, }; } + +export function doesMatchNamedEmoji(emojiName) { + const match = emojiName.match(RE_NAMED_EMOJI); + + if (match && match[0] === emojiName) { + return true; + } + + return false; +} diff --git a/app/utils/emoji_utils.test.js b/app/utils/emoji_utils.test.js index 8f2712f53..d76765036 100644 --- a/app/utils/emoji_utils.test.js +++ b/app/utils/emoji_utils.test.js @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import {hasEmojisOnly} from './emoji_utils'; +import {doesMatchNamedEmoji, hasEmojisOnly} from './emoji_utils'; describe('hasEmojisOnly with named emojis', () => { const testCases = [{ @@ -218,3 +218,40 @@ describe('hasEmojisOnly with empty and mixed emojis', () => { }); } }); + +describe('doesMatchNamedEmoji', () => { + const testCases = [{ + input: ':named_emoji:', + output: true, + }, { + input: 'named_emoji', + output: false, + }, { + input: ':named_emoji', + output: false, + }, { + input: 'named_emoji:', + output: false, + }, { + input: '::named_emoji:', + output: false, + }, { + input: 'named emoji', + output: false, + }, { + input: ':named emoji:', + output: false, + }, { + input: ':named_emoji:!', + output: false, + }, { + input: ':named_emoji:aa', + output: false, + }]; + + for (const testCase of testCases) { + it(`test for - ${testCase.input}`, () => { + expect(doesMatchNamedEmoji(testCase.input)).toEqual(testCase.output); + }); + } +});