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

heath-freenome · 2025-11-06T20:16:37Z

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

        colon={colon}
        hasFeedback={schema.type !== 'array' && schema.type !== 'object'}
-        help={(!!rawHelp && help) || (rawErrors?.length ? errors : undefined)}
+        help={help || (rawErrors?.length ? errors : undefined)}


I'm curious about this change... Why remove !!rawHelp?

@Suyog241005 Still wondering about this...

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

heath-freenome · 2025-11-07T18:54:53Z

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

+  const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);
+  if (typeof help === 'string' && uiOptions.enableMarkdownInHelp) {
+    return (
+      <div id={id} className='help-block'>
+        <Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>
+      </div>
+    );
+  }
+  if (typeof help === 'string') {
+    return (
+      <p id={id} className='help-block'>
+        {help}
+      </p>
+    );
+  }
+  return (
+    <div id={id} className='help-block'>
+      {help}
+    </div>
+  );


Simplify this down to just this:

Suggested change

const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);

if (typeof help === 'string' && uiOptions.enableMarkdownInHelp) {

return (

<div id={id} className='help-block'>

<Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>

</div>

);

}

if (typeof help === 'string') {

return (

<p id={id} className='help-block'>

{help}

</p>

);

}

return (

<div id={id} className='help-block'>

{help}

</div>

);

return (

<div id={id} className='help-block'>

<Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>

</div>

);

heath-freenome · 2025-11-07T18:55:58Z

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

  if (typeof help === 'string') {
    return (
-      <p id={id} className='help-block'>
+      <p id={helpId(fieldPathId)} className='help-block'>
        {help}
      </p>
    );
  }


Remove this section... We don't need the <p> version

heath-freenome · 2025-11-07T18:59:17Z

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

  return (
-    <Form.Text className={hasErrors ? 'text-danger' : 'text-muted'} id={id}>
-      {help}
+    <Form.Text id={helpId(fieldPathId)} className='text-muted'>


Please restore the text-danger logic

…ield

…he tests

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

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

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?

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

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 from cbae16f to c918d74 Compare November 8, 2025 14:31

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

472829c

…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 c918d74 to 472829c Compare November 8, 2025 14:46

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

Are you sure you want to change the base?

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!

heath-freenome Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

heath-freenome Nov 7, 2025

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!

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!

heath-freenome Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

heath-freenome Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

heath-freenome Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

Suyog241005 commented Nov 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants