button verstekcn wenn Formel bearbeitet werden

math-tutor/frontend/src/components/Chat/MessageInput.tsx

-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { EditPencil, Send, Upload } from "iconoir-react";
 import { t } from "../../i18n";
 import "mathquill/build/mathquill.css";
@@ -255,6 +255,7 @@ export default function MessageInput({
   const sendButtonStartedFromEditorRef = useRef(false);
   const currentValueRef = useRef(value);
   const mqRef = useRef<MathQuillInterface | null>(null);
+  const [isMathBoxActive, setIsMathBoxActive] = useState(false);
 
   const syncEditorToValue = async (nextValue: string) => {
     const editor = editorRef.current;
@@ -313,6 +314,7 @@ export default function MessageInput({
       fieldElement.replaceWith(rendered);
       activeMathFields.delete(fieldElement);
       field.revert();
+      setIsMathBoxActive(false);
       commitEditorValue();
       return rendered;
     };
@@ -338,6 +340,9 @@ export default function MessageInput({
     element.dataset.empty = latex ? "false" : "true";
 
     const root = field.el();
+    root.addEventListener("focusin", () => {
+      setIsMathBoxActive(true);
+    });
     root.addEventListener("keydown", (event) => {
       if (event.key !== "Enter") {
         return;
@@ -353,6 +358,7 @@ export default function MessageInput({
         if (root.contains(document.activeElement)) {
           return;
         }
+        setIsMathBoxActive(false);
         finalizeMathField();
       });
     });
@@ -508,18 +514,20 @@ export default function MessageInput({
             {t("revealSolution")}
           </button>
         ) : null}
-        <button
-          className="btn btn-formula"
-          type="button"
-          onClick={() => {
-            void insertMathFieldAtCaret();
-          }}
-          disabled={isSending}
-          aria-label={t("formula")}
-          title={t("formula")}
-        >
-          f (x)
-        </button>
+        {!isMathBoxActive ? (
+          <button
+            className="btn btn-formula"
+            type="button"
+            onClick={() => {
+              void insertMathFieldAtCaret();
+            }}
+            disabled={isSending}
+            aria-label={t("formula")}
+            title={t("formula")}
+          >
+            f (x)
+          </button>
+        ) : null}
         <button
           className="btn primary"
           type="button"