Use the same 'RichDescription' component with all related fields and themes

dejanbelusic · dejanbelusic · commit 5c0005830556 · 2025-01-26T21:51:27.000+01:00
diff --git a/packages/antd/src/templates/DescriptionField/index.tsx b/packages/antd/src/templates/DescriptionField/index.tsx
@@ -1,4 +1,4 @@
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { DescriptionFieldProps, FormContextType, RichDescription, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 /** The `DescriptionField` is the template to use to render the description of a field
  *
@@ -9,9 +9,13 @@ export default function DescriptionField<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
 >(props: DescriptionFieldProps<T, S, F>) {
-  const { id, description } = props;
+  const { id, description, registry, uiSchema } = props;
   if (!description) {
     return null;
   }
-  return <span id={id}>{description}</span>;
+  return (
+    <span id={id}>
+      <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
+    </span>
+  );
 }
diff --git a/packages/bootstrap-4/src/DescriptionField/DescriptionField.tsx b/packages/bootstrap-4/src/DescriptionField/DescriptionField.tsx
@@ -1,19 +1,19 @@
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { DescriptionFieldProps, FormContextType, RichDescription, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 export default function DescriptionField<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->({ id, description }: DescriptionFieldProps<T, S, F>) {
-  if (description) {
-    return (
-      <div>
-        <div id={id} className='mb-3'>
-          {description}
-        </div>
-      </div>
-    );
+>({ id, description, registry, uiSchema }: DescriptionFieldProps<T, S, F>) {
+  if (!description) {
+    return null;
   }
 
-  return null;
+  return (
+    <div>
+      <div id={id} className='mb-3'>
+        <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
+      </div>
+    </div>
+  );
 }
diff --git a/packages/chakra-ui/src/DescriptionField/DescriptionField.tsx b/packages/chakra-ui/src/DescriptionField/DescriptionField.tsx
@@ -1,22 +1,18 @@
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { DescriptionFieldProps, FormContextType, RichDescription, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import { Text } from '@chakra-ui/react';
 
 export default function DescriptionField<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->({ description, id }: DescriptionFieldProps<T, S, F>) {
+>({ id, description, registry, uiSchema }: DescriptionFieldProps<T, S, F>) {
   if (!description) {
     return null;
   }
 
-  if (typeof description === 'string') {
-    return (
-      <Text as='sup' fontSize='md' id={id}>
-        {description}
-      </Text>
-    );
-  }
-
-  return <>{description}</>;
+  return (
+    <Text as='sup' fontSize='md' id={id}>
+      <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
+    </Text>
+  );
 }
diff --git a/packages/core/src/components/fields/ObjectField.tsx b/packages/core/src/components/fields/ObjectField.tsx
@@ -259,11 +259,6 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
 
     const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
     const description = uiOptions.description ?? schema.description;
-    const richDescription = uiOptions.enableMarkdownInDescription ? (
-      <Markdown options={{ disableParsingRawHTML: true }}>{description || ''}</Markdown>
-    ) : (
-      description
-    );
     let orderedProperties: string[];
     try {
       const properties = Object.keys(schemaProperties);
@@ -286,7 +281,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
     const templateProps = {
       // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
       title: uiOptions.label === false ? '' : templateTitle,
-      description: uiOptions.label === false ? undefined : richDescription,
+      description: uiOptions.label === false ? undefined : description,
       properties: orderedProperties.map((name) => {
         const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
         const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
diff --git a/packages/core/src/components/fields/SchemaField.tsx b/packages/core/src/components/fields/SchemaField.tsx
@@ -22,7 +22,6 @@ import {
 } from '@rjsf/utils';
 import isObject from 'lodash/isObject';
 import omit from 'lodash/omit';
-import Markdown from 'markdown-to-jsx';
 
 /** The map of component type to FieldName */
 const COMPONENT_TYPES: { [key: string]: string } = {
@@ -201,11 +200,6 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
 
   const description = uiOptions.description || props.schema.description || schema.description || '';
 
-  const richDescription = uiOptions.enableMarkdownInDescription ? (
-    <Markdown options={{ disableParsingRawHTML: true }}>{description}</Markdown>
-  ) : (
-    description
-  );
   const help = uiOptions.help;
   const hidden = uiOptions.widget === 'hidden';
 
@@ -254,7 +248,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     description: (
       <DescriptionFieldTemplate
         id={descriptionId<T>(id)}
-        description={richDescription}
+        description={description}
         schema={schema}
         uiSchema={uiSchema}
         registry={registry}
diff --git a/packages/core/src/components/templates/DescriptionField.tsx b/packages/core/src/components/templates/DescriptionField.tsx
@@ -1,4 +1,4 @@
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { DescriptionFieldProps, FormContextType, RichDescription, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 /** The `DescriptionField` is the template to use to render the description of a field
  *
@@ -9,21 +9,13 @@ export default function DescriptionField<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
 >(props: DescriptionFieldProps<T, S, F>) {
-  const { id, description } = props;
+  const { id, description, registry, uiSchema } = props;
   if (!description) {
     return null;
   }
-  if (typeof description === 'string') {
-    return (
-      <p id={id} className='field-description'>
-        {description}
-      </p>
-    );
-  } else {
-    return (
-      <div id={id} className='field-description'>
-        {description}
-      </div>
-    );
-  }
+  return (
+    <div id={id} className='field-description'>
+      <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
+    </div>
+  );
 }
diff --git a/packages/core/src/components/widgets/CheckboxWidget.tsx b/packages/core/src/components/widgets/CheckboxWidget.tsx
@@ -9,9 +9,7 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
-  getUiOptions,
 } from '@rjsf/utils';
-import Markdown from 'markdown-to-jsx';
 
 /** The `CheckBoxWidget` is a widget for rendering boolean properties.
  *  It is typically used to represent a boolean.
@@ -34,9 +32,6 @@ function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
   onChange,
   registry,
 }: WidgetProps<T, S, F>) {
-  const { globalUiOptions } = registry;
-  const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
-
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
     registry,
@@ -63,18 +58,12 @@ function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
   );
   const description = options.description ?? schema.description;
 
-  const richDescription = uiOptions.enableMarkdownInDescription ? (
-    <Markdown options={{ disableParsingRawHTML: true }}>{description || ''}</Markdown>
-  ) : (
-    description || ''
-  );
-
   return (
     <div className={`checkbox ${disabled || readonly ? 'disabled' : ''}`}>
       {!hideLabel && !!description && (
         <DescriptionFieldTemplate
           id={descriptionId<T>(id)}
-          description={richDescription}
+          description={description}
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}
diff --git a/packages/fluent-ui/src/DescriptionField/DescriptionField.tsx b/packages/fluent-ui/src/DescriptionField/DescriptionField.tsx
@@ -1,14 +1,18 @@
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { DescriptionFieldProps, FormContextType, RichDescription, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import { Text } from '@fluentui/react';
 
 export default function DescriptionField<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->({ description, id }: DescriptionFieldProps<T, S, F>) {
-  if (description) {
-    return <Text id={id}>{description}</Text>;
+>({ id, description, registry, uiSchema }: DescriptionFieldProps<T, S, F>) {
+  if (!description) {
+    return null;
   }
 
-  return null;
+  return (
+    <Text id={id}>
+      <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
+    </Text>
+  );
 }
diff --git a/packages/fluentui-rc/src/DescriptionField/DescriptionField.tsx b/packages/fluentui-rc/src/DescriptionField/DescriptionField.tsx
@@ -1,5 +1,5 @@
 import { Text, makeStyles, tokens } from '@fluentui/react-components';
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { DescriptionFieldProps, FormContextType, RichDescription, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 const useStyles = makeStyles({
   label: {
@@ -17,15 +17,15 @@ export default function DescriptionField<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
 >(props: DescriptionFieldProps<T, S, F>) {
-  const { id, description } = props;
+  const { id, description, registry, uiSchema } = props;
   const classes = useStyles();
-  if (description) {
-    return (
-      <Text block id={id} className={classes.label}>
-        {description}
-      </Text>
-    );
+  if (!description) {
+    return null;
   }
 
-  return null;
+  return (
+    <Text block id={id} className={classes.label}>
+      <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
+    </Text>
+  );
 }
diff --git a/packages/material-ui/src/DescriptionField/DescriptionField.tsx b/packages/material-ui/src/DescriptionField/DescriptionField.tsx
@@ -1,5 +1,5 @@
 import Typography from '@material-ui/core/Typography';
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { DescriptionFieldProps, FormContextType, RichDescription, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 /** The `DescriptionField` is the template to use to render the description of a field
  *
@@ -10,11 +10,11 @@ export default function DescriptionField<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
 >(props: DescriptionFieldProps<T, S, F>) {
-  const { id, description } = props;
+  const { id, description, registry, uiSchema } = props;
   if (description) {
     return (
       <Typography id={id} variant='subtitle2' style={{ marginTop: '5px' }}>
-        {description}
+        <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
       </Typography>
     );
   }
diff --git a/packages/mui/src/DescriptionField/DescriptionField.tsx b/packages/mui/src/DescriptionField/DescriptionField.tsx
@@ -1,5 +1,5 @@
 import Typography from '@mui/material/Typography';
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { DescriptionFieldProps, FormContextType, RichDescription, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 /** The `DescriptionField` is the template to use to render the description of a field
  *
@@ -10,14 +10,14 @@ export default function DescriptionField<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
 >(props: DescriptionFieldProps<T, S, F>) {
-  const { id, description } = props;
-  if (description) {
-    return (
-      <Typography id={id} variant='subtitle2' style={{ marginTop: '5px' }}>
-        {description}
-      </Typography>
-    );
+  const { id, description, registry, uiSchema } = props;
+  if (!description) {
+    return null;
   }
 
-  return null;
+  return (
+    <Typography id={id} variant='subtitle2' style={{ marginTop: '5px' }}>
+      <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
+    </Typography>
+  );
 }
diff --git a/packages/semantic-ui/src/DescriptionField/DescriptionField.tsx b/packages/semantic-ui/src/DescriptionField/DescriptionField.tsx
@@ -1,4 +1,4 @@
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { DescriptionFieldProps, FormContextType, RichDescription, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 /** The `DescriptionField` is the template to use to render the description of a field
  *
@@ -9,13 +9,13 @@ export default function DescriptionField<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
 >(props: DescriptionFieldProps<T, S, F>) {
-  const { id, description } = props;
+  const { id, description, registry, uiSchema } = props;
   if (!description) {
     return null;
   }
   return (
     <p id={id} className='sui-description'>
-      {description}
+      <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
     </p>
   );
 }
diff --git a/packages/utils/src/components/RichDescription.tsx b/packages/utils/src/components/RichDescription.tsx
@@ -0,0 +1,28 @@
+import getUiOptions from '../getUiOptions';
+import { FormContextType, Registry, RJSFSchema, StrictRJSFSchema, UiSchema } from '../types';
+import Markdown from 'markdown-to-jsx';
+
+interface RichDescriptionProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
+  description: string;
+  uiSchema?: UiSchema<T, S, F>;
+  registry: Registry<T, S, F>;
+}
+
+export default function RichDescription<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ description, registry, uiSchema = {} }: RichDescriptionProps<T, S, F>) {
+  const { globalUiOptions } = registry;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+
+  return (
+    <>
+      {uiOptions.enableMarkdownInDescription ? (
+        <Markdown options={{ disableParsingRawHTML: true }}>{description}</Markdown>
+      ) : (
+        description
+      )}
+    </>
+  );
+}
diff --git a/packages/utils/src/components/index.tsx b/packages/utils/src/components/index.tsx
@@ -0,0 +1,3 @@
+import RichDescription from './RichDescription';
+
+export { RichDescription };
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
@@ -60,6 +60,8 @@ export * from './constants';
 export * from './parser';
 export * from './schema';
 
+export * from './components';
+
 export {
   allowAdditionalItems,
   ariaDescribedByIds,
diff --git a/packages/utils/src/types.ts b/packages/utils/src/types.ts
@@ -541,7 +541,7 @@ export type DescriptionFieldProps<T = any, S extends StrictRJSFSchema = RJSFSche
   /** The uiSchema object for this description field */
   uiSchema?: UiSchema<T, S, F>;
   /** The description of the field being rendered */
-  description: string | ReactElement;
+  description: string;
   /** The `registry` object */
   registry: Registry<T, S, F>;
 };
