How to escape only translated parts of message

[jmo-stripe]

We've got a fairly simple integration using the imperative functions from the @formatjs/intl package directly. We've run into issues where inclusion of special characters (e.g., <) can break our webpack builds and need to be escaped. However, we can't escape the entire output of all calls to intl.formatMessage(...) because that would break the rich text formatting insertion of <a> tags and whatnot.

Start with a simple example:

intl.formatMessage({
  id: 'foo',
  description: 'foo',
  defaultMessage: 'We want <100 tomatoes.'
})

We want the < sign to get HTML-escaped. We could do this with a library like he by wrapping the output in he.escape(...). However, that breaks down with a slightly more complex example:

intl.formatMessage({
  id: 'foo',
  description: 'foo',
  defaultMessage: 'We <b>really want</b> <100 tomatoes.',
}, {
  b: (value) => `<b>${value}</b>`
})

If we escape the result of intl.formatMessage, we break the <b> tag. If we escape just the value in the <b> tag, we don't escape the < sign from <100.

What we really need is a hook to provide a transformer for all the "untrusted" parts of the message formatting (that is, the translated parts). As far as I can tell, this sort of hook would need to be surfaced by the library itself. But are there any workarounds?

Fwiw, I believe this isn't an issue in general with react-intl because JSX handles the trusted/untrusted parts and escapes the untrusted parts as needed. Thanks!

[longlho]

Have you tried using apostrophe (') to escape?

[jmo-stripe]

I don't think the escape character helps in this case, since it escapes message control characters so you can include code-like things for translation, but doesn't help us indicate which parts of the result are trusted/untrusted.

For example, the version of the above code with the ' escape character actually results in the exact same result.

intl.formatMessage({
  id: 'foo',
  description: 'foo',
  defaultMessage: "We <b>really want</b> '<100 tomatoes.",
}, {
  b: (value) => `<b>${value}</b>`
})

With or without the ', the above code results in the string value 'We <b>really want</b> <100 tomatoes.' It doesn't actually help us differentiate the parts that are trusted (the <b> and </b>, which should not get escaped) from the untrusted (the <100, which we want escaped to <100).