Highlight placeables in the Translation Memory Tab

[MundiaNderi]

Fixes #3445

Placeables are now highlighted in this view: http://localhost:8000/sl/translation-memory/

To test, navigate to that link and see if they're highlighted.

[functionzz]

Hey @MundiaNderi thanks for the patch, although I believe by what "highlight" means in this context refers to a similar feature found in the translate module like so:

As you can see the placeable is "highlighted" in grey. The issue with the current implementation is that it interferes with the search functionality of translation memory, as observed here: http://localhost:8000/sl/translation-memory/?search=amount.

[MundiaNderi]

Hey @MundiaNderi thanks for the patch, although I believe by what "highlight" means in this context refers to a similar feature found in the translate module like so:

As you can see the placeable is "highlighted" in grey. The issue with the current implementation is that it interferes with the search functionality of translation memory, as observed here: http://localhost:8000/sl/translation-memory/?search=amount.

Hey Jamie, I had followed a similar approach first, reusing the regex from pontoon/translate/src/modules/placeable/placeholder.ts in pontoon/teams/static/js/translation_memory.js to identify placeables in the template, but ran into issues because the TM entries are loaded dynamically via AJAX, the JS ran before the DOM was populated. Since this is a server-rendered template, I switched to the Python approach to avoid that timing issue.
On my end, searching for other strings works without interference. "Amount" doesn't appear to be an available string in my local Translation Memory, here's a screenshot from a different string search:

I ran Command F on all the 9 pages of Translation memory for the string amount to be sure, and that string doesn't exist on my local instance ie : Phrase not found

[functionzz]

On my end, searching for other strings works without interference. "Amount" doesn't appear to be an available string in my local Translation Memory, here's a screenshot from a different string search:

Sorry about that. I am referring to the orange-yellow colour scheme of the highlight - since searching already uses the orange-yellow colour, you can't tell the difference between a placeable and a search. That's why I showed the first picture - not the implementation but rather the colour scheme itself.

I guess the next issue that follows is whether the highlight from search and the highlight from placeable will conflict with each other, if they are both using mark for highlighting.

[MundiaNderi]

On my end, searching for other strings works without interference. "Amount" doesn't appear to be an available string in my local Translation Memory, here's a screenshot from a different string search:

Sorry about that. I am referring to the orange-yellow colour scheme of the highlight - since searching already uses the orange-yellow colour, you can't tell the difference between a placeable and a search. That's why I showed the first picture - not the implementation but rather the colour scheme itself.

I guess the next issue that follows is whether the highlight from search and the highlight from placeable will conflict with each other, if they are both using mark for highlighting.

Okay, my bad. Will look into that and revert

[mathjazz]

Confirming placeables are now properly highlighted!

The bug that @functionzz mentioned is demonstrated here: