[IMPROVE] New sidebar item badges, mention links, and 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/MentionsParser.js

@@ -0,0 +1,102 @@
+import s from 'underscore.string';
+
+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 = (msg, { mentions, temp }, me) => 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 label = temp ?
+				mention && s.escapeHTML(mention) :
+				(mentions || [])
+					.filter(({ username }) => username === mention)
+					.map(({ name, username }) => (this.useRealName ? name : username))
+					.map((label) => label && s.escapeHTML(label))[0];
+
+			if (!label) {
+				return match;
+			}
+
+			return `${ prefix }<a class="${ className }" data-username="${ mention }" title="${ this.useRealName ? mention : label }">${ label }</a>`;
+		})
+
+	replaceChannels = (msg, { temp, channels }) => msg
+		.replace(/&#39;/g, '\'')
+		.replace(this.channelMentionRegex, (match, prefix, mention) => {
+			if (!temp && !(channels && channels.find((c) => c.name === mention))) {
+				return match;
+			}
+
+			const channel = channels && channels.find(({ name }) => name === mention);
+			const reference = channel ? channel._id : mention;
+			return `${ prefix }<a class="mention-link mention-link--room" data-channel="${ reference }">${ `#${ mention }` }</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()) {
+			return message;
+		}
+		msg = this.replaceUsers(msg, message, this.me);
+		msg = this.replaceChannels(msg, message, this.me);
+		message.html = msg;
+		return message;
+	}
+}

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;