Add purifyOptions prop to <RichTextField>

Author: slax57

docs/RichTextField.md

@@ -22,9 +22,10 @@ import { RichTextField } from 'react-admin';
 
 ## Props
 
-| Prop        | Required | Type      | Default  | Description                                          |
-| ----------- | -------- | --------- | -------- | ---------------------------------------------------- |
-| `stripTags` | Optional | `boolean` | `false`  | If `true`, remove all HTML tags and render text only |
+| Prop            | Required | Type      | Default  | Description                                                           |
+| --------------- | -------- | --------- | -------- | --------------------------------------------------------------------- |
+| `stripTags`     | Optional | `boolean` | `false`  | If `true`, remove all HTML tags and render text only                  |
+| `purifyOptions` | Optional | `object`  | -        | The options passed to the DomPurify library when calling `sanitize()` |
 
 `<RichTextField>` also accepts the [common field props](./Fields.md#common-field-props).
 
@@ -37,3 +38,43 @@ import { RichTextField } from 'react-admin';
 
 <RichTextField source="body" stripTags />
 ```
+## `purifyOptions`
+
+The `purifyOptions` prop allows to pass additional options to the DomPurify library when calling `sanitize()`.
+
+For instance you can use the `ADD_ATTR` option to allow additional attributes, like `'target'`:
+
+```jsx
+import { RichTextField } from 'react-admin';
+
+<RichTextField source="body" purifyOptions={{ ADD_ATTR: ['target'] }} />
+```
+
+**Tip:** More available options can be found in the [DomPurify Readme](https://github.com/cure53/DOMPurify#can-i-configure-dompurify).
+
+## Open Links in a New Tab
+
+If you wish to open all links in a new tab, you can use the following snippet to add the `target="_blank"` attribute to all links:
+
+```jsx
+import { RichTextField, RichTextFieldProps } from 'react-admin';
+import dompurify from 'dompurify';
+
+const TargetBlankEnabledRichTextField = (props: RichTextFieldProps) => {
+    dompurify.addHook('afterSanitizeAttributes', function (node) {
+        // set all elements owning target to target=_blank
+        if ('target' in node) {
+            node.setAttribute('target', '_blank');
+            node.setAttribute('rel', 'noopener');
+        }
+    });
+    return <RichTextField {...props} />;
+};
+
+const MyComponent = () => (
+    <TargetBlankEnabledRichTextField source="body" />
+);
+```
+
+**Tip:** Note that this also adds the `rel="noopener"` attribute to all links, to prevent [reverse tabnabbing](https://mathiasbynens.github.io/rel-noopener/).
+

packages/ra-ui-materialui/package.json

@@ -29,6 +29,7 @@
         "@mui/icons-material": "^5.0.1",
         "@mui/material": "^5.0.2",
         "@testing-library/react": "^11.2.3",
+        "@types/dompurify": "^3.0.2",
         "cross-env": "^5.2.0",
         "expect": "^27.4.6",
         "file-api": "~0.10.4",

packages/ra-ui-materialui/src/field/RichTextField.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { RecordContextProvider, useTimeout } from 'ra-core';
 import dompurify from 'dompurify';
 
-import { RichTextField } from './RichTextField';
+import { RichTextField, RichTextFieldProps } from './RichTextField';
 import { SimpleShowLayout } from '../detail/SimpleShowLayout';
 
 export default {
@@ -82,3 +82,54 @@ It is regarded as one of Tolstoy's finest literary achievements and remains a cl
         </div>
     </RecordContextProvider>
 );
+
+const TargetBlankEnabledRichTextField = (props: RichTextFieldProps) => {
+    dompurify.addHook('afterSanitizeAttributes', function (node) {
+        // set all elements owning target to target=_blank
+        if ('target' in node) {
+            node.setAttribute('target', '_blank');
+            node.setAttribute('rel', 'noopener');
+        }
+    });
+    return <RichTextField {...props} />;
+};
+
+export const TargetBlank = () => (
+    <RecordContextProvider
+        value={{
+            id: 1,
+            body: `
+<p>
+<strong>War and Peace</strong> is a novel by the Russian author
+<a href="https://en.wikipedia.org/wiki/Leo_Tolstoy" target="_blank">Leo Tolstoy</a>,
+published serially, then in its entirety in 1869.
+</p>
+<p>
+It is regarded as one of Tolstoy's finest literary achievements and remains a classic of world literature.
+</p>
+`,
+        }}
+    >
+        <TargetBlankEnabledRichTextField source="body" />
+    </RecordContextProvider>
+);
+
+export const PurifyOptions = () => (
+    <RecordContextProvider
+        value={{
+            id: 1,
+            body: `
+<p>
+<strong>War and Peace</strong> is a novel by the Russian author
+<a href="https://en.wikipedia.org/wiki/Leo_Tolstoy" target="_blank">Leo Tolstoy</a>,
+published serially, then in its entirety in 1869.
+</p>
+<p>
+It is regarded as one of Tolstoy's finest literary achievements and remains a classic of world literature.
+</p>
+`,
+        }}
+    >
+        <RichTextField source="body" purifyOptions={{ ADD_ATTR: ['target'] }} />
+    </RecordContextProvider>
+);

packages/ra-ui-materialui/src/field/RichTextField.tsx

@@ -31,6 +31,7 @@ export const RichTextField: FC<RichTextFieldProps> = memo<RichTextFieldProps>(
             emptyText,
             source,
             stripTags = false,
+            purifyOptions,
             ...rest
         } = props;
         const record = useRecordContext(props);
@@ -50,7 +51,7 @@ export const RichTextField: FC<RichTextFieldProps> = memo<RichTextFieldProps>(
                 ) : (
                     <span
                         dangerouslySetInnerHTML={{
-                            __html: purify.sanitize(value),
+                            __html: purify.sanitize(value, purifyOptions),
                         }}
                     />
                 )}
@@ -64,13 +65,20 @@ RichTextField.propTypes = {
     ...Typography.propTypes,
     ...fieldPropTypes,
     stripTags: PropTypes.bool,
+    purifyOptions: PropTypes.any,
+};
+
+export type PurifyOptions = purify.Config & {
+    RETURN_DOM_FRAGMENT?: false | undefined;
+    RETURN_DOM?: false | undefined;
 };
 
 export interface RichTextFieldProps
     extends PublicFieldProps,
         InjectedFieldProps,
         Omit<TypographyProps, 'textAlign'> {
     stripTags?: boolean;
+    purifyOptions?: PurifyOptions;
 }
 
 RichTextField.displayName = 'RichTextField';

yarn.lock

@@ -6018,6 +6018,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/dompurify@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@types/dompurify@npm:3.0.2"
+  dependencies:
+    "@types/trusted-types": "*"
+  checksum: 54cf82078d1eab075c75ccba252f08514963e29b8afd63e940ea33a9eefcbac86b43e169415ff82af11c128f03921e1e0ab4fdfaa65ce56d4cd91f3e72985abe
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.3":
   version: 3.7.3
   resolution: "@types/eslint-scope@npm:3.7.3"
@@ -6498,6 +6507,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/trusted-types@npm:*":
+  version: 2.0.3
+  resolution: "@types/trusted-types@npm:2.0.3"
+  checksum: 25eae736a8a6d24353c3e0108138935250f79d1d239f6fd6f3eb52d88476456ba946f8cb8f3130c6841d40534cafc2dd2326358d86966327c3c4a3d3eecaf585
+  languageName: node
+  linkType: hard
+
 "@types/uglify-js@npm:*":
   version: 3.13.1
   resolution: "@types/uglify-js@npm:3.13.1"
@@ -19128,6 +19144,7 @@ __metadata:
     "@mui/icons-material": ^5.0.1
     "@mui/material": ^5.0.2
     "@testing-library/react": ^11.2.3
+    "@types/dompurify": ^3.0.2
     autosuggest-highlight: ^3.1.1
     clsx: ^1.1.1
     cross-env: ^5.2.0