[FIX] Added value props to markdown editor + reset comment after submit

opsmill · Aug 12, 2024 · 64976c0 · 64976c0
1 parent 1349376
commit 64976c0
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 53 deletions.
diff --git a/frontend/app/src/components/editor/index.tsx b/frontend/app/src/components/editor/index.tsx
@@ -7,6 +7,7 @@ import { MarkdownViewer } from "./markdown-viewer";
 type MarkdownEditorProps = {
   className?: string;
   defaultValue?: string;
+  value?: string;
   disabled?: boolean;
   onChange?: (value: string) => void;
   placeholder?: string;
@@ -16,63 +17,67 @@ type MarkdownEditorProps = {
 export const MarkdownEditor: FC<MarkdownEditorProps> = forwardRef<
   HTMLButtonElement,
   MarkdownEditorProps
->(({ id, className = "", defaultValue = "", disabled = false, onChange, placeholder }, ref) => {
-  const [isPreviewActive, setPreviewActive] = useState<boolean>(false);
-  const [editorText, setEditorText] = useState<string>(defaultValue);
-  const codeMirrorRef = useRef<HTMLDivElement>(null);
+>(
+  (
+    { value, id, className = "", defaultValue = "", disabled = false, onChange, placeholder },
+    ref
+  ) => {
+    const [isPreviewActive, setPreviewActive] = useState<boolean>(false);
+    const codeMirrorRef = useRef<HTMLDivElement>(null);
 
-  const handleTextChange = (value: string) => {
-    setEditorText(value);
-    if (onChange) onChange(value);
-  };
+    const handleTextChange = (value: string) => {
+      if (onChange) onChange(value);
+    };
 
-  const codeMirror = useCodeMirror(codeMirrorRef.current, {
-    placeholder,
-    defaultValue,
-    onChange: handleTextChange,
-  });
+    const codeMirror = useCodeMirror(codeMirrorRef.current, {
+      placeholder,
+      defaultValue,
+      value,
+      onChange: handleTextChange,
+    });
 
-  if (disabled) {
-    return (
-      <MarkdownViewer
-        markdownText={editorText}
-        className="w-full bg-gray-100 min-h-10 rounded-md p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 cursor-not-allowed"
-      />
-    );
-  }
-
-  return (
-    <>
-      {id && (
-        <button
-          id={id}
-          ref={ref}
-          type="button"
-          onClick={() => codeMirror.view?.focus()} // for E2E
-          onFocus={() => codeMirror.view?.focus()}
-          className="w-0 h-0"
+    if (disabled) {
+      return (
+        <MarkdownViewer
+          markdownText={codeMirror.view?.state?.doc.toString()}
+          className="w-full bg-gray-100 min-h-10 rounded-md p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 cursor-not-allowed"
         />
-      )}
-      <div
-        className={classNames(
-          `
+      );
+    }
+
+    return (
+      <>
+        {id && (
+          <button
+            id={id}
+            ref={ref}
+            type="button"
+            onClick={() => codeMirror.view?.focus()} // for E2E
+            onFocus={() => codeMirror.view?.focus()}
+            className="w-0 h-0"
+          />
+        )}
+        <div
+          className={classNames(
+            `
         bg-white rounded-md border border-gray-300 shadow-sm
         focus-within:outline focus-within:outline-custom-blue-600 focus-within:border-custom-blue-600
         `,
-          className
-        )}>
-        <MarkdownEditorHeader
-          codeMirror={codeMirror}
-          previewMode={isPreviewActive}
-          onPreviewToggle={() => setPreviewActive((prev) => !prev)}
-        />
+            className
+          )}>
+          <MarkdownEditorHeader
+            codeMirror={codeMirror}
+            previewMode={isPreviewActive}
+            onPreviewToggle={() => setPreviewActive((prev) => !prev)}
+          />
 
-        {isPreviewActive ? (
-          <MarkdownViewer markdownText={editorText} className="p-2" />
-        ) : (
-          <div ref={codeMirrorRef} data-cy="codemirror-editor" data-testid="codemirror-editor" />
-        )}
-      </div>
-    </>
-  );
-});
+          {isPreviewActive ? (
+            <MarkdownViewer markdownText={codeMirror.view?.state?.doc.toString()} className="p-2" />
+          ) : (
+            <div ref={codeMirrorRef} data-cy="codemirror-editor" data-testid="codemirror-editor" />
+          )}
+        </div>
+      </>
+    );
+  }
+);
diff --git a/frontend/app/src/components/form/fields/textarea.field.tsx b/frontend/app/src/components/form/fields/textarea.field.tsx
@@ -37,6 +37,7 @@ const TextareaField = ({
                 {...field}
                 {...props}
                 defaultValue={defaultValue?.value as string | undefined}
+                value={fieldData?.value as string | undefined}
                 onChange={(newValue) => {
                   field.onChange(updateFormFieldValue(newValue, defaultValue));
                 }}

diff --git a/frontend/app/src/components/ui/form.tsx b/frontend/app/src/components/ui/form.tsx
@@ -29,7 +29,7 @@ export const Form = ({ defaultValues, className, children, onSubmit, ...props }:
 
   useEffect(() => {
     form.reset(defaultValues);
-  }, [JSON.stringify(defaultValues)]);
+  }, [JSON.stringify(defaultValues), form.formState.isSubmitSuccessful]);
 
   return (
     <FormProvider {...form}>

diff --git a/frontend/app/src/hooks/useCodeMirror.ts b/frontend/app/src/hooks/useCodeMirror.ts
@@ -38,6 +38,7 @@ const theme = EditorView.baseTheme({
 
 type CodeMirrorProps = {
   defaultValue?: string;
+  value?: string;
   placeholder?: string;
   onChange?: (value: string) => void;
   lang?: "markdown" | "graphql";
@@ -47,6 +48,7 @@ type CodeMirrorProps = {
 export function useCodeMirror(
   container: HTMLDivElement | null,
   {
+    value,
     defaultValue = "",
     onChange,
     placeholder = "",
@@ -64,6 +66,19 @@ export function useCodeMirror(
     }
   });
 
+  useEffect(() => {
+    if (!view) return;
+
+    const currentValue = view.state.doc.toString();
+    const newValue = value ?? "";
+
+    if (value === currentValue) return;
+
+    view.dispatch({
+      changes: { from: 0, to: currentValue.length, insert: newValue || "" },
+    });
+  }, [value, view]);
+
   useEffect(() => {
     if (containerElement && !state) {
       const langExtensions =