How to create a default translation for editable fields in a fragment

Issue

We have some fragments similar to the one below

<button>
  <span data-lfr-editable-id="text1" data-lfr-editable-type="rich-text">
    ${languageUtil.get(locale,'exit')}
  </span>
</button>

We are trying to set the default translation dynamically with ${languageUtil.get(locale,'exit')} but it does not work.
It only gets Translated once when placed.
- If the fragment is placed with the user language set to English, the button displays the English translation.
- If the fragment is placed with the user language set to German, the button displays the German translation.
- But if the user changes the locale after placement, the text does not update.
How should we do it?

Environment

DXP 7.4 u89

Resolution

Currently, it is not possible to execute Freemarker inside editable fields, it is a limitation.
Root cause: the content inside the editable fields is their default value. So the Freemarker code is only executed one at a time at the moment to persist it, and after that, this value is used.
It causes the default value to be calculated using the existing locale to render it when the fragment is added to the content and this value will be used as default when there is no mapping.

You can find further reasons listed in LRDOCS-12045.

Workarounds

You can get the correct locale of a key by using the following:

${languageUtil.get(locale,'user')}

This line retrieves the correct locale for the user key, which is User for the English (US) locale and Benutzer for the German locale.

Currently, there are 2 possible workarounds to help make the current behavior better for your users.t

Web Content with a template

The text of the right locale comes from the code called in the template.

Create a web content article with a text field
Create a template for it with ${languageUtil.get(locale,'user')} copy-pasted
Add a fragment to a page
Map the web content template to the field
Publish the page
Change the language to another one, e.g. German

The current locale should be displayed on the fragment.

Now, as for this method, if a fragment has a mapped field, usually it cannot be edited manually. But users could use the web content article's text field to enter the translation, then you could modify the template to add the following logic to it: if there is an existing translation for the current locale, display that; otherwise show the default translation (stored in a key, retrieved similarly with ${languageUtil.get(locale,'keyName')}).

Another thing to note is that users should view the pages using the page preview, the editor view may not show the actual results when it comes to the correct locale.

This method works because the default value is calculated using the existing locale, and it is rendered on the page when the fragment is added to the content, and this value will be used as default when there is no mapping used.
Because this is rendered at once on the backend, and not in real-time, it cannot be used as you would expect in a fragment where the changes would have to be rendered real-time.

Fragment with additional logic

The attached example also shows a fragment with the following code:

<button>
  <span  data-lfr-editable-id="text1" data-lfr-editable-type="rich-text">
    ${languageUtil.get(locale,'user')}
  </span>
</button>

However, this will not work because editable tags do not support Freemarker.
Still, this method has some advantages as well: for example, users can edit the text here. And the correct locale could be grabbed using some other methods, or the configuration options could be used to grab values from there.

Note: feel free to import the attached sample LAR file to a new site.