Feature: added the ui:enableMarkdownInHelp flag in UiSchema

CHANGELOG.md

@@ -15,6 +15,61 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# 6.1.0
+
+## @rjsf/antd
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+## @rjsf/antd
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+## @rjsf/antd
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+## @rjsf/mui
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+## @rjsf/shadcn
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+## @rjsf/primereact
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+## @rjsf/react-bootstrap
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+## @rjsf/semantic-ui
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+## @rjsf/daisyui
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+## @rjsf/fluentui-rc
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+## @rjsf/chakra-ui
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+## @rjsf/mantine
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+## @rjsf/utils
+
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+
+
 # 6.0.2
 
 ## @rjsf/antd

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

@@ -0,0 +1,27 @@
+import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { RichHelp } from '@rjsf/core';
+
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
+ */
+export default function FieldHelpTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: FieldHelpProps<T, S, F>) {
+  const { fieldPathId, help, uiSchema, registry } = props;
+  if (!help) {
+    return null;
+  }
+
+  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>
+  );
+}

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

@@ -39,7 +39,6 @@ export default function FieldTemplate<
     onRemoveProperty,
     rawErrors,
     rawDescription,
-    rawHelp,
     readonly,
     registry,
     required,
@@ -100,7 +99,7 @@ export default function FieldTemplate<
       <Form.Item
         colon={colon}
         hasFeedback={schema.type !== 'array' && schema.type !== 'object'}
-        help={(!!rawHelp && help) || (rawErrors?.length ? errors : undefined)}
+        help={help || (rawErrors?.length ? errors : undefined)}
         htmlFor={id}
         label={displayLabel && !isCheckbox && label}
         labelCol={labelCol}

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

@@ -0,0 +1,23 @@
+import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
+
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
+ */
+export default function FieldHelpTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: FieldHelpProps<T, S, F>) {
+  const { fieldPathId, help } = props;
+  if (!help) {
+    return null;
+  }
+  const id = helpId(fieldPathId);
+  return (
+    <div id={id} className='help-block'>
+      <Markdown options={{ disableParsingRawHTML: true }}>{help as string}</Markdown>
+    </div>
+  );
+}

packages/antd/src/templates/index.ts

@@ -3,7 +3,7 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@r
 import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
 import ArrayFieldTemplate from './ArrayFieldTemplate';
 import BaseInputTemplate from './BaseInputTemplate';
-import DescriptionField from './DescriptionField';
+import DescriptionField from './FieldDescriptionTemplate';
 import ErrorList from './ErrorList';
 import { AddButton, CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconButton';
 import FieldErrorTemplate from './FieldErrorTemplate';