Support Rich Text Formatting (ignoreTag to false)

[cvolant]

🚀 Feature Proposal

I would like to use Rich Text Formatting.

Motivation

As stated in Formatjs docs, "by allowing embedding XML tag we want to make sure contextual information is not lost when you need to style part of the string".

Example

t(key, {
  a: chunks => (
    <a
      class="external_link"
      target="_blank"
      href="https://www.example.com"
    >
      {chunks}
    </a>
  ),
  cta: chunks => <strong class="important">{chunks}</strong>,
})

Note

I am aware of the comment in i18next-icu code...

        // without ignoreTag, react-i18next <Trans> translations with <0></0> placeholders
        // will fail to parse, as IntlMessageFormat expects them to be defined in the
        // options passed to fc.format() as { 0: (children) => string }
        // but the replacement of placeholders is done in react-i18next
        fc = new IntlMessageFormat(res, lng, this.formats, { ignoreTag: true });

... but it would be nice to find a workaround, like adding { 0: (children) => string } or something.

[adrai]

Rich Text Formatting => The FormattedMessage component is part of the react-intl module... so something on top of ICU specifically for react-intl.

i18next has something similar with the Trans component of react-i18next => https://react.i18next.com/latest/trans-component#alternative-usage-components-array

Theoretically you can also combine react-i18next with i18next-icu, like here: https://github.com/i18next/react-i18next/blob/master/example/react-icu/src/App.js

Beside that, why are you pointing exactly to the ignoreTag option? Would having that option set to false help for your use case? Can you elaborate on that?

[cvolant]

Thank you for your answer. I was not aware that the Trans component has such a feature too...
I pointed to the ignoreTag option because I though that Rich Text Formatting was part of ICU and that ignoreTag was the option for deactivating it.
Things a clearer to me know, thank you.