Markdown in descriptions

CHANGELOG.md

@@ -21,11 +21,16 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/core
 
 - Fix default value population when switching between options in `MultiSchemaField` [#4375](https://github.com/rjsf-team/react-jsonschema-form/pull/4375). Fixes [#4367](https://github.com/rjsf-team/react-jsonschema-form/issues/4367)
+- Updated `ObjectField` and `CheckboxWidget` to render markdown in the description when `enableMarkdownInDescription` is set to `true`, fixing [#3975](https://github.com/rjsf-team/react-jsonschema-form/issues/3975)
 
 ## @rjsf/validator-ajv8
 
 - Fixed issue where `ui:title` in anyOf/oneOf is not shown in error messages. Fixes [#4368](https://github.com/rjsf-team/react-jsonschema-form/issues/4368)
 
+## Dev / docs / playground
+
+- Fixed typo in `package.json`
+
 # 5.23.1
 
 ## @rjsf/chakra-ui

package.json

@@ -21,7 +21,7 @@
     "prepare": "husky install",
     "format": "prettier --write .",
     "format-check": "prettier --check .",
-    "bump-all-packages": "echo 'NOTE: Make sure to sanity check the playground locally before commiting changes' && npm update --save && npm install && npm run lint && npm run build && npm run test",
+    "bump-all-packages": "echo 'NOTE: Make sure to sanity check the playground locally before committing changes' && npm update --save && npm install && npm run lint && npm run build && npm run test",
     "bump-peer-deps": "node scripts/bump-peer-deps.js",
     "refresh-node-modules": "rimraf packages/*/node_modules && rimraf node_modules && npm install",
     "commit-package-changes": "git add package-lock.json packages/*/package*.json && cross-env CI=skipPrecommit git commit -m 'updated package*.json after versioning' && git push",

packages/core/src/components/fields/ObjectField.tsx

@@ -259,6 +259,11 @@ 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);
@@ -281,7 +286,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 : description,
+      description: uiOptions.label === false ? undefined : richDescription,
       properties: orderedProperties.map((name) => {
         const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
         const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];

packages/core/src/components/widgets/CheckboxWidget.tsx

@@ -9,7 +9,9 @@ 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.
@@ -32,6 +34,9 @@ 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,
@@ -58,12 +63,18 @@ 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={description}
+          description={richDescription}
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}

packages/core/test/ObjectField.test.jsx

@@ -1203,4 +1203,76 @@ describe('ObjectField', () => {
       });
     });
   });
+
+  describe('markdown', () => {
+    const schema = {
+      title: 'A list of tasks',
+      type: 'object',
+      properties: {
+        tasks: {
+          description: 'New *description*, with some Markdown.',
+          type: 'object',
+          title: 'Tasks',
+          properties: {
+            details: {
+              type: 'string',
+              title: 'Task details',
+              description: 'Description to renders Markdown **correctly**.',
+            },
+            has_markdown: {
+              type: 'boolean',
+              description: 'Checkbox with some `markdown`!',
+            },
+          },
+        },
+      },
+    };
+
+    const uiSchema = {
+      tasks: {
+        'ui:enableMarkdownInDescription': true,
+        details: {
+          'ui:enableMarkdownInDescription': true,
+          'ui:widget': 'textarea',
+        },
+        has_markdown: {
+          'ui:enableMarkdownInDescription': true,
+        },
+      },
+    };
+
+    it('should render markdown in description when enableMarkdownInDescription is set to true', () => {
+      const { node } = createFormComponent({ schema, uiSchema });
+
+      const { innerHTML: rootInnerHTML } = node.querySelector('form .form-group .form-group .field-description');
+      expect(rootInnerHTML).to.contains('New <em>description</em>, with some Markdown.');
+
+      const { innerHTML: detailsInnerHTML } = node.querySelector(
+        'form .form-group .form-group .field-string .field-description'
+      );
+      expect(detailsInnerHTML).to.contains('Description to renders Markdown <strong>correctly</strong>.');
+
+      const { innerHTML: checkboxInnerHTML } = node.querySelector(
+        'form .form-group .form-group .field-boolean .field-description'
+      );
+      expect(checkboxInnerHTML).to.contains('Checkbox with some <code>markdown</code>!');
+    });
+    it('should not render markdown in description when enableMarkdownInDescription is not present in uiSchema', () => {
+      const { node } = createFormComponent({ schema });
+
+      const { innerHTML: rootInnerHTML } = node.querySelector('form .form-group .form-group .field-description');
+      expect(rootInnerHTML).to.contains('New *description*, with some Markdown.');
+
+      const { innerHTML: detailsInnerHTML } = node.querySelector(
+        'form .form-group .form-group .field-string .field-description'
+      );
+      expect(detailsInnerHTML).to.contains('Description to renders Markdown **correctly**.');
+
+      const { innerHTML: checkboxInnerHTML } = node.querySelector(
+        'form .form-group .form-group .field-boolean .field-description'
+      );
+      expect(checkboxInnerHTML).to.contains('Checkbox with some `markdown`!');
+    });
+
+  });
 });

packages/utils/src/types.ts

@@ -683,7 +683,7 @@ export type ObjectFieldTemplateProps<
   /** A string value containing the title for the object */
   title: string;
   /** A string value containing the description for the object */
-  description?: string;
+  description?: ReactNode;
   /** A boolean value stating if the object is disabled */
   disabled?: boolean;
   /** An array of objects representing the properties in the object */