diff --git a/pontoon/base/templatetags/helpers.py b/pontoon/base/templatetags/helpers.py index 61f6233861..be06a07f9a 100644 --- a/pontoon/base/templatetags/helpers.py +++ b/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,24 @@ 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 = html.escape(text) + + for p in placeables: + escaped_p = html.escape(p) + escaped = escaped.replace( + escaped_p, + f'{escaped_p}', + ) + + return markupsafe.Markup(escaped) + + @library.filter def to_json(value): return json.dumps(value, cls=DjangoJSONEncoder) diff --git a/pontoon/teams/static/css/translation_memory.css b/pontoon/teams/static/css/translation_memory.css index c53fbc5e42..ff75fba3cb 100644 --- a/pontoon/teams/static/css/translation_memory.css +++ b/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; diff --git a/pontoon/teams/templates/teams/widgets/translation_memory_entries.html b/pontoon/teams/templates/teams/widgets/translation_memory_entries.html index ecc6785b68..a18ae9972c 100644 --- a/pontoon/teams/templates/teams/widgets/translation_memory_entries.html +++ b/pontoon/teams/templates/teams/widgets/translation_memory_entries.html @@ -13,11 +13,11 @@ {% for entry in tm_entries %} - {{ linkify(entry.source|highlight_matches(search_query), entry.entity_ids) }} + {{ linkify(entry.source|highlight_placeables|highlight_matches(search_query), entry.entity_ids) }}
- {{ linkify(entry.target|highlight_matches(search_query), entry.entity_ids) }} + {{ linkify(entry.source|highlight_placeables|highlight_matches(search_query), entry.entity_ids) }}