feat: Allow formatting embedded XML

[longlho]

Enhanced FormattedMessage & formatMessage rich text formatting

In v2, in order to do rich text formatting (embedding a ReactElement), you had to do this:

<FormattedMessage
  defaultMessage="To buy a shoe, { link } and { cta }"
  values={{
    link: (
      <a class="external_link" target="_blank" href="https://www.shoe.com/">
        visit our website
      </a>
    ),
    cta: <strong class="important">eat a shoe</strong>,
  }}
/>

Now you can do:

<FormattedMessage
  defaultMessage="To buy a shoe, <a>visit our website</a> and <cta>eat a shoe</cta>"
  values={{
    link: msg => (
      <a class="external_link" target="_blank" href="https://www.shoe.com/">
        {msg}
      </a>
    ),
    cta: msg => <strong class="important">{msg}</strong>,
  }}
/>

The change solves several issues:

1. Contextual information was lost when you need to style part of the string: In this example above, link effectively is a blackbox placeholder to a translator. It can be a person, an animal, or a timestamp. Conveying contextual information via description & placeholder variable is often not enough since the variable can get sufficiently complicated.
2. This brings feature-parity with other translation libs, such as fluent by Mozilla (using Overlays).

However, in cases where we allow placeholders to be a ReactElement will have to be rewritten to 1 of the 2 syntax down below:

Before

<FormattedMessage
  defaultMessage="Hello, {name}"
  values={{
    name: <b>John</b>,
  }}
/>

After

<FormattedMessage
  defaultMessage="Hello, <b>John</b>"
  values={{
    b: name => <b>{name}</b>,
  }}
/>

OR (NOT RECOMMENDED)

<FormattedMessage
  defaultMessage="Hello, <name/>"
  values={{
    name: () => <b>{John}</b>,
  }}
/>

[mbalaam]

I was hoping this would do nesting, but it would appear not to. Is that correct behaviour?

For example with:

defaultMessage={"<strong>19<sup>th</sup> of the month<strong>"}

I am just getting:

<strong>19</strong>

[longlho]

We do support nesting (and have a test for it: https://github.com/formatjs/react-intl/blob/master/test/unit/components/message.tsx#L228)