Highlight self-mentions in messages

Signed-off-by: Nikola Forró <nforro@redhat.com>

webroot/js/message.js

@@ -35,11 +35,18 @@ class Message {
 				target: '_blank'
 			}
 		});
-		return addNewlines(linked);
+		const highlighted = this.highlightUsername(linked);
+		return addNewlines(highlighted);
 	}
 	userColor() {
 		return messageBubbleColorForString(this.author);
 	}
+
+	highlightUsername(message) {
+		const username = document.getElementById('self-message-author').value;
+		const pattern = new RegExp('@?' + username.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi');
+		return message.replace(pattern, '<span class="highlighted">$&</span>');
+	}
 }
 
 

webroot/styles/layout.css

@@ -624,6 +624,11 @@ h2 {
   border-radius: 15px;
 }
 
+.message-text .highlighted {
+  color: orange;
+  font-weight: bold;
+}
+
 .message-text code {
   background-color:darkslategrey;
   padding: 3px;