BANG88/typescript-react-intl

Support for FormattedHTMLMessage

jtimlin-immt opened this issue · 6 comments

jtimlin-immt commented

Hi, I'm curious as to why you don't support FormattedHTMLMessage (as mentioned in your README).

I'm using this library in my project which uses FormattedHTMLMessage in a few places, so I've had to modify this library to support it, which only took a minor change and it seems to work well. I'd be happy to submit a PR for this if you're interested.

BANG88 commented

Because most of them can use FormattedMessage instead. so

jtimlin-immt commented

Thanks for the response. I was mainly curious to know whether you knew of any problems or difficulties in supporting FormattedHTMLMessage that I might have missed.

Most of the time FormattedMessage is fine. However, I have some text in the UI that needs formatting within the string (e.g. some words bold), which would need an ugly hack with the "dangerouslySetInnerHTML" property and a callback function, or splitting the string into incomplete parts, which I'd like to avoid.

I'll raise a PR to make the change to include support for it.

BANG88 commented

@jtimlin-immt you can try to make a PR and then we can discuss it, but IMO i think we should not put any HTML tag in a locale message which needs translation. and translate the parts which we really needs it. Maybe some codes for this will explain it more clearly if you have some code snippets.

jtimlin-immt commented

I don't think splitting the string is really an option. Consider something like this:

When receiving spam email, <b>do not</b> click on it, and instead delete it <b>immediately</b>.

It would be wrong to split the string into the following 4 strings and have them translated individually:

When receiving spam email,
do not
click on it, and instead delete it
immediately

Without context, a translator would have a hard time translating these individual strings. It also doesn't necessarily make sense in all languages to emphasize the same parts of the sentence to convey the same meaning.

FormattedMessage can't be used here, because the parts of the message to be affected by HTML tags are not values like numbers, so cant use placeholders.

BANG88 commented
ccnokes commented

So I just realized that HTMLFormattedMessage is not getting processed at all and was very surprised by this behavior, but it looks like passing it in options.tagNames works (gets added in here https://github.com/bang88/typescript-react-intl/blob/master/index.ts#L232), eg:

var results = parse(contents, {
  tagNames: ["HTMLFormattedMessage"],
});

Just leaving that in here in case it helps someone else.