[Feature] Adds defaultRichTextElements prop

.storybook/stories/01-Message.stories.js

@@ -6,6 +6,19 @@ const meta = {
     title: 'Example/01 Message'
 };
 
+const messagesRichText = {
+    en: {
+        message:
+            'Something <strong>important</strong>.<br></br>Something <underline>underlined</underline>.'
+    },
+    es: {
+        message:
+            'Algo <strong>importante</strong>.<br></br>Algo <underline>subrayado</underline>.'
+    }
+};
+
+const getMessages = (locale) => messagesRichText[locale];
+
 export default meta;
 
 export const Default = () => {
@@ -18,3 +31,18 @@ PerStory.parameters = {
         locales: [...defaultLocales, 'es']
     }
 };
+
+export const RichTextElements = Default.bind(null);
+RichTextElements.parameters = {
+    intl: {
+        locales: ['en', 'es'],
+        getMessages,
+        defaultRichTextElements: {
+            br: () => <br />,
+            strong: (text) => <strong>{text}</strong>,
+            underline: (text) => (
+                <span style={{ textDecoration: 'underline' }}>{text}</span>
+            )
+        }
+    }
+};

README.md

@@ -63,14 +63,22 @@ Fallback locale.
 
 Type: `(locale: string) => object`
 
-Getter function that takes the active locale as arguments and expects an object of messages as return value.
+Getter function that takes the active locale as arguments and expects an `object` of messages as a return value.
 
 <small>(See `messages` in [`IntlProvider` docs](https://formatjs.io/docs/react-intl/components#intlprovider) of react-intl)</small>
 
 ### `getFormats`
 
 Type: `(locale: string) => object`
 
-Getter function that takes the active locale as arguments and expects an formats objects as return value.
+Getter function that takes the active locale as arguments and expects an `object` of formats as a return value.
 
 <small>(See `formats` in [`IntlProvider` docs](https://formatjs.io/docs/react-intl/components#intlprovider) of react-intl)</small>
+
+### `defaultRichTextElements`
+
+Type: `object`
+
+Object of rich text elements.
+
+<small>(See `defaultRichTextElements` in [`IntlProvider` docs](https://formatjs.io/docs/react-intl/components#intlprovider) of react-intl)</small>

src/preview/decorators/withIntl.js

@@ -25,7 +25,7 @@ export function withIntl(StoryFn, context) {
         return null;
     }
 
-    const { getMessages, getFormats } = intlConfig;
+    const { getMessages, getFormats, defaultRichTextElements } = intlConfig;
 
     const messages = getMessages(activeLocale);
     const formats =
@@ -36,6 +36,7 @@ export function withIntl(StoryFn, context) {
             locale={activeLocale}
             messages={messages}
             formats={formats}
+            defaultRichTextElements={defaultRichTextElements}
         >
             {StoryFn()}
         </IntlProvider>

src/utils/validateConfig.js

@@ -12,7 +12,11 @@ export function validateConfig(config) {
         return 'invalid-get-messages';
     } else if (!!config.getFormats && typeof config.getFormats !== 'function') {
         return 'invalid-get-formats';
+    } else if (
+        !!config.defaultRichTextElements &&
+        typeof config.defaultRichTextElements !== 'object'
+    ) {
+        return 'invalid-rich-text-elements';
     }
-
     return null;
 }