Highlight current user in comments and system notes

2 files changed, 19 insertions, 0 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/highlight_current_user.js b/app/assets/javascripts/behaviors/markdown/highlight_current_user.js
new file mode 100644
index 00000000000..6208b3f0032
--- /dev/null
+++ b/app/assets/javascripts/behaviors/markdown/highlight_current_user.js
@@ -0,0 +1,17 @@
+/**
+ * Highlights the current user in existing elements with a user ID data attribute.
+ *
+ * @param elements DOM elements that represent user mentions
+ */
+export default function highlightCurrentUser(elements) {
+  const currentUserId = gon && gon.current_user_id;
+  if (!currentUserId) {
+    return;
+  }
+
+  elements.forEach(element => {
+    if (parseInt(element.dataset.user, 10) === currentUserId) {
+      element.classList.add('current-user');
+    }
+  });
+}
diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js
index 429455f97ec..a2d4331b6d1 100644
--- a/app/assets/javascripts/behaviors/markdown/render_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 import syntaxHighlight from '~/syntax_highlight';
 import renderMath from './render_math';
 import renderMermaid from './render_mermaid';
+import highlightCurrentUser from './highlight_current_user';
 
 // Render GitLab flavoured Markdown
 //
@@ -11,6 +12,7 @@ $.fn.renderGFM = function renderGFM() {
   syntaxHighlight(this.find('.js-syntax-highlight'));
   renderMath(this.find('.js-render-math'));
   renderMermaid(this.find('.js-render-mermaid'));
+  highlightCurrentUser(this.find('.gfm-project_member').get());
   return this;
 };