From db7f6a64a1e3ae6c3bd7ad85ff828aad225155ae Mon Sep 17 00:00:00 2001
From: jasquat <2487833+jasquat@users.noreply.github.com>
Date: Tue, 19 Sep 2023 07:37:05 -0400
Subject: [PATCH] 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>
---
 .../src/components/CustomForm.tsx             |  2 +-
 spiffworkflow-frontend/src/index.css          |  4 ++
 .../MarkDownFieldWidget.tsx                   | 41 +++++++++++++++----
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/CustomForm.tsx b/spiffworkflow-frontend/src/components/CustomForm.tsx
index 50085cc9..27c22d7f 100644
--- a/spiffworkflow-frontend/src/components/CustomForm.tsx
+++ b/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) => {
diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css
index c931426a..8ba20168 100644
--- a/spiffworkflow-frontend/src/index.css
+++ b/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;
diff --git a/spiffworkflow-frontend/src/rjsf/custom_widgets/MarkDownFieldWidget/MarkDownFieldWidget.tsx b/spiffworkflow-frontend/src/rjsf/custom_widgets/MarkDownFieldWidget/MarkDownFieldWidget.tsx
index 1cb3b13f..3667df8a 100644
--- a/spiffworkflow-frontend/src/rjsf/custom_widgets/MarkDownFieldWidget/MarkDownFieldWidget.tsx
+++ b/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) => {
-      onChange(newValue);
+      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 (
-    <MDEditor
-      height={500}
-      highlightEnable={false}
-      value={value}
-      onChange={onChangeLocal}
-    />
+    <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>
   );
 }