feat: add |btn marker to convert TinyMCE links into buttons

Author: zorexsalvo

app/pages/templatetags/__init__.py

@@ -0,0 +1,34 @@
+import re
+
+from django import template
+from django.utils.html import mark_safe
+
+register = template.Library()
+
+
+def _replace_btn_link(match):
+    attrs = match.group(1)
+    text = match.group(2)
+
+    if "|btn" not in text:
+        return match.group(0)
+
+    clean_text = text.replace("|btn", "").strip()
+
+    if "class=" in attrs:
+        attrs = re.sub(r'class=["\']([^"\']*)["\']', r'class="\1 btn btn-primary"', attrs)
+    else:
+        attrs += ' class="btn btn-primary"'
+
+    return f"<a {attrs}>{clean_text}</a>"
+
+
+@register.filter
+def render_buttons(value):
+    """Convert links with |btn marker in their text to button-styled links.
+
+    Usage in TinyMCE: set link text to "Click here|btn"
+    Output: <a href="..." class="btn btn-primary">Click here</a>
+    """
+    result = re.sub(r"<a\s+([^>]+)>([^<]*\|btn[^<]*)</a>", _replace_btn_link, value)
+    return mark_safe(result)

app/pages/templatetags/content_filters.py

@@ -2,6 +2,7 @@
 Announcement modal component. Displays the latest published announcement from the database.
 The modal is dismissible and won't show again until browser session is closed or cache is cleared.
 {% endcomment %}
+{% load content_filters %}
 
 {% if latest_announcement %}
 <dialog id="announcement-modal" class="modal" open>
@@ -11,7 +12,7 @@
         </form>
         <h3 class="font-bold text-2xl mb-4">📢 {{ latest_announcement.title }}</h3>
         <div class="py-4 prose prose-sm max-w-none [&_p]:text-lg [&_p]:pb-4 [&_h1]:text-lg [&_h2]:text-xl">
-            {{ latest_announcement.content|safe }}
+            {{ latest_announcement.content|render_buttons }}
         </div>
     </div>
     <form method="dialog" class="modal-backdrop">