Customizable rich text field and improve stories to test it.

Author: Madeorsk

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

@@ -4,6 +4,7 @@ import dompurify from 'dompurify';
 
 import { RichTextField, RichTextFieldProps } from './RichTextField';
 import { SimpleShowLayout } from '../detail/SimpleShowLayout';
+import { AdminContext } from '../AdminContext';
 
 export default {
     title: 'ra-ui-materialui/fields/RichTextField',
@@ -24,23 +25,23 @@ It is regarded as one of Tolstoy's finest literary achievements and remains a cl
 };
 
 export const Basic = () => (
-    <RecordContextProvider value={record}>
+    <Wrapper record={record}>
         <RichTextField source="body" />
-    </RecordContextProvider>
+    </Wrapper>
 );
 
 export const StripTags = () => (
-    <RecordContextProvider value={record}>
+    <Wrapper record={record}>
         <RichTextField source="body" stripTags />
-    </RecordContextProvider>
+    </Wrapper>
 );
 
 export const InSimpleShowLayout = () => (
-    <RecordContextProvider value={record}>
+    <Wrapper record={record}>
         <SimpleShowLayout>
             <RichTextField source="body" />
         </SimpleShowLayout>
-    </RecordContextProvider>
+    </Wrapper>
 );
 
 const DomPurifyInspector = () => {
@@ -57,8 +58,8 @@ const DomPurifyInspector = () => {
 };
 
 export const Secure = () => (
-    <RecordContextProvider
-        value={{
+    <Wrapper
+        record={{
             id: 1,
             body: `
 <p>
@@ -80,7 +81,7 @@ It is regarded as one of Tolstoy's finest literary achievements and remains a cl
             <h4>Stolen data:</h4>
             <input id="stolendata" defaultValue="none" />
         </div>
-    </RecordContextProvider>
+    </Wrapper>
 );
 
 const TargetBlankEnabledRichTextField = (props: RichTextFieldProps) => {
@@ -95,8 +96,8 @@ const TargetBlankEnabledRichTextField = (props: RichTextFieldProps) => {
 };
 
 export const TargetBlank = () => (
-    <RecordContextProvider
-        value={{
+    <Wrapper
+        record={{
             id: 1,
             body: `
 <p>
@@ -111,12 +112,12 @@ It is regarded as one of Tolstoy's finest literary achievements and remains a cl
         }}
     >
         <TargetBlankEnabledRichTextField source="body" />
-    </RecordContextProvider>
+    </Wrapper>
 );
 
 export const PurifyOptions = () => (
-    <RecordContextProvider
-        value={{
+    <Wrapper
+        record={{
             id: 1,
             body: `
 <p>
@@ -131,13 +132,19 @@ It is regarded as one of Tolstoy's finest literary achievements and remains a cl
         }}
     >
         <RichTextField source="body" purifyOptions={{ ADD_ATTR: ['target'] }} />
-    </RecordContextProvider>
+    </Wrapper>
+);
+
+const Wrapper = ({ children, record, defaultTheme = 'light' }) => (
+    <AdminContext defaultTheme={defaultTheme as any}>
+        <RecordContextProvider value={record}>{children}</RecordContextProvider>
+    </AdminContext>
 );
 
 export const Empty = ({ emptyText, body }) => (
-    <RecordContextProvider value={{ id: 1, body }}>
+    <Wrapper record={{ id: 1, body }}>
         <RichTextField source="body" emptyText={emptyText} />
-    </RecordContextProvider>
+    </Wrapper>
 );
 Empty.args = {
     emptyText: 'empty',

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

@@ -6,6 +6,11 @@ import purify from 'dompurify';
 import { sanitizeFieldRestProps } from './sanitizeFieldRestProps';
 import { FieldProps } from './types';
 import { genericMemo } from './genericMemo';
+import {
+    ComponentsOverrides,
+    styled,
+    useThemeProps,
+} from '@mui/material/styles';
 
 /**
  * Render an HTML string as rich text
@@ -25,8 +30,13 @@ import { genericMemo } from './genericMemo';
 const RichTextFieldImpl = <
     RecordType extends Record<string, any> = Record<string, any>,
 >(
-    props: RichTextFieldProps<RecordType>
+    inProps: RichTextFieldProps<RecordType>
 ) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+
     const {
         className,
         emptyText,
@@ -38,7 +48,7 @@ const RichTextFieldImpl = <
     const translate = useTranslate();
 
     return (
-        <Typography
+        <StyledTypography
             className={className}
             variant="body2"
             component="span"
@@ -55,7 +65,7 @@ const RichTextFieldImpl = <
                     }}
                 />
             )}
-        </Typography>
+        </StyledTypography>
     );
 };
 RichTextFieldImpl.displayName = 'RichTextFieldImpl';
@@ -80,3 +90,29 @@ export interface RichTextFieldProps<
 
 export const removeTags = (input: string) =>
     input ? input.replace(/<[^>]+>/gm, '') : '';
+
+const PREFIX = 'RaRichTextField';
+
+const StyledTypography = styled(Typography, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})({});
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [PREFIX]: 'root';
+    }
+
+    interface ComponentsPropsList {
+        [PREFIX]: Partial<RichTextFieldProps>;
+    }
+
+    interface Components {
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >[typeof PREFIX];
+        };
+    }
+}