Merge pull request #326 from amplimindcc/322-fix-markdown-editor-styling

322 fix markdown editor styling
amplimindcc · Jun 10, 2024 · bbe64e9 · bbe64e9
2 parents 71fadce + 766c31c
commit bbe64e9
Showing 1 changed file with 31 additions and 24 deletions.
diff --git a/src/pages/Admin/components/Challenges/Challenges.tsx b/src/pages/Admin/components/Challenges/Challenges.tsx
@@ -192,14 +192,16 @@ export default function Challenges() {
                 className="input"
             ></input>
             <br />
-            <MilkdownProvider>
-                <ChallengeDescription
-                    isEditingEnabled={false}
-                    onChange={() => null}
-                    id={0}
-                    description={params.node.data.description}
-                />
-            </MilkdownProvider>
+            <div className="milkdown-editor">
+                <MilkdownProvider>
+                    <ChallengeDescription
+                        isEditingEnabled={false}
+                        onChange={() => null}
+                        id={0}
+                        description={params.node.data.description}
+                    />
+                </MilkdownProvider>
+            </div>
         </>
     );
 
@@ -255,33 +257,38 @@ export default function Challenges() {
     /**
      * Handles the Title Input Field Change and calls the changeTitle function to change the title of a challenge in the backend accordingly.
      * @author Timo Hauser
+     * @author Steven Burger
      *
      * @async
      * @param {number} id
      * @param {React.ChangeEvent<HTMLInputElement>} event
      * @returns {void}
      */
+    let timeout: ReturnType<typeof setTimeout> = setTimeout(() => null, 0);
     async function handleChangeTitle(
         id: number,
         event: React.ChangeEvent<HTMLInputElement>
     ) {
-        try {
-            const res: Response = await challenge.changeTitle(
-                id,
-                event.target.value
-            );
-            if (!res.ok) {
-                const data = await res.json();
-                toast.showToast(
-                    ToastType.ERROR,
-                    toast.httpError(res.status, data.error)
+        clearTimeout(timeout);
+        timeout = setTimeout(async () => {
+            try {
+                const res: Response = await challenge.changeTitle(
+                    id,
+                    event.target.value
                 );
+                if (!res.ok) {
+                    const data = await res.json();
+                    toast.showToast(
+                        ToastType.ERROR,
+                        toast.httpError(res.status, data.error)
+                    );
+                }
+            } catch (err: unknown) {
+                if (err instanceof Error) {
+                    toast.showToast(ToastType.ERROR, err.message);
+                }
             }
-        } catch (err: unknown) {
-            if (err instanceof Error) {
-                toast.showToast(ToastType.ERROR, err.message);
-            }
-        }
+        }, 650);
     }
 
     /**
@@ -520,4 +527,4 @@ export default function Challenges() {
             </div>
         </div>
     );
-}
+}