added a widget to allow markdown fields for rjsf (#461)

Co-authored-by: jasquat <jasquat@users.noreply.github.com>
This commit is contained in:
jasquat 2023-09-07 11:51:24 -04:00 committed by GitHub
parent f2cddc1e3b
commit 25540f32e0
2 changed files with 77 additions and 0 deletions

View File

@ -4,6 +4,7 @@ import { Form } from '../rjsf/carbon_theme';
import { DATE_RANGE_DELIMITER } from '../config';
import DateRangePickerWidget from '../rjsf/custom_widgets/DateRangePicker/DateRangePickerWidget';
import TypeaheadWidget from '../rjsf/custom_widgets/TypeaheadWidget/TypeaheadWidget';
import MarkDownFieldWidget from '../rjsf/custom_widgets/MarkDownFieldWidget/MarkDownFieldWidget';
type OwnProps = {
id: string;
@ -32,6 +33,7 @@ export default function CustomForm({
const rjsfWidgets = {
typeahead: TypeaheadWidget,
'date-range': DateRangePickerWidget,
markdown: MarkDownFieldWidget,
};
const formatDateString = (dateString?: string) => {

View File

@ -0,0 +1,75 @@
import MDEditor from '@uiw/react-md-editor';
import React, { useCallback } from 'react';
interface widgetArgs {
id: string;
value: any;
schema?: any;
uiSchema?: any;
disabled?: boolean;
readonly?: boolean;
rawErrors?: any;
onChange?: any;
autofocus?: any;
label?: string;
}
// NOTE: To properly validate that both start and end dates are specified
// use this pattern in schemaJson for that field:
// "pattern": "\\d{4}-\\d{2}-\\d{2}:::\\d{4}-\\d{2}-\\d{2}"
// eslint-disable-next-line sonarjs/cognitive-complexity
export default function MarkDownFieldWidget({
id,
value,
schema,
uiSchema,
disabled,
readonly,
onChange,
autofocus,
label,
rawErrors = [],
}: widgetArgs) {
let invalid = false;
let errorMessageForField = null;
let labelToUse = label;
if (uiSchema && uiSchema['ui:title']) {
labelToUse = uiSchema['ui:title'];
} else if (schema && schema.title) {
labelToUse = schema.title;
}
const onChangeLocal = useCallback(
(newValue: any) => {
onChange(newValue);
},
[onChange]
);
let helperText = null;
if (uiSchema && uiSchema['ui:help']) {
helperText = uiSchema['ui:help'];
}
if (!invalid && rawErrors && rawErrors.length > 0) {
invalid = true;
if ('validationErrorMessage' in schema) {
errorMessageForField = (schema as any).validationErrorMessage;
} else {
errorMessageForField = `${(labelToUse || '').replace(/\*$/, '')} ${
rawErrors[0]
}`;
}
}
return (
<MDEditor
height={500}
highlightEnable={false}
value={value}
onChange={onChangeLocal}
/>
);
}