Highlight placeables in the Translation Memory Tab (mozilla#4061)

* Fixes mozilla#3445

Highlight placeables in the Translation Memory Tab

* Running make ruff

* Fixing conflict from search and placeable highlight

* Make the background of the placeable more darker

* Fixing placeable and search highlight conflict

Author: MundiaNderi

pontoon/base/templatetags/helpers.py

@@ -24,6 +24,7 @@
 from django.utils.http import url_has_allowed_host_and_scheme
 from django.utils.safestring import mark_safe
 
+from pontoon.base.placeables import get_placeables
 from pontoon.base.simple_preview import get_simple_preview
 
 
@@ -86,6 +87,25 @@ def full_static(path):
     return urljoin(settings.SITE_URL, static(path))
 
 
+@library.filter
+def highlight_placeables(text):
+    if not text:
+        return text
+
+    placeables = get_placeables(text)
+
+    escaped = str(text) if isinstance(text, markupsafe.Markup) else html.escape(text)
+
+    for p in sorted(placeables, key=len, reverse=True):
+        escaped_p = html.escape(p)
+        escaped = escaped.replace(
+            escaped_p,
+            f'<mark class="placeable" data-match="{escaped_p}">{escaped_p}</mark>',
+        )
+
+    return markupsafe.Markup(escaped)
+
+
 @library.filter
 def to_json(value):
     return json.dumps(value, cls=DjangoJSONEncoder)
@@ -303,7 +323,11 @@ def highlight_matches(
     if not search_query:
         return text
 
-    escaped_text = escape(text)
+    if isinstance(text, markupsafe.Markup):
+        escaped_text = str(text)
+    else:
+        escaped_text = escape(text)
+
     flags = 0 if match_case_enabled else re.IGNORECASE
 
     if advanced:

pontoon/teams/static/css/translation_memory.css

@@ -123,6 +123,16 @@
             border-radius: 3px;
           }
 
+          mark.placeable {
+            background: var(--dark-grey-2);
+            border: 1px solid var(--light-grey-1);
+            border-radius: 2px;
+            color: var(--light-grey-6);
+            font-style: normal;
+            font-weight: normal;
+            margin: 0 1px;
+          }
+
           .empty {
             border: 1px solid var(--main-border-1);
             border-radius: 3px;

pontoon/teams/templates/teams/widgets/translation_memory_entries.html

@@ -13,11 +13,11 @@
 {% for entry in tm_entries %}
   <tr data-ids="{{ entry.ids }}">
     <td class="source text">
-      {{ linkify(entry.source|highlight_matches(search_query), entry.entity_ids) }}
+      {{ linkify(entry.source|highlight_placeables|highlight_matches(search_query), entry.entity_ids) }}
     </td>
     <td class="target text">
       <div class="content-wrapper">
-        {{ linkify(entry.target|highlight_matches(search_query), entry.entity_ids) }}
+        {{ linkify(entry.target|highlight_placeables|highlight_matches(search_query), entry.entity_ids) }}
       </div>
       <textarea>{{ entry.target }}</textarea>
     </td>