Incorrect translation with HTML tags and string interpolation around dynamic variables

[Guigeek973]

Hello again :) Sorry if i bother/spam you ^^

I've catched another issue :

Description:
I'm experiencing an issue with the translation plugin in my Angular app. When translating a string containing HTML tags and dynamic variables (e.g., {{min}} and {{max}}), the translation adds extra curly braces.

Example:
Original string:
"modules.teleconsultation-assistee.minAndMax": "<strong>{{min}}</strong> and <strong>{{max}}</strong>"

Incorrect translation:
"modules.teleconsultation-assistee.minAndMax": "<strong>{{min}}</strong>} and <strong>{{max}}}</strong>}"

Issue:
The translation seems correct at first, but extra } characters are added around the dynamic variables ({{min}} and {{max}}).

This may be caused by the plugin not properly handling dynamic variables inside HTML tags.
The documentation mentions it supports HTML, but it looks like the presence of {{}} inside HTML elements might be causing the issue.

Expected behavior:
The translated string should keep the correct syntax without extra curly braces, like:

"modules.teleconsultation-assistee.minAndMax": "<strong>{{min}}</strong> and <strong>{{max}}</strong>"

Suggestion:
Maybe check how the plugin handles dynamic variables inside HTML tags and ensure it doesn’t add unnecessary characters.

Thanks for your help!

[while1618]

Is this also happening in large files? Because I tried to reproduce this problem, I created en.json file with this content:
{"test": "<strong>{{min}}</strong> and <strong>{{max}}</strong>"} and it worked as expected.

[Guigeek973]

I tried also to translate only on line and it get the same weird behavior :
"test1": "<strong>{{min}}</strong>} y el <strong>{{max}}}</strong>}",

For another key with only html tag and no string interpolation, the html tag is simply removed :
"login.extra-signin-block.subTitle": "Avec le soutien de l'<strong>Union Européenne</strong> et des Fonds Européen de Développement régional",
"login.extra-signin-block.subTitle": "Con el apoyo de la Unión Europea y el Fondo Europeo de Desarrollo Regional",

I've noticed that the weird errors come after passing these first line with then i got {{ }} replaced.
"modules.notfifications.unread.count": "{{count}} notifications non lues",
"modules.notfifications.unread.count": "<strong> notificaciones no leídas",

Maybe there is an issue with html tag ?

[Guigeek973]

I've just noticed that i have only one html tag in my translate values.
So i tried to remove the line :
"modules.login.extra-signin-block.subTitle": "Avec le soutien de l'<strong>Union Européenne</strong> et des Fonds Européen de Développement régional"
and then, there is no more bugs on {{variable}} in the translation process.

So for the time, i will go without html tag on translate values, so i can release antoher language in the app and next we will integrate html tag when it's correctly handled in your package ! :)

So i'm not depending on your improvements on the package to go forward ^^

Thanks u for your attention,

[Guigeek973]

I will try to see if i can identify what is the problem and push a PR

[Guigeek973]

For a fr.json like this :
{ "modules.welcome": "Bienvenue {{companyName}}", "modules.list": "réseau \"{{departmentName}}\".", "modules.date": "{{creator}} datant du {{date}}", "modules.login.subTitle": "Soutien de l'<strong>Union Européenne</strong>.", "modules.count": "{{count}} notifications", "modules.created": "{{ count }} comptes" }

It seems this is caused by the translation :

translateValues => valuesForTranslation
[ 'Bienvenue {{0}}', 'réseau "{{1}}".', '{{2}} datant du {{3}}', "Soutien de l'{{4}}Union Européenne{{5}}.", '{{6}} notifications', '{{7}} comptes' ]

translateValues => translated
Welcome {{0}} network "{{1}}". {{2}} dating from {{3}} Support from the European Union {{4}}. {{6}} notifications {{7}} accounts

But there is still an issue with the translation. Maybe i need to split the value to translate when there is some html tag inside ?
I'm gonna think about it

[Guigeek973]

I just noticed that deepl don't translate html tags when you send it..

So for the purpose of the test i changed the regex to don't catch html tags like so :
private static readonly skipWordRegex: RegExp = /({{([^{}]+)}}|\{([^{}]+)\})/g;

It seems that deepl don't translate the html tag when we send it non encoded like so :
Soutien de l'<strong>Union Européenne</strong>.
It translate into
Support from the <strong>European Union</strong>.

Maybe it's not necessary to skipWords with html tag then ?

If we encode as it's already done it gives weird things :
Soutien de l'<strong>Union Européenne</strong>.
Translate into :
Support from the European Union</strong>.

Now i need to find a way to change the regex only if we use deepl api !

[Guigeek973]

I want to propose a PR but i don't have the rights @while1618