Update mention links and their ticks

app/discussion/client/lib/messageTypes/discussionMessage.js

@@ -9,7 +9,6 @@ Meteor.startup(function() {
 		message: 'discussion-created',
 		data(message) {
 			return {
-				// channelLink: `<a class="mention-link" data-channel= ${ message.channels[0]._id }  title="">${ TAPi18n.__('discussion') }</a>`,
 				message: `<svg class="rc-icon" aria-hidden="true"><use xlink:href="#icon-discussion"></use></svg> ${ message.msg }`,
 			};
 		},

app/mentions/client/client.js

@@ -1,20 +1,13 @@
 import { Meteor } from 'meteor/meteor';
 import { callbacks } from '../../callbacks';
 import { settings } from '../../settings';
-import Mentions from '../lib/Mentions';
+import { MentionsParser } from '../lib/MentionsParser';
 
-const MentionsClient = new Mentions({
-	pattern() {
-		return settings.get('UTF8_Names_Validation');
-	},
-	useRealName() {
-		return settings.get('UI_Use_Real_Name');
-	},
-	me() {
-		const me = Meteor.user();
-		return me && me.username;
-	},
+const instance = new MentionsParser({
+	pattern: () => settings.get('UTF8_Names_Validation'),
+	useRealName: () => settings.get('UI_Use_Real_Name'),
+	me: () => Meteor.userId() && Meteor.user().username,
 });
 
-callbacks.add('renderMessage', (message) => MentionsClient.parse(message), callbacks.priority.MEDIUM, 'mentions-message');
-callbacks.add('renderMentions', (message) => MentionsClient.parse(message), callbacks.priority.MEDIUM, 'mentions-mentions');
+callbacks.add('renderMessage', (message) => instance.parse(message), callbacks.priority.MEDIUM, 'mentions-message');
+callbacks.add('renderMentions', (message) => instance.parse(message), callbacks.priority.MEDIUM, 'mentions-mentions');

app/mentions/client/index.js

@@ -1 +1,2 @@
 import './client';
+import './mentionLink.css';

app/mentions/client/mentionLink.css

@@ -0,0 +1,27 @@
+.mention-link {
+	padding: 0 6px 2px;
+
+	transition: border-radius 0.3s;
+
+	color: var(--mention-link-text-color) !important;
+
+	border-radius: var(--mention-link-radius);
+
+	background-color: var(--mention-link-background) !important;
+
+	font-weight: 700;
+
+	&:hover {
+		border-radius: var(--border-radius);
+	}
+
+	&--me {
+		color: var(--mention-link-me-text-color) !important;
+		background-color: var(--mention-link-me-background) !important;
+	}
+
+	&--group {
+		color: var(--mention-link-group-text-color) !important;
+		background-color: var(--mention-link-group-background) !important;
+	}
+}

app/mentions/lib/Mentions.js → app/mentions/lib/MentionsParser.js

@@ -1,55 +1,73 @@
-/*
-* Mentions is a named function that will process Mentions
-* @param {Object} message - The message object
-*/
 import s from 'underscore.string';
-export default class {
+
+export class MentionsParser {
 	constructor({ pattern, useRealName, me }) {
 		this.pattern = pattern;
 		this.useRealName = useRealName;
 		this.me = me;
 	}
+
 	set me(m) {
 		this._me = m;
 	}
+
 	get me() {
 		return typeof this._me === 'function' ? this._me() : this._me;
 	}
+
 	set pattern(p) {
 		this._pattern = p;
 	}
+
 	get pattern() {
 		return typeof this._pattern === 'function' ? this._pattern() : this._pattern;
 	}
+
 	set useRealName(s) {
 		this._useRealName = s;
 	}
+
 	get useRealName() {
 		return typeof this._useRealName === 'function' ? this._useRealName() : this._useRealName;
 	}
+
 	get userMentionRegex() {
 		return new RegExp(`(^|\\s|<p>|<br> ?)@(${ this.pattern }(@(${ this.pattern }))?)`, 'gm');
 	}
+
 	get channelMentionRegex() {
 		return new RegExp(`(^|\\s|<p>)#(${ this.pattern }(@(${ this.pattern }))?)`, 'gm');
 	}
-	replaceUsers(str, message, me) {
-		return str.replace(this.userMentionRegex, (match, prefix, username) => {
-			if (['all', 'here'].includes(username)) {
-				return `${ prefix }<a class="mention-link mention-link-me mention-link-all">@${ username }</a>`;
+
+	replaceUsers(msg, { mentions = [], temp }, me) {
+		return msg.replace(this.userMentionRegex, (match, prefix, mention) => {
+			const isGroupMention = ['all', 'here'].includes(mention);
+			const className = [
+				'mention-link',
+				'mention-link--user',
+				mention === 'all' && 'mention-link--all',
+				mention === 'here' && 'mention-link--here',
+				mention === me && 'mention-link--me',
+				isGroupMention && 'mention-link--group',
+			].filter(Boolean).join(' ');
+
+			if (isGroupMention) {
+				return `${ prefix }<a class="${ className }">${ mention }</a>`;
 			}
 
-			const mentionObj = message.mentions && message.mentions.find((m) => m.username === username);
+			const label = (mentions || [])
+				.filter(({ username }) => username === mention)
+				.map(({ name, username }) => (this.useRealName ? name : username))
+				.map((label) => s.escapeHTML(label))[0];
 
-			if (message.temp == null && mentionObj == null) {
+			if (!temp && !label) {
 				return match;
 			}
 
-			const name = this.useRealName && mentionObj && s.escapeHTML(mentionObj.name);
-
-			return `${ prefix }<a class="mention-link ${ username === me ? 'mention-link-me' : '' }" data-username="${ username }" title="${ name ? username : '' }">${ name || `@${ username }` }</a>`;
+			return `${ prefix }<a class="${ className }" data-username="${ mention }" title="${ this.useRealName ? mention : label }">${ label }</a>`;
 		});
 	}
+
 	replaceChannels(str, message) {
 		// since apostrophe escaped contains # we need to unescape it
 		return str.replace(/&#39;/g, '\'').replace(this.channelMentionRegex, (match, prefix, name) => {
@@ -59,15 +77,18 @@ export default class {
 
 			const channel = message.channels && message.channels.find((c) => c.name === name);
 			const roomNameorId = channel ? channel._id : name;
-			return `${ prefix }<a class="mention-link" data-channel="${ roomNameorId }">${ `#${ name }` }</a>`;
+			return `${ prefix }<a class="mention-link mention-link--room" data-channel="${ roomNameorId }">${ `#${ name }` }</a>`;
 		});
 	}
+
 	getUserMentions(str) {
 		return (str.match(this.userMentionRegex) || []).map((match) => match.trim());
 	}
+
 	getChannelMentions(str) {
 		return (str.match(this.channelMentionRegex) || []).map((match) => match.trim());
 	}
+
 	parse(message) {
 		let msg = (message && message.html) || '';
 		if (!msg.trim()) {

app/mentions/server/Mentions.js

@@ -2,9 +2,9 @@
 * Mentions is a named function that will process Mentions
 * @param {Object} message - The message object
 */
-import Mentions from '../lib/Mentions';
+import { MentionsParser } from '../lib/MentionsParser';
 
-export default class MentionsServer extends Mentions {
+export default class MentionsServer extends MentionsParser {
 	constructor(args) {
 		super(args);
 		this.messageMaxAll = args.messageMaxAll;