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

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

spiffworkflow-frontend/src/components/CustomForm.tsx

@@ -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) => {

spiffworkflow-frontend/src/rjsf/custom_widgets/MarkDownFieldWidget/MarkDownFieldWidget.tsx

@@ -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}
+    />
+  );
+}