highlight mentions

app/lib/babycode.py

@@ -6,7 +6,7 @@ from pygments.lexers import get_lexer_by_name
 from pygments.util import ClassNotFound as PygmentsClassNotFound
 import re
 
-BABYCODE_VERSION = 10
+BABYCODE_VERSION = 11
 
 
 class BabycodeError(Exception):
@@ -183,7 +183,7 @@ class HTMLRenderer(BabycodeRenderer):
             if mention_data not in self.mentions:
                 self.mentions.append(mention_data)
 
-            return f"<a class='mention{' display' if target_user.has_display_name() else ''}' href='{url_for('users.user_page', username=target_user.username)}' title='@{target_user.username}' data-init='highlightMentions' data-username='{target_user.username}'>{'@' if not target_user.has_display_name() else ''}{target_user.get_readable_name()}</a>"
+            return f"<a class='mention{' display' if target_user.has_display_name() else ''}' href='{url_for('users.user_page', username=target_user.username)}' title='@{target_user.username}' data-r='highlightMentions' data-username='{target_user.username}'>{'@' if not target_user.has_display_name() else ''}{target_user.get_readable_name()}</a>"
 
     def render(self, ast):
         out = super().render(ast)

app/routes/api.py

@@ -19,3 +19,15 @@ def babycode_preview():
         return {'error': 'banned_tags field is invalid type'}, 400
     rendered = babycode_to_html(markup, banned_tags).result
     return {'html': rendered}
+
+@bp.get('/whoami/')
+def whoami():
+    user = get_active_user()
+    if not user:
+        return {}
+
+    return {
+        'id': user.id,
+        'username': user.username,
+        'display_name': user.display_name,
+    }

data/static/js/bits/thread.js

@@ -1,11 +1,13 @@
 export const b = {
-  init: 'activatePostImages',
+  init: 'activatePostImages getUserData',
 }
 
 const POST_IMAGES_SELECTOR = 'img.post-image:not(aside img.post-image)'
+const WHOAMI_ENDPOINT = '/api/whoami/'
 
 let images = [];
 let currentIndex = 0;
+let currentUser = null;
 
 export function activatePostImages(_, __, ___) {
   const images = document.querySelectorAll(POST_IMAGES_SELECTOR);
@@ -62,3 +64,16 @@ export function lightboxPrevious(_, __, ___) {
   }
   b.trigger('showLightbox');
 }
+
+export async function getUserData(_, __, ___) {
+  currentUser = await b.getData(WHOAMI_ENDPOINT);
+  b.trigger('highlightMentions');
+}
+
+export function highlightMentions(_, __, el) {
+  if (!el) return;
+
+  if (el.dataset.username === currentUser.username) {
+    el.classList.add('me');
+  }
+}