feat: Add user label to mention

browser/src/control/Control.Mention.ts

@@ -17,6 +17,7 @@
 interface MentionUserData {
 	username: string;
 	profile: string;
+	label?: string;
 }
 
 class Mention extends L.Control.AutoCompletePopup {
@@ -70,20 +71,23 @@ class Mention extends L.Control.AutoCompletePopup {
 		// filterout the users from list according to the text
 		if (text.length > 1) {
 			this.filteredUsers = users.filter((element: any) => {
+				const uid = element.label ?? element.username;
+
 				// case insensitive
-				return element.username.toLowerCase().includes(text.toLowerCase());
+				return uid.toLowerCase().includes(text.toLowerCase());
 			});
 		} else {
 			this.filteredUsers = users;
 		}
 
 		if (this.filteredUsers.length !== 0) {
 			for (const i in this.filteredUsers) {
+				const currentUser = this.filteredUsers[i];
 				const entry = {
-					text: this.filteredUsers[i].username,
+					text: currentUser.label ?? currentUser.username,
 					columns: [
 						{
-							text: this.filteredUsers[i].username,
+							text: currentUser.label ?? currentUser.username,
 						},
 					],
 					row: i.toString(),
@@ -255,19 +259,19 @@ class Mention extends L.Control.AutoCompletePopup {
 
 	getMentionUserData(index: number): MentionUserData {
 		if (index >= this.filteredUsers.length)
-			return { username: '', profile: '' } as MentionUserData;
+			return { username: '', profile: '', label: null } as MentionUserData;
 		return this.filteredUsers[index];
 	}
 
 	private sendHyperlinkUnoCommand(
-		username: string,
+		uid: string,
 		profile: string,
 		replacement: string,
 	) {
 		var command = {
 			'Hyperlink.Text': {
 				type: 'string',
-				value: '@' + username,
+				value: '@' + uid,
 			},
 			'Hyperlink.URL': {
 				type: 'string',
@@ -291,17 +295,26 @@ class Mention extends L.Control.AutoCompletePopup {
 		} else if (eventType === 'select' || eventType === 'activate') {
 			const username = this.filteredUsers[index].username;
 			const profileLink = this.filteredUsers[index].profile;
+			const label = this.filteredUsers[index].label;
 			const replacement = '@' + this.getPartialMention();
 
 			if (comment) {
-				comment.autoCompleteMention(username, profileLink, replacement);
+				comment.autoCompleteMention(
+					label ?? username,
+					profileLink,
+					replacement,
+				);
 			} else {
-				this.sendHyperlinkUnoCommand(username, profileLink, replacement);
+				this.sendHyperlinkUnoCommand(
+					label ?? username,
+					profileLink,
+					replacement,
+				);
 				this.map._textInput._sendText(' ');
 			}
 			this.map.fire('postMessage', {
 				msgId: 'UI_Mention',
-				args: { type: 'selected', username: username },
+				args: { type: 'selected', username: username, label: label },
 			});
 			this.closeMentionPopup(false);
 		} else if (eventType === 'keydown') {