Feature: added the ui:enableMarkdownInHelp flag in UiSchema #4855

Suyog241005 · 2025-11-06T10:45:51Z

Reasons for making this change

This PR implements the ability to render markdown in help text fields across all themes by introducing a new ui:enableMarkdownInHelp flag, similar to the existing ui:enableMarkdownInDescription functionality.

-Updated all theme packages to support markdown in help text

Fixes 4601

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

Suyog241005 · 2025-11-06T13:25:24Z

Hi @heath-freenome , all the test cases for this PR have passed successfully. Could you please review it when you get the chance and let me know if any further changes or improvements are needed before merging?

CHANGELOG.md

heath-freenome

Also, please add test to formTest.tsx in snapshot-tests to verify the markdown help

packages/antd/src/templates/FieldHelpTemplate/index.tsx

packages/core/src/components/templates/FieldHelpTemplate.tsx

packages/antd/src/templates/FieldHelpTemplate/index.tsx

packages/chakra-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx

packages/daisyui/src/templates/FieldHelpTemplate/FieldHelpTemplate.tsx

packages/primereact/src/FieldHelpTemplate/FieldHelpTemplate.tsx

packages/react-bootstrap/src/FieldHelpTemplate/FieldHelpTemplate.tsx

packages/semantic-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx

packages/shadcn/src/FieldHelpTemplate/FieldHelpTemplate.tsx

CHANGELOG.md

packages/antd/src/templates/FieldTemplate/index.tsx

packages/core/src/components/templates/FieldHelpTemplate.tsx

packages/snapshot-tests/src/formTests.tsx

packages/daisyui/src/templates/FieldHelpTemplate/FieldHelpTemplate.tsx

packages/fluentui-rc/src/FieldHelpTemplate/FieldHelpTemplate.tsx

packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx

packages/primereact/src/FieldHelpTemplate/FieldHelpTemplate.tsx

packages/react-bootstrap/src/FieldHelpTemplate/FieldHelpTemplate.tsx

packages/shadcn/src/FieldHelpTemplate/FieldHelpTemplate.tsx

CHANGELOG.md

heath-freenome · 2025-11-07T18:05:26Z

@Suyog241005 If you could respond to my questions I've left in the review, I'd appreciate it

Suyog241005 · 2025-11-07T18:42:56Z

@heath-freenome I’ve updated the changelog as requested. Please let me know if anything else needs adjustment.

heath-freenome

A few more changes

packages/antd/src/templates/HelpField/index.tsx

packages/core/src/components/templates/FieldHelpTemplate.tsx

packages/react-bootstrap/src/FieldHelpTemplate/FieldHelpTemplate.tsx

…ield

…he tests

Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>

Suyog241005 · 2025-11-08T14:50:09Z

Hi @heath-freenome, I’ve implemented all the requested changes.

Could you please review the latest updates when you get a chance?

heath-freenome · 2025-11-09T05:52:39Z

packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx

  return (
-    <FormHelperText component='div' id={id}>
-      {help}
+    <FormHelperText id={helpId(fieldPathId)} style={{ marginTop: '5px' }}>


Please restore the component='div'

Suggested change

<FormHelperText id={helpId(fieldPathId)} style={{ marginTop: '5px' }}>

<FormHelperText component='div' id={helpId(fieldPathId)} style={{ marginTop: '5px' }}>

heath-freenome · 2025-11-09T18:04:22Z

packages/antd/src/templates/HelpField/index.tsx

You can delete this entire file since you now have FieldHelpTemplate.

heath-freenome · 2025-11-09T18:10:03Z

packages/antd/src/templates/FieldHelpTemplate/index.tsx

+  const id = helpId(fieldPathId);
+
+  return (
+    <div id={id} className='ant-form-item-extra'>
+      <div className='help-block'>
+        {typeof help === 'string' ? help : <RichHelp help={help} registry={registry} uiSchema={uiSchema} />}
+      </div>
+    </div>
+  );


Is the extra div and ant-form-item-extra required? And also, doesn't the RichHelp already handle the help is string case?

Suggested change

const id = helpId(fieldPathId);

return (

<div id={id} className='ant-form-item-extra'>

<div className='help-block'>

{typeof help === 'string' ? help : <RichHelp help={help} registry={registry} uiSchema={uiSchema} />}

</div>

</div>

);

return (

<div id={helpId(fieldPathId)} className='help-block'>

<RichHelp help={help} registry={registry} uiSchema={uiSchema} />

</div>

);

heath-freenome · 2025-11-09T18:11:23Z

packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx

  return (
-    <FormHelperText component='div' id={id}>
-      {help}
+    <FormHelperText component={'div'} id={helpId(fieldPathId)} style={{ marginTop: '5px' }}>


Suggested change

<FormHelperText component={'div'} id={helpId(fieldPathId)} style={{ marginTop: '5px' }}>

<FormHelperText component='div' id={helpId(fieldPathId)} style={{ marginTop: '5px' }}>

…estored text-danger logic in Bootstrap FieldHelpTemplate & updated core test to expect div.help-block instead of p.help-block

Suyog241005 · 2025-11-09T18:35:56Z

@heath-freenome , i have made the changes as per instructed

heath-freenome · 2025-11-09T19:04:14Z

@heath-freenome , i have made the changes as per instructed

Thanks for all your hard work!

Suyog241005 · 2025-11-10T06:03:37Z

@heath-freenome , i have made the changes as per instructed

Thanks for all your hard work!

The pleasure is mine 😊

Suyog241005 force-pushed the fix/#4601-added-UiSchema-enableMarkdownInHelp-flag branch 2 times, most recently from 6e9390a to e7391fd Compare November 6, 2025 13:08

heath-freenome reviewed Nov 6, 2025

View reviewed changes

CHANGELOG.md Show resolved Hide resolved

Suyog241005 force-pushed the fix/#4601-added-UiSchema-enableMarkdownInHelp-flag branch from e7391fd to b337908 Compare November 6, 2025 18:46

heath-freenome reviewed Nov 6, 2025

View reviewed changes

heath-freenome changed the title ~~added the ui:enableMarkdownInHelp flag in UiSchema~~ Feature: added the ui:enableMarkdownInHelp flag in UiSchema Nov 6, 2025

heath-freenome reviewed Nov 6, 2025

View reviewed changes

heath-freenome reviewed Nov 7, 2025

View reviewed changes

Suyog241005 force-pushed the fix/#4601-added-UiSchema-enableMarkdownInHelp-flag branch 2 times, most recently from 398ab33 to 17938e6 Compare November 7, 2025 13:16

heath-freenome reviewed Nov 7, 2025

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

heath-freenome reviewed Nov 7, 2025

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

heath-freenome reviewed Nov 7, 2025

View reviewed changes

packages/antd/src/templates/HelpField/index.tsx Outdated Show resolved Hide resolved

packages/core/src/components/templates/FieldHelpTemplate.tsx Outdated Show resolved Hide resolved

packages/react-bootstrap/src/FieldHelpTemplate/FieldHelpTemplate.tsx Outdated Show resolved Hide resolved

Suyog241005 and others added 14 commits November 8, 2025 19:58

updated core/Fieldhelp, react-bootstrap/fieldHelpTemplate, antd/HelpF…

877604f

…ield

added the ui:enableMarkdownInHelp flag in UiSchema

f2395f5

Updated Changelog.md

bad27f9

Implemented help field markdown using RichHelp.tsx component, added t…

8f86a8f

…he tests

updated the tests

53e9be0

updated the changes according to descriptionField

ded4061

Update CHANGELOG.md

024aa16

Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>

Update CHANGELOG.md

90f62f0

Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>

Updated

df5ed97

Updated

a35fbd3

added the ui:enableMarkdownInHelp flag in UiSchema

8d5ed07

added the ui:enableMarkdownInHelp flag in UiSchema

119bad6

added the ui:enableMarkdownInHelp flag in UiSchema

c8116ed

Updated

bc08e21

Suyog241005 added 6 commits November 8, 2025 20:00

updated to pass the test

046b34a

Updated

b54db98

updated to pass the test

cd25de4

updated to pass the test

db23358

fix(antd): update FieldHelpTemplate to match snapshot expectations

9f45580

updated the tests

6251cd5

Suyog241005 force-pushed the fix/#4601-added-UiSchema-enableMarkdownInHelp-flag branch 2 times, most recently from c918d74 to 472829c Compare November 8, 2025 14:46

heath-freenome reviewed Nov 9, 2025

View reviewed changes

Suyog241005 force-pushed the fix/#4601-added-UiSchema-enableMarkdownInHelp-flag branch 2 times, most recently from d1e773a to 4b3bca1 Compare November 9, 2025 18:10

heath-freenome reviewed Nov 9, 2025

View reviewed changes

Suyog241005 force-pushed the fix/#4601-added-UiSchema-enableMarkdownInHelp-flag branch from 4b3bca1 to 7cd0eb1 Compare November 9, 2025 18:26

Updated antd HelpField to consistently use Markdown for help text & r…

6910c5c

…estored text-danger logic in Bootstrap FieldHelpTemplate & updated core test to expect div.help-block instead of p.help-block

Suyog241005 force-pushed the fix/#4601-added-UiSchema-enableMarkdownInHelp-flag branch from 7cd0eb1 to 6910c5c Compare November 9, 2025 18:28

heath-freenome approved these changes Nov 9, 2025

View reviewed changes

heath-freenome merged commit 619eead into rjsf-team:main Nov 9, 2025
5 checks passed

	<FormHelperText id={helpId(fieldPathId)} style={{ marginTop: '5px' }}>
	<FormHelperText component='div' id={helpId(fieldPathId)} style={{ marginTop: '5px' }}>

	<FormHelperText component={'div'} id={helpId(fieldPathId)} style={{ marginTop: '5px' }}>
	<FormHelperText component='div' id={helpId(fieldPathId)} style={{ marginTop: '5px' }}>

Feature: added the ui:enableMarkdownInHelp flag in UiSchema #4855

Feature: added the ui:enableMarkdownInHelp flag in UiSchema #4855

Conversation

Suyog241005 commented Nov 6, 2025

Reasons for making this change

Checklist

Uh oh!

Suyog241005 commented Nov 6, 2025

Uh oh!

Uh oh!

heath-freenome left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

heath-freenome commented Nov 7, 2025

Uh oh!

Suyog241005 commented Nov 7, 2025

Uh oh!

heath-freenome left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Suyog241005 commented Nov 8, 2025

Uh oh!

heath-freenome Nov 9, 2025

Choose a reason for hiding this comment

Uh oh!

heath-freenome Nov 9, 2025

Choose a reason for hiding this comment

Uh oh!

heath-freenome Nov 9, 2025

Choose a reason for hiding this comment

Uh oh!

heath-freenome Nov 9, 2025

Choose a reason for hiding this comment

Uh oh!

Suyog241005 commented Nov 9, 2025

Uh oh!

Uh oh!

heath-freenome commented Nov 9, 2025

Uh oh!

Suyog241005 commented Nov 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants