feat: add support for 'defaultRichTextElements' in IntlProvider

[ridvankaradag]

Summary

Add 'defaultRichTextElements' support in the IntlProvider component, enhancing compatibility with the react-intl library for improved rich text handling in internationalization.

https://formatjs.io/docs/react-intl/components/#intlprovider

Context

We can use rich text elements for individual components.

<FormattedMessage
          values={{
            p: (...chunks) => <p>{chunks}</p>,
            lineBreak: <br />
          }}
/>

But react-intl also supports defaultRichTextElements prop, which helps us to define them globally.

 <IntlProvider
        locale={lang}
        messages={messages}
        textComponent="span"
        defaultRichTextElements={{
          lineBreak: <br />,
        }}
      >

Here is an example string:

"I want to give a line break here. {lineBreak}Then, I can continue from the next line."

From:

To:

Usage

reactIntl.ts(x)

export const reactIntl = {
  defaultLocale: 'en',
  locales,
  messages,
  formats,
  defaultRichTextElements: {
    lineBreak: <br />,
  },
};

[stevensacks]

LGTM will release shortly