Feature/markdown error fix (#498)

* added widget to edit markdown with rjsf

* build spiffcrm

* updated docker images to build w/ burnettk

---------

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

spiffworkflow-frontend/src/components/CustomForm.tsx

@@ -31,9 +31,9 @@ export default function CustomForm({
   noValidate = false,
 }: OwnProps) {
   const rjsfWidgets = {
-    typeahead: TypeaheadWidget,
     'date-range': DateRangePickerWidget,
     markdown: MarkDownFieldWidget,
+    typeahead: TypeaheadWidget,
   };
 
   const formatDateString = (dateString?: string) => {

spiffworkflow-frontend/src/index.css

@@ -327,6 +327,10 @@ dl dd {
   margin-bottom: .5rem;
 }
 
+.with-half-rem-top-margin {
+  margin-top: .5rem;
+}
+
 .diagram-viewer-canvas {
   border:1px solid #000000;
   height:70vh;

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

@@ -16,6 +16,7 @@ interface widgetArgs {
   label?: string;
 }
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 export default function MarkDownFieldWidget({
   id,
   value,
@@ -40,9 +41,11 @@ export default function MarkDownFieldWidget({
 
   const onChangeLocal = useCallback(
     (newValue: any) => {
+      if (!disabled && !readonly) {
         onChange(newValue);
+      }
     },
-    [onChange]
+    [onChange, disabled, readonly]
   );
 
   let helperText = null;
@@ -61,12 +64,34 @@ export default function MarkDownFieldWidget({
     }
   }
 
+  // cds-- items come from carbon and how it displays helper text and errors.
+  // carbon also removes helper text when error so doing that here as well.
+  // TODO: highlight the MDEditor in some way - we are only showing red text atm.
   return (
+    <div className="with-half-rem-top-margin">
+      <div
+        className="cds--text-input__field-wrapper"
+        data-invalid={invalid}
+        style={{ display: 'inline' }}
+      >
+        <div data-color-mode="light" id={id}>
           <MDEditor
             height={500}
             highlightEnable={false}
             value={value}
             onChange={onChangeLocal}
+            autoFocus={autofocus}
           />
+        </div>
+      </div>
+      <div id={`${id}-error-msg`} className="cds--form-requirement">
+        {errorMessageForField}
+      </div>
+      {invalid ? null : (
+        <div id="root-helper-text" className="cds--form__helper-text">
+          {helperText}
+        </div>
+      )}
+    </div>
   );
 }