diff --git a/app/components/at_mention/__snapshots__/at_mention.test.js.snap b/app/components/at_mention/__snapshots__/at_mention.test.js.snap index 7613e1e18..ae4e354a1 100644 --- a/app/components/at_mention/__snapshots__/at_mention.test.js.snap +++ b/app/components/at_mention/__snapshots__/at_mention.test.js.snap @@ -7,7 +7,6 @@ exports[`AtMention should match snapshot, no highlight 1`] = ` diff --git a/app/components/at_mention/at_mention.js b/app/components/at_mention/at_mention.js index 667597bd5..08753e193 100644 --- a/app/components/at_mention/at_mention.js +++ b/app/components/at_mention/at_mention.js @@ -142,40 +142,45 @@ export default class AtMention extends React.PureComponent { const {isSearchResult, mentionName, mentionStyle, onPostPress, teammateNameDisplay, textStyle, mentionKeys} = this.props; const {user} = this.state; const {backgroundColor, ...styleText} = StyleSheet.flatten(textStyle); + const mentionTextStyle = []; + let canPress = false; let highlighted; + let isMention = false; let mention; + let onLongPress; + let onPress; let suffix; let suffixElement; if (user?.username) { suffix = this.props.mentionName.substring(user.username.length); - highlighted = mentionKeys.some((item) => item.key === user.username); + highlighted = mentionKeys.some((item) => item.key.includes(user.username)); mention = displayUsername(user, teammateNameDisplay); + isMention = true; canPress = true; } else { const group = this.getGroupFromMentionName(); if (group.allow_reference) { highlighted = mentionKeys.some((item) => item.key === group.name); + isMention = true; mention = group.name; suffix = this.props.mentionName.substring(group.name.length); } else { const pattern = new RegExp(/\b(all|channel|here)(?:\.\B|_\b|\b)/, 'i'); const mentionMatch = pattern.exec(mentionName); + highlighted = true; if (mentionMatch) { - highlighted = false; mention = mentionMatch.length > 1 ? mentionMatch[1] : mentionMatch[0]; suffix = mentionName.replace(mention, ''); + isMention = true; } else { - highlighted = true; mention = mentionName; } } } - let onPress; - let onLongPress; if (canPress) { onLongPress = this.handleLongPress; onPress = isSearchResult ? onPostPress : this.goToUserProfile; @@ -190,13 +195,21 @@ export default class AtMention extends React.PureComponent { ); } + if (isMention) { + mentionTextStyle.push(mentionStyle); + } + + if (highlighted) { + mentionTextStyle.push({backgroundColor}); + } + return ( - + {'@' + mention} {suffixElement}