From b8fd1281fa4602148dfeb638b1eabdee6d3ba7cf Mon Sep 17 00:00:00 2001
From: Julian Wielga <j@touk.pl>
Date: Mon, 12 Aug 2024 00:49:40 +0200
Subject: [PATCH] fix: infinite loop when injected with module federation

---
 src/components/codeEditor.tsx    | 26 +++++++++++++-------------
 src/components/jsonTextField.tsx | 14 +++++++++-----
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/codeEditor.tsx b/src/components/codeEditor.tsx
index aa85dee..fd21d72 100644
--- a/src/components/codeEditor.tsx
+++ b/src/components/codeEditor.tsx
@@ -29,17 +29,17 @@ const CodeBox = styled("div")(({ theme: t }) => ({
     },
 }));
 
-export const CodeEditor = forwardRef<
-    HTMLDivElement,
-    {
-        value: string;
-        onChange: (code: string) => void;
-        rows: number | string;
-        disabled?: boolean;
-        autoFocus?: boolean;
-        formatter?: (code: string) => string;
-    }
->(function CodeEditor(props, forwardedRef) {
+export type CodeEditorProps = {
+    className?: string;
+    value: string;
+    onChange: (code: string) => void;
+    rows: number | string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    formatter?: (code: string) => string;
+};
+
+export const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(function CodeEditor(props, forwardedRef) {
     const { value, onChange, rows, disabled, autoFocus, formatter, ...passProps } = props;
 
     const editorRef = useRef<HTMLDivElement>(null);
@@ -47,7 +47,7 @@ export const CodeEditor = forwardRef<
 
     const jarRef = useRef<CodeJar>(null);
     const positionRef = useRef<Position>(null);
-    const [code, setCode] = useState<string>(null);
+    const [code, setCode] = useState<string>(value);
 
     //init CodeJar
     useEffect(() => {
@@ -96,7 +96,7 @@ export const CodeEditor = forwardRef<
             sx={{
                 maxHeight: rows && `${parseInt(rows.toString()) * 1.45}em`,
             }}
-            onBlurCapture={formatter && (() => jarRef.current?.updateCode(formatter(value)))}
+            onBlurCapture={formatter && (() => jarRef.current?.updateCode(formatter(code)))}
         >
             {value}
         </CodeBox>
diff --git a/src/components/jsonTextField.tsx b/src/components/jsonTextField.tsx
index 6284430..bb84b0e 100644
--- a/src/components/jsonTextField.tsx
+++ b/src/components/jsonTextField.tsx
@@ -1,7 +1,8 @@
+import { useField } from "formik";
 import { TextField } from "formik-mui";
 import { TextFieldProps } from "formik-mui/dist/TextField";
 import React, { useMemo } from "react";
-import { CodeEditor } from "./codeEditor";
+import { CodeEditor, CodeEditorProps } from "./codeEditor";
 
 function formatJson(value: string): string {
     try {
@@ -11,18 +12,21 @@ function formatJson(value: string): string {
     }
 }
 
+const FieldCodeEditor = ({ name, ...props }: CodeEditorProps & { name: string }) => {
+    const [{ value, onChange }] = useField(name);
+    return <CodeEditor {...props} value={value} onChange={onChange} />;
+};
+
 export function JsonTextField(props: TextFieldProps) {
     const {
         field: { name },
-        form: { setFieldValue },
     } = props;
 
     const inputProps = useMemo(
         () => ({
-            inputComponent: CodeEditor as any,
-            onChange: (code) => setFieldValue(name, code),
+            inputComponent: (props) => <FieldCodeEditor name={name} {...props} />,
         }),
-        [name, setFieldValue],
+        [name],
     );
 
     const inputLabelProps = useMemo(() => ({ shrink: true }), []);