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?

[heath-freenome]

@dejanbelusic I would leave the different implementations of DescriptionField alone except render the RichDescription in place of description directly. And sorry for the late reply, I was on holiday for a few weeks.

[dejanbelusic]

Hi @heath-freenome, I commited the changes, please take a look if I understood you correctly.

Also, was looking into updating the tests, but I'm getting some errors, can you give me some pointers on how to troubleshoot them?

[heath-freenome]

Looks good, some suggestions

[heath-freenome]

Please put global imports before local

Suggested change

	import getUiOptions from '../getUiOptions';
	import { FormContextType, Registry, RJSFSchema, StrictRJSFSchema, UiSchema } from '../types';
	import Markdown from 'markdown-to-jsx';
	import Markdown from 'markdown-to-jsx';
	import getUiOptions from '../getUiOptions';
	import { FormContextType, Registry, RJSFSchema, StrictRJSFSchema, UiSchema } from '../types';

[heath-freenome]

Copy some appropriate documentation for each prop from one of the Props in the types.ts file please

[heath-freenome]

This could be simplified down to:

Suggested change

	return (
	<>
	{uiOptions.enableMarkdownInDescription ? (
	<Markdown options={{ disableParsingRawHTML: true }}>{description}</Markdown>
	) : (
	description
	)}
	</>
	);
	if (!uiOptions.enableMarkdownInDescription) {
	return description;
	}
	return <Markdown options={{ disableParsingRawHTML: true }}>{description}</Markdown>;

[heath-freenome]

You'll need to add unit tests for this in rjsf utils to pass the 100% coverage requirement

[heath-freenome]

The package change is so small as to not require mentioning. What does want to be mentioned is that it is a new feature so requires 5.25.0 AND you want to mention the changes in each package.

[heath-freenome]

I believe this wants to be ReactNode as well. Which is what is causing the @rjsf/core tests to fail

[heath-freenome]

@dejanbelusic Thanks for getting this closer to the finish line. I've left you some suggestions and comments