Markdown in descriptions

[dejanbelusic]

Update the feature to render markdown in the field description.

In the fields of type object and type boolean, markdown will be rendered in the description when enableMarkdownInDescription is set to true.

Issue reporting this bug: #3975
Previous PR to add the feature: #3665

The result:

Checklist

• I'm updating documentation
  • I've checked the rendering of the Markdown text I've added
• I'm adding or updating code
  • I've added and/or updated tests. I've run npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:update to update snapshots, if needed.
  • I've updated docs if needed
  • I've updated the changelog with a description of the PR
• I'm adding a new feature
  • I've updated the playground with an example use of the feature

[heath-freenome]

@dejanbelusic after looking around it turns out that every theme's CheckboxWidget has a similar description rendering logic in it. We suggest creating a new component in the @rjsf/utils package that wraps this logic as follows and then updating every FieldDescriptionTemplate to use it:

export interface RichDescriptionProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  /** The description of the field being rendered */
  description: ReactNode;
  /** The uiSchema that was passed to field */
  uiSchema?: UiSchema<T, S, F>;
  /** The `registry` object */
  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);
  if (uiOptions.enableMarkdownInDescription) {
    return <Markdown options={{ disableParsingRawHTML: true }}>{description || ''}</Markdown>
 }
 return description;
}

With all the FieldDescriptionTemplates calling it similarly to the change that would be made in @rjsf/core's implementation:

export default function DescriptionField<
  T = any,
  S extends StrictRJSFSchema = RJSFSchema,
  F extends FormContextType = any
>(props: DescriptionFieldProps<T, S, F>) {
  const { id, description, uiSchema, registry } = props;
  if (!description) {
    return null;
  }
  return (
   <div id={id} className='field-description'>
      <RichDescription<T,S,F> description={description} uiSchema={uiSchema} registry={registry} />
    </div>
  );
}

[dejanbelusic]

Hi @heath-freenome, I see your point and I agree. I can create a new component RichDescription as suggested, place it in the @rjsf/utils, and then use it in every DescriptionField component.

When looking into DescriptionField components, I can see that one in @rjsf/antd packages is wrapped in a span, the one in @rjsf/bootstrap-4 is wrapped in two divs, the one in @rjsf/chakra-ui package is wrapped in Text component... What I'm saying is every theme has similar, but different implementation. Do I leave them as is?