Translate: Highlight placeables in translation editor

Using CodeMirror overlay to highlight placeables from the source string.

Fixes WeblateOrg#3504

docs/changes.rst

@@ -11,6 +11,7 @@ Not yet released.
 * Added addon to remove blank strings from translation files.
 * The CodeMirror editor is now used for translations.
 * Syntax highlighting in translation editor for XML, HTML, Markdown and reStructuredText.
+* Highlight placeables in translation editor.
 
 Weblate 4.3.2
 -------------

weblate/static/editor/base.js

@@ -81,7 +81,6 @@ WLT.Editor = (function () {
       if (textarea.CodeMirror) {
         return;
       }
-      console.log("Mode", textarea.getAttribute("data-mode"));
       let codemirror = CodeMirror.weblateEditor(
         textarea,
         textarea.getAttribute("data-mode")
@@ -95,6 +94,17 @@ WLT.Editor = (function () {
           stream.skipTo(" ") || stream.skipToEnd();
         },
       });
+      let placeables = textarea.getAttribute("data-placeables");
+      if (placeables) {
+        codemirror.addOverlay({
+          token: function (stream) {
+            if (stream.match(placeables)) {
+              return "placeable";
+            }
+            stream.next();
+          },
+        });
+      }
 
       codemirror.on("change", () => {
         WLT.Utils.markTranslated($(textarea).closest("form"));

weblate/static/style-bootstrap.css

@@ -225,9 +225,12 @@ div.CodeMirror.cm-s-default {
   font-family: inherit;
 }
 
+.cm-placeable,
 .hlcheck {
   border: 1px dotted #aeb7cf;
   background-color: #e0eaf1;
+}
+.hlcheck {
   display: inline-block;
   cursor: pointer;
 }

weblate/trans/forms.py

@@ -19,6 +19,7 @@
 
 import copy
 import json
+import re
 from datetime import date, datetime, timedelta
 from typing import Dict, List
 
@@ -45,6 +46,7 @@
 
 from weblate.auth.models import User
 from weblate.checks.models import CHECKS
+from weblate.checks.utils import highlight_string
 from weblate.formats.models import EXPORTERS, FILE_FORMATS
 from weblate.lang.models import Language
 from weblate.machinery import MACHINE_TRANSLATION_SERVICES
@@ -288,6 +290,7 @@ def render(self, name, value, attrs=None, renderer=None, **kwargs):
         lang = unit.translation.language
         plural = unit.translation.plural
         tabindex = self.attrs["tabindex"]
+        placeables = [hl[2] for hl in highlight_string(unit.source_string, unit)]
 
         # Need to add extra class
         attrs["class"] = "translation-editor form-control"
@@ -297,6 +300,7 @@ def render(self, name, value, attrs=None, renderer=None, **kwargs):
         attrs["rows"] = 3
         attrs["maxlength"] = unit.get_max_length()
         attrs["data-mode"] = unit.edit_mode
+        attrs["data-placeables"] = "|".join(re.escape(pl) for pl in placeables)
         if unit.readonly:
             attrs["readonly"] = 1