fix question

package-lock.json

@@ -30,6 +30,7 @@
         "react-dom": "^18.3.1",
         "react-i18next": "^13.5.0",
         "react-icons": "^4.12.0",
+        "react-intersection-observer": "^9.13.1",
         "react-katex": "^3.0.1",
         "react-latex": "^2.0.0",
         "react-latex-next": "^3.0.0",
@@ -8928,6 +8929,20 @@
         "react": "*"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz",
+      "integrity": "sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -17330,6 +17345,12 @@
       "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
       "requires": {}
     },
+    "react-intersection-observer": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz",
+      "integrity": "sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -25,6 +25,7 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^13.5.0",
     "react-icons": "^4.12.0",
+    "react-intersection-observer": "^9.13.1",
     "react-katex": "^3.0.1",
     "react-latex": "^2.0.0",
     "react-latex-next": "^3.0.0",

src/Components/LatextInput/LaTeXInput.tsx

@@ -22,12 +22,6 @@ const LaTeXInput = ({name,label,...props}:ILaTeXInput) => {
   const { ShowLatexOption } = useObjectToEdit();
   const [showPreview, setShowPreview] = useState(false) ;
     const value  = getFieldProps(name)?.value
-  const handleChangeInput =
-  (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    setFieldValue(name,e.target.value);
-  };
   
   const Preview =  parseTextAndLatex(value ?? "") ; 
   
@@ -54,6 +48,12 @@ const LaTeXInput = ({name,label,...props}:ILaTeXInput) => {
     setLatex(item)
     setIsEditModalOpen(true)
   }
+
+  const [curCentValue, setCurrentValue] = useState(value)
+  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFieldValue(name, e.target.value);
+    setCurrentValue(e.target.value)
+  };
   return (
     <div className='LaTeXInput'>
 
@@ -69,7 +69,7 @@ const LaTeXInput = ({name,label,...props}:ILaTeXInput) => {
     autoSize={{ minRows: 6, maxRows: 10 }} 
     style={{height:"400px"}}
     onChange={handleChangeInput}
-    value={value}
+    value={curCentValue}
     {...props}
     
   />

src/Components/LatextInput/LaTeXInputMemo.tsx

@@ -22,12 +22,6 @@ const LaTeXInputMemo: React.FC<any> =  React.memo(({ field ,form, label, ...prop
 
   const { ShowLatexOption } = useObjectToEdit();
   const [showPreview, setShowPreview] = useState(false);      
-
-  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setFieldValue(name, e.target.value);
-  };
-  console.log(name,"name");
-  
   const Preview = parseTextAndLatex(value ?? "");
 
   const onPreviewChange: CheckboxProps['onChange'] = (e) => {
@@ -50,6 +44,15 @@ const LaTeXInputMemo: React.FC<any> =  React.memo(({ field ,form, label, ...prop
     setIsEditModalOpen(true);
   };
 
+  const [curCentValue, setCurrentValue] = useState(value)
+  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setCurrentValue(e.target.value)
+  };
+  const onBlur = ()=>{
+    
+    setFieldValue(name, curCentValue);
+  }
+
   return (
     <div className='LaTeXInput'>
       <label htmlFor={name} className="text">
@@ -64,7 +67,8 @@ const LaTeXInputMemo: React.FC<any> =  React.memo(({ field ,form, label, ...prop
           autoSize={{ minRows: 6, maxRows: 10 }} 
           style={{ height: "400px" }}
           onChange={handleChangeInput}
-          value={value}
+          value={curCentValue}
+          onBlur={onBlur}
           {...props}
         />
         

src/Pages/Admin/question/Model/Malty/components/Question.tsx

@@ -7,7 +7,7 @@ import ValidationField from "../../../../../../Components/ValidationField/Valida
 import MaltySelectTag from "../Tags/MaltySelectTag";
 import { toast } from "react-toastify";
 
-export  const Question: React.FC<any> = React.memo(({ index, style, data }) => {
+export  const Question: React.FC<any> = React.memo(({ index, data }) => {
   const { values, setFieldValue, ShowHint, t } = data;
 
   const handleAddChoice = useCallback((
@@ -30,7 +30,7 @@ export  const Question: React.FC<any> = React.memo(({ index, style, data }) => {
   }, [setFieldValue, values, t]);
   
   return (
-    <div style={style}>
+    <div >
       <div className="exercise_form QuestionFIeld">
         <QuestionFIeld setFieldValue={setFieldValue} values={values} key={index} index={index} />
       </div>

src/Pages/Admin/question/Model/Malty/components/Questions.tsx

@@ -25,6 +25,7 @@ const Questions: React.FC<QuestionsProps> = React.memo(({ setFieldValue, values
     if (question.answers?.length < 5) height += 40; // "Add new choice" button
     if (ShowHint) height += 80; // Hint field
     height += 50; // MaltySelectTag
+    console.log(height);
     
     return height;
   }, [questions, ShowHint]);
@@ -43,18 +44,26 @@ const Questions: React.FC<QuestionsProps> = React.memo(({ setFieldValue, values
   }, [questions, ShowHint]);
 
   return (
-    <List
+ <>
+    {/* <List
       ref={listRef}
-      height={window.innerHeight - 20} // Adjust based on your layout
+      height={window.innerHeight - 450} // Adjust based on your layout
       itemCount={questions?.length}
       itemSize={getItemSize}
       width="100%"
       itemData={itemData}
       direction='rtl'
-      className=' '
+      className='ListQuestions'
     > 
+      
       {Question}
-    </List>
+    </List> */}
+    {questions?.map((item:any,index:number)=>{
+      return (
+          <Question key={index} index={index} data={{ values, setFieldValue, ShowHint, t }} />
+      )
+    })}
+ </>
   );
 }, (prevProps, nextProps) => prevProps?.values?.Questions === nextProps?.values?.Questions);
 

src/Pages/Home/Dummy.tsx

@@ -1,11 +1,29 @@
+import { Formik,Form, Field } from "formik";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import LaTeXInputMemo from "./LaTeXInputMemo";
 const Dummy = () => {
   const [t] = useTranslation();
   return (
     <div className="DummyHomePage">
       
+      <Formik initialValues={{}} onSubmit={()=>{}}>
+        <Form>
+          {Array.from({length:1000}).map((item:any,index)=>{
+            return (
+              <div key={index}>
 
+      <Field 
+      name={`content${index}`} 
+      component={LaTeXInputMemo} 
+      label={t("input.answer_content")} 
+    />
+ 
+              </div>
+            )
+          })}
+        </Form>
+      </Formik>
 
     </div>
   );

src/Pages/Home/LaTeXInputMemo.tsx

@@ -0,0 +1,63 @@
+import TextArea from 'antd/es/input/TextArea';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const LaTeXInputMemo: React.FC<any> =  React.memo(({ field ,form, label, ...props }) => {
+  const { name  ,value} = field;
+  
+  const { setFieldValue } = form;
+  const [curCentValue, setCurrentValue] = useState(value)
+  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFieldValue(name, e.target.value);
+    setCurrentValue(e.target.value)
+  };
+  console.log(name,"name");
+
+  const [t] = useTranslation();
+  
+
+
+  return (
+    <div className='LaTeXInput'>
+      <label htmlFor={name} className="text">
+        {t(label || name)}
+      </label>
+
+      <div className='LaTeXInputArea'>
+        <TextArea
+          size="large"
+          showCount
+          maxLength={1000}
+          autoSize={{ minRows: 6, maxRows: 10 }} 
+          style={{ height: "400px" }}
+          onChange={handleChangeInput}
+          value={curCentValue}
+          {...props}
+        />
+        
+     
+      </div>
+    </div>
+  );
+}, (
+  prevProps: any,
+  nextProps: any
+): boolean => {
+  const prevError = prevProps.form.errors[prevProps.field.name];
+  const nextError = nextProps.form.errors[nextProps.field.name];
+
+  const prevTouched = prevProps.form.touched[prevProps.field.name];
+  const nextTouched = nextProps.form.touched[nextProps.field.name];
+
+  const prevValue = prevProps.field.value;
+  const nextValue = nextProps.field.value;
+
+  return (
+    prevValue === nextValue 
+    &&
+    prevError === nextError &&
+    prevTouched === nextTouched
+  )
+});
+
+export default LaTeXInputMemo;

src/Styles/Pages/exercise.scss

@@ -358,5 +358,5 @@
 
 .ListQuestions{
   @include Scrollbar();
-  margin-bottom: 30px;
+
 }