feat(react-intl): allow FormattedMessage to pass in ignoreTag, fix #2538

formatjs · Jan 29, 2021 · a615cf9 · a615cf9
1 parent 96f1c48
commit a615cf9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/packages/react-intl/src/components/message.tsx b/packages/react-intl/src/components/message.tsx
@@ -5,7 +5,11 @@
  */
 
 import * as React from 'react';
-import type {PrimitiveType, FormatXMLElementFn} from 'intl-messageformat';
+import type {
+  PrimitiveType,
+  FormatXMLElementFn,
+  Options as IntlMessageFormatOptions,
+} from 'intl-messageformat';
 import {Context} from './injectIntl';
 import {invariantIntlContext} from '../utils';
 import * as shallowEquals_ from 'shallow-equal/objects';
@@ -19,6 +23,7 @@ export interface Props<
   values?: V;
   tagName?: React.ElementType<any>;
   children?(...nodes: React.ReactNodeArray): React.ReactNode;
+  ignoreTag?: IntlMessageFormatOptions['ignoreTag'];
 }
 
 class FormattedMessage<
@@ -54,10 +59,13 @@ class FormattedMessage<
             values,
             children,
             tagName: Component = Text,
+            ignoreTag,
           } = this.props;
 
           const descriptor = {id, description, defaultMessage};
-          let nodes: React.ReactNode = formatMessage(descriptor, values);
+          let nodes: React.ReactNode = formatMessage(descriptor, values, {
+            ignoreTag,
+          });
 
           if (!Array.isArray(nodes)) {
             nodes = [nodes];

diff --git a/packages/react-intl/tests/unit/components/message.tsx b/packages/react-intl/tests/unit/components/message.tsx
@@ -229,6 +229,24 @@ describe('<FormattedMessage>', () => {
       expect(nameNode).toHaveTextContent('Jest');
     });
 
+    it('supports rich-text message formatting with defaultRichTextElements', () => {
+      const {getByTestId} = mountWithProvider(
+        {
+          id: 'hello',
+          defaultMessage: 'Hello, <b>{name}</b>!',
+          values: {
+            name: 'Jest',
+          },
+          ignoreTag: true,
+        },
+        {
+          ...providerProps,
+        }
+      );
+
+      expect(getByTestId('comp')).toHaveTextContent('Hello, <b>{name}</b>!');
+    });
+
     it('supports rich-text message formatting w/ nested tag', () => {
       const {getByTestId} = mountWithProvider(
         {