Js-lingui: Handling of HTML entities

[tricoder42]

As @renchap pointed out few days ago, LinguiJS handles HTML entities differently that you would expect from JSX:

<p><Trans>&ldquo;entities&rdquo;</Trans></p>
// rendered as &ldquo;entities&rdquo;

<p>&ldquo;entities&rdquo;</p>
// rendered as “entities”

This is due to the fact that we're actually rendering strings. For example, this wouldn't render html entities either:

<p>{"&ldquo;entities&rdquo;"}</p>
// rendered as &ldquo;entities&rdquo;

Even this:

React.createElement("p", null, "“entities”")
// rendered as “entities”

I assume this isn't neither caused by React or Lingui, but rather Babel JSX plugin. When it encounters HTML entities in children, it somehow converts them to the actual characters.

One option is to pass the translation to dangerouslySetInnerHTML which I don't like. Second option is to convert HTML entities as babel does either by using a 3rd party lib like https://github.com/mathiasbynens/he#hedecodehtml-options or figure out how Babel does it. I believe we should convert it in compile step, so we still have the escaped entities in message catalogs.

[renchap]

I believe we should convert it in compile step, so we still have the escaped entities in message catalogs.

Why not use the UTF-8 character in the PO files? I think this is the standard practice, translators do not need to know the text comes from HTML, and their translations will be UTF-8 in this file, not escaped HTML entities.

[tricoder42]

Is it standard practice? If so, I'm not gonna fight that. Some characters could be lost, like  , that's my only convern. Otherwise it's gonna be much easier

[tricoder42]

I've found two related issues:

• this is the issue when I actually decided to keep escaped html entities in catalos: #417
• another related — handling escaped entities in catalog #400

Based on these I have a strong feeling we should keep the escaped entities in catalogs and only decode them when rendering (most probably during compile step)

Thoughts?

[tricoder42]

@semoal How do you tackle html entities in your codebase?

[semoal]

@semoal How do you tackle html entities in your codebase?

Hm, we have 5 projects with Lingui and no one uses unescaped html entities, we're using utf-8 for everything

[renchap]

Is it standard practice? If so, I'm not gonna fight that. Some characters could be lost, like  , that's my only convern. Otherwise it's gonna be much easier

  is a non-breaking space, which is an UTF-8 character and usually handled correctly by translation tools. I am personally using POEdit and non-breaking spaces in french translations (mandatory before ? and ! for example in french) and it works correctly with LinguiJS 2.

[tricoder42]

@renchap Yeah, I'm more and more inclined to this option.