Html in translations

[archfz]

Is your feature request related to a problem? Please describe. Yes it is: how can I insert html into translations? For example I'd like to have a <br> or some bolded text in the middle of the translation. I cannot seem to find any information on this anywhere. Other frameworks easily support this.

Describe the solution you'd like Allow html in translation strings: ex This is my <strong>${name}</strong>

Describe alternatives you've considered I haven't found any alternative solutions.

[djhi]

Hi, and thanks for your question. As explained in the react-admin contributing guide, the right place to ask a "How To" question, get usage advice, or troubleshoot your own code, is StackOverFlow.

This makes your question easy to find by the core team, and the developer community. Unlike Github, StackOverFlow has great SEO, gamification, voting, and reputation. That's why we chose it, and decided to keep GitHub issues only for bugs and feature requests.

So I'm closing this issue, and inviting you to ask your question at:

http://stackoverflow.com/questions/tagged/react-admin

And once you get a response, please continue to hang out on the react-admin channel in StackOverflow. That way, you can help newcomers and share your expertise!

[archfz]

@djhi This is mostly a feature request, can you please reopen. I have actually investigated the code and what I need is not possible with react admin.

[fzaninotto]

This is not supported in react-admin components (e.g. <Notification>, <ValidationError> escape HTML in translations by default) and it won't be. It is supported in the i18n layer (nothing forbids you from inserting HTML in your i18n messages).

So you'll have to replace the react-admin components by your own using dangerouslySetInnerHTML wherever you want to use HTML in translations. As every component in react-admin is replaceable, this should not be too big a deal.

[archfz]

@fzaninotto Okay, but wouldn't this mean that I'd need to overwrite all field components? It seems to me that a lot of code would need to be written for a thing that should be really simple.

If I am wrong and there is a generic way of doing this it would be nice to have some documentation about it. Because overwriting all field components would be too messy and harder to maintain.

[fzaninotto]

There is no simple way to do it for all components.

[djhi]

Can you share your precise usecase btw ? You described the solution you'd like but not the usage. Thanks!

[archfz]

@djhi The most common use case is to display parts of the text emphasized, this would mean bolded, supper, underscore etc. My need is for emphasizing with bold a part of the error message. Other cases include like displaying links in the middle of the translated text. For example I want to show a link for verification on the user login error. Another very common one is placing breakpoints in the text (br).

This feature could allow other use cases as well. Now this is a very specific one but I have noticed that react admin does not support multiple validation errors per field as separate translations. So I taught I could combine all the errors in one translation with arguments having all the error translations. Also I taught that I could make it look good by rendering in the translation the errors in a list (li) so they loom good and separated. But that is not possible. Anyways multiple errors per field can be a different feature request, but this example here is good because if html was supported in translation I could've used this one as a workaround for the missing feature.

BE frameworks like symfony and laravel support this out of the box in their rendering engine.

[archfz]

What might be a solution is to somehow mark a translation string as to render with html like: This is my <strong>bolded</strong> string! ||raw. This would require the user to explicitly set the translation as raw. Also arguments should be sanitized by default but could also be marked as raw This is my <strong>${argument}||raw</strong> arg! ||raw. This should be easy to solve with some regexes. Also escape \||raw so that it can also be displayed.

[archfz]

@djhi @fzaninotto What do you say guys? I believe this is an important feature.

[fzaninotto]

We choose to leave that feature out of the react-admin core. Feel free to write a third-party package for it.