From efb687b74274dcc21af1935355c003960d125c83 Mon Sep 17 00:00:00 2001
From: karimaldeen <mhmadkarimaldeen@gmail.com>
Date: Sat, 21 Sep 2024 09:12:01 +0300
Subject: [PATCH] end mml input

---
 .../{LaTexModal.tsx => AddLaTexModal.tsx}     |   9 +-
 src/Components/LatextInput/EditLaTexModal.tsx |  89 +++++++++++++++
 src/Components/LatextInput/LaTeXInput.tsx     |  76 ++++++++-----
 .../ValidationField/View/TextField.tsx        |   3 +-
 src/Components/exercise/Header.tsx            |  23 ++--
 src/Pages/Admin/Grade/useTableColumns.tsx     |   1 +
 src/Pages/Admin/Tags/useTableColumns.tsx      |   1 +
 src/Pages/Admin/Unit/useTableColumns.tsx      |   1 +
 src/Pages/Admin/lesson/useTableColumns.tsx    |   1 +
 src/Pages/Admin/question/AddPage.tsx          |  57 ++++++----
 src/Pages/Admin/question/EditPage.tsx         | 103 ++++++++++++------
 .../question/Model/Field/ChoiceFields.tsx     |  16 +--
 .../Model/Malty/ChoiceField/CheckboxField.tsx |   4 +-
 .../Model/Malty/ChoiceField/ChoiceFields.tsx  |  11 +-
 src/Pages/Admin/question/Model/Malty/Form.tsx |   8 +-
 .../Malty/QuestionFIeld/QuestionFIeld.tsx     |  17 +--
 src/Pages/Admin/question/Model/ModelForm.tsx  |   9 +-
 src/Pages/Admin/question/formUtil.ts          |   9 +-
 src/Pages/Admin/subject/Table/Page.tsx        |   1 -
 .../Admin/subject/Table/useTableColumns.tsx   |   1 +
 src/Pages/Home/Dummy.tsx                      |  22 +---
 src/Styles/Pages/exercise.scss                |   2 +-
 src/Styles/components/LaTeXInput.scss         |  14 ++-
 src/enums/LocalStorageEnum.ts                 |   2 +
 src/translate/ar.json                         |   3 +-
 src/utils/parseTextAndLatex.ts                |   7 +-
 src/zustand/ObjectToEditState.ts              |   8 +-
 27 files changed, 327 insertions(+), 171 deletions(-)
 rename src/Components/LatextInput/{LaTexModal.tsx => AddLaTexModal.tsx} (92%)
 create mode 100644 src/Components/LatextInput/EditLaTexModal.tsx

diff --git a/src/Components/LatextInput/LaTexModal.tsx b/src/Components/LatextInput/AddLaTexModal.tsx
similarity index 92%
rename from src/Components/LatextInput/LaTexModal.tsx
rename to src/Components/LatextInput/AddLaTexModal.tsx
index 723afe3..ab0a7fd 100644
--- a/src/Components/LatextInput/LaTexModal.tsx
+++ b/src/Components/LatextInput/AddLaTexModal.tsx
@@ -6,7 +6,7 @@ import { convertMathMLToLaTeX } from '../../utils/convertMathMLToLaTeX';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 
-const LaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen}:{
+const AddLaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen}:{
     name:string,
     setLatex: (value:string)=> void,
     Latex:string,
@@ -66,13 +66,12 @@ const LaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen}:{
               <div className="back_button pointer" onClick={handleCancel}>
                 {t("practical.cancel")}
               </div>
-              <button
+              <div
                 className="add_button"
-                type="submit"
                 onClick={handleOk}
               >
                 {t(`practical.${ "add"}`)}
-              </button>
+              </div>
             </div>
     </div>
       </Modal>
@@ -80,4 +79,4 @@ const LaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen}:{
   )
 }
 
-export default LaTexModal
\ No newline at end of file
+export default AddLaTexModal
\ No newline at end of file
diff --git a/src/Components/LatextInput/EditLaTexModal.tsx b/src/Components/LatextInput/EditLaTexModal.tsx
new file mode 100644
index 0000000..1aa17f6
--- /dev/null
+++ b/src/Components/LatextInput/EditLaTexModal.tsx
@@ -0,0 +1,89 @@
+import { Modal } from 'antd'
+import TextArea from 'antd/es/input/TextArea'
+import { useFormikContext } from 'formik';
+import React, { useState } from 'react'
+import { convertMathMLToLaTeX } from '../../utils/convertMathMLToLaTeX';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { parseTextAndLatex } from '../../utils/parseTextAndLatex';
+
+const EditLaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen}:{
+    name:string,
+    setLatex: (value:string)=> void,
+    Latex:any,
+    setIsModalOpen: (value:boolean)=> void ,
+    isModalOpen:boolean,
+
+}) => {
+    const {values} = useFormikContext<any>()
+  const [Value, setValue] = useState(Latex?.text ?? Latex)
+
+    const handleOk = () => {
+        console.log(1);
+        
+      const oldValue = values?.[name]; 
+      const currentKey = Latex?.key ;
+      const Preview =  parseTextAndLatex(oldValue ?? "") ; 
+      console.log(Latex);
+      
+      const newLatex = convertMathMLToLaTeX(Latex);
+      console.log(newLatex);
+      
+    if(newLatex){
+      const newArray = Preview?.map((item:any,index:number)=>{
+        if(item?.key)
+        return item
+      })
+      
+    }else{
+        toast.error(t("validation.that_is_not_a_valid_mml"))
+    }
+    };
+  
+    const handleCancel = () => {
+      setIsModalOpen(false);
+      setLatex("")
+    };
+
+    const handleChangeInputLatex = (
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+      ) => {
+        const newValue = e.target.value;
+        console.log(newValue,"newValue");
+        setValue(newValue)
+      };
+
+      const [t] = useTranslation()
+  return (
+   
+<Modal  footer={false} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+    <div className='latexModal'>
+        <label className='mb-3'>  {t("header.past_your_MMl_text")} </label>
+    <TextArea
+    size="large"
+    showCount
+    maxLength={1000}
+    autoSize={{ minRows: 4, maxRows: 10 }} 
+    style={{height:"400px"}}
+    onChange={handleChangeInputLatex}
+    value={Value
+    }
+  />
+    <div className="buttons">
+              <div className="back_button pointer" onClick={handleCancel}>
+                {t("practical.cancel")}
+              </div>
+              <div
+                className="add_button"
+                onClick={handleOk}
+              >
+                {t(`practical.${ "edit"}`)}
+              </div>
+            </div>
+    </div>
+      </Modal>
+
+  )
+}
+
+export default EditLaTexModal
\ No newline at end of file
diff --git a/src/Components/LatextInput/LaTeXInput.tsx b/src/Components/LatextInput/LaTeXInput.tsx
index 57de2d6..e87f079 100644
--- a/src/Components/LatextInput/LaTeXInput.tsx
+++ b/src/Components/LatextInput/LaTeXInput.tsx
@@ -1,51 +1,66 @@
 import TextArea from 'antd/es/input/TextArea'
 import { useFormikContext } from 'formik';
-import React, { useState } from 'react'
-import { convertMathMLToLaTeX } from '../../utils/convertMathMLToLaTeX';
+import React, { Suspense, useState } from 'react'
 import { parseTextAndLatex } from '../../utils/parseTextAndLatex';
 import LatexPreview from '../../Components/CustomFields/MathComponent';
-import { Checkbox, Modal } from 'antd';
+import { Checkbox } from 'antd';
 import { CheckboxProps } from 'antd/lib';
 import { useTranslation } from 'react-i18next';
-import LaTexModal from './LaTexModal';
 import { FaPlus } from 'react-icons/fa';
-
-const LaTeXInput = ({name}:{name:string}) => {
+import { useObjectToEdit } from '../../zustand/ObjectToEditState';
+import { TextAreaProps } from 'antd/lib/input';
+import SpinContainer from '../Layout/SpinContainer';
+  const AddLazyModal = React.lazy(()=> import("./AddLaTexModal"));
+  const EditLazyModal = React.lazy(()=> import("./EditLaTexModal"));
+interface ILaTeXInput extends TextAreaProps {
+  name:string,label:string
+}
+const LaTeXInput = ({name,label,...props}:ILaTeXInput) => {
 
   
-  const {values,setFieldValue} = useFormikContext<any>()
- 
+  const {values,setFieldValue,getFieldProps} = useFormikContext<any>()
+  const { ShowLatexOption } = useObjectToEdit();
   const [showPreview, setShowPreview] = useState(false) ;
-  
-  console.log(values?.[name]);
-  
+    const value  = getFieldProps(name)?.value
   const handleChangeInput =
-   (
+  (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     setFieldValue(name,e.target.value);
   };
-
-  const Preview =  parseTextAndLatex(values?.[name]) ; 
-
+  
+  const Preview =  parseTextAndLatex(value ?? "") ; 
+  
   const onPreviewChange: CheckboxProps['onChange'] = (e) => {
     const value = e.target.checked
     setShowPreview(value)
   };
-   const [t] = useTranslation()
+  const [t] = useTranslation()
+  
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
-   const [isModalOpen, setIsModalOpen] = useState(false);
-   const [Latex, setLatex] = useState<string>("")
-
-
-   const showModal = () => {
+  const [Latex, setLatex] = useState<string>("")
+  
+  
+  const showModal = () => {
     setIsModalOpen(true);
   };
+  
 
-
+  const handelEditModal = (item:any)=>{
+    console.log(item);
+    
+    setLatex(item)
+    setIsEditModalOpen(true)
+  }
   return (
     <div className='LaTeXInput'>
 
+ <label htmlFor={name} className="text">
+        {t(`${label ? label : name}`)}
+      </label>
+
     <div className='LaTeXInputArea'>
          <TextArea
     size="large"
@@ -54,19 +69,24 @@ const LaTeXInput = ({name}:{name:string}) => {
     autoSize={{ minRows: 6, maxRows: 10 }} 
     style={{height:"400px"}}
     onChange={handleChangeInput}
-    value={values?.[name]}
+    value={value}
+    {...props}
     
   />
+   {ShowLatexOption && 
   <div className='LaTeXInputOptions'>
+   
   <Checkbox onChange={onPreviewChange}>{t("header.show_preview")}</Checkbox>
-  <button className='addMML' onClick={showModal}> <FaPlus/> {t("MML")} </button>
+  <button type='button' className='addMML' onClick={showModal}> <FaPlus/> {t("MML")} </button>
 
   </div>
+    
+  }
 {showPreview && 
     <div className='showPreviewInput'>
     {Preview?.map((item:any,index:number)=>{
       if(item?.isLatex){
-        return <div key={index} className='LatexPreview'> <LatexPreview   Latex={item?.text} /> </div>
+        return <div key={index} onClick={()=>handelEditModal(item)} className='LatexPreview'> <LatexPreview   Latex={item?.text} /> </div>
       }
       return <div key={index}>
             {item?.text}
@@ -77,9 +97,11 @@ const LaTeXInput = ({name}:{name:string}) => {
     </div>
 
 
-  <LaTexModal  name={name} Latex={Latex} isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} setLatex={setLatex} />
-
+    <Suspense fallback={<SpinContainer/>}>
+    <AddLazyModal  name={name}  Latex={Latex} isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} setLatex={setLatex} />
 
+    <EditLazyModal  name={name}  Latex={Latex} isModalOpen={isEditModalOpen} setIsModalOpen={setIsEditModalOpen} setLatex={setLatex} />
+    </Suspense>
 
     </div>
   )
diff --git a/src/Components/ValidationField/View/TextField.tsx b/src/Components/ValidationField/View/TextField.tsx
index 30cc271..d3d2615 100644
--- a/src/Components/ValidationField/View/TextField.tsx
+++ b/src/Components/ValidationField/View/TextField.tsx
@@ -38,7 +38,8 @@ const TextField = ({
       />
 
       <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
-        <TextArea
+        <Field
+        as={TextArea}
           placeholder={t(`input.${placeholder ? placeholder : name}`)}
           name={name}
           disabled={isDisabled}
diff --git a/src/Components/exercise/Header.tsx b/src/Components/exercise/Header.tsx
index 325ee98..89e7470 100644
--- a/src/Components/exercise/Header.tsx
+++ b/src/Components/exercise/Header.tsx
@@ -7,11 +7,12 @@ import { Checkbox, CheckboxProps, Popconfirm, Popover } from "antd";
 import { CombinationKeyEnum } from "../../enums/CombinationKeyEnum";
 import { PopconfirmProps } from "antd/lib";
 import { SettingFilled } from "@ant-design/icons";
+import { LocalStorageEnum } from "../../enums/LocalStorageEnum";
 
 const Header = () => {
   const [t] = useTranslation();
   const { values, setValues } = useFormikContext<any>();
-  const { isBseQuestion, setIsBseQuestion,ShowHint,setShowHint } = useObjectToEdit();
+  const { isBseQuestion, setIsBseQuestion,ShowHint,setShowHint,ShowLatexOption,setShowLatexOption } = useObjectToEdit();
     // const [Setting, setSetting] = useState(false)
   const isEdited = ()=>{
 
@@ -73,24 +74,32 @@ const Header = () => {
   );
 
 
-  const handleOpenChange = (newOpen: boolean) => {
-    // setSetting(newOpen);
-  };
-  const onChange: CheckboxProps['onChange'] = (e) => {
+  const onChangeHint: CheckboxProps['onChange'] = (e) => {
     setShowHint(e.target.checked);
+    localStorage?.setItem(LocalStorageEnum.HINT_INPUT,e.target.checked ? "true" : "false" )
+  };
+
+  const onChangeLatexOption: CheckboxProps['onChange'] = (e) => {
+    setShowLatexOption(e.target.checked);
+    localStorage?.setItem(LocalStorageEnum.LATEX_OPTION_INPUT,e.target.checked ? "true" : "false" )
   };
 
   
   const contentSetting = (
     <div>
     
-      <Checkbox checked={ShowHint} onChange={onChange}>
+      <Checkbox checked={ShowHint} onChange={onChangeHint}>
       { t("header.show_hint")}
       </Checkbox>
 
+      <Checkbox checked={ShowLatexOption} onChange={onChangeLatexOption}>
+      { t("header.show_MMl")}
+      </Checkbox>
+
     </div>
   );
 
+  
   return (
     <header className="exercise_add_header mb-4">
       <article>
@@ -105,7 +114,7 @@ const Header = () => {
       <div>
 
       <div className="question_header_setting">
-      <Popover onOpenChange={handleOpenChange}  trigger="click" content={contentSetting}>
+      <Popover  trigger="click" content={contentSetting}>
           <SettingFilled/>
           
   </Popover>
diff --git a/src/Pages/Admin/Grade/useTableColumns.tsx b/src/Pages/Admin/Grade/useTableColumns.tsx
index bc10a12..b5d1978 100644
--- a/src/Pages/Admin/Grade/useTableColumns.tsx
+++ b/src/Pages/Admin/Grade/useTableColumns.tsx
@@ -53,6 +53,7 @@ export const useColumns = () => {
       key: "name",
       align: "center",
       render: (_text, record) => record?.name,
+      ellipsis:true
     },
     {
       title: t("columns.image"),
diff --git a/src/Pages/Admin/Tags/useTableColumns.tsx b/src/Pages/Admin/Tags/useTableColumns.tsx
index b1c16d1..c9dbc18 100644
--- a/src/Pages/Admin/Tags/useTableColumns.tsx
+++ b/src/Pages/Admin/Tags/useTableColumns.tsx
@@ -34,6 +34,7 @@ export const useColumns = () => {
       dataIndex: "name",
       key: "name",
       align: "center",
+      ellipsis:true
     },
 
     {
diff --git a/src/Pages/Admin/Unit/useTableColumns.tsx b/src/Pages/Admin/Unit/useTableColumns.tsx
index fff47fd..062dcd2 100644
--- a/src/Pages/Admin/Unit/useTableColumns.tsx
+++ b/src/Pages/Admin/Unit/useTableColumns.tsx
@@ -66,6 +66,7 @@ export const useColumns = () => {
       key: "name",
       align: "center",
       render: (text) => text,
+      ellipsis:true
     },
 
     {
diff --git a/src/Pages/Admin/lesson/useTableColumns.tsx b/src/Pages/Admin/lesson/useTableColumns.tsx
index a44817d..a9a166c 100644
--- a/src/Pages/Admin/lesson/useTableColumns.tsx
+++ b/src/Pages/Admin/lesson/useTableColumns.tsx
@@ -61,6 +61,7 @@ export const useColumns = () => {
       key: "name",
       align: "center",
       render: (text, record) => record?.name,
+      ellipsis:true
     },
     {
       // canAddLesson ? (
diff --git a/src/Pages/Admin/question/AddPage.tsx b/src/Pages/Admin/question/AddPage.tsx
index c9faea4..6345d98 100644
--- a/src/Pages/Admin/question/AddPage.tsx
+++ b/src/Pages/Admin/question/AddPage.tsx
@@ -32,7 +32,7 @@ const AddPage: React.FC = () => {
   const [t] = useTranslation();
   const { subject_id, lesson_id } = useParams<ParamsEnum>();
 
-  const handleSubmit = ( values: any) => {
+  const handleFormSubmit = ( values: any) => {
     const DataToSend = structuredClone(values);
     setTagsSearch(null);
 
@@ -99,14 +99,14 @@ const AddPage: React.FC = () => {
       mutate(NewQuestion);
     }
   };
-  const handleValidateSingleQuestion = (values:any)=>{
+  
+  const handleValidateSingleQuestion = (values:any,isValid:boolean,handleSubmit:any)=>{
       const haveMoreThanOneAnswer =  values?.answers?.length > 1;      
       const haveOneAnswerRight = haveMoreThanOneAnswer && values?.answers?.some((item:any)=> item?.isCorrect === 1 || item.isCorrect === true )
       const haveImageOrContent = haveOneAnswerRight && values?.answers?.some((item:any)=> !(item?.content)  && !(item.content_image)  )
       const content = values.content ;
       const content_image = values.content_image ;
       const haveContentOrContentImage = !!content || !!content_image ;
-
       console.log(haveImageOrContent,"haveImageOrContent");
       if(!haveContentOrContentImage){
         toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
@@ -122,22 +122,30 @@ const AddPage: React.FC = () => {
         return false ;
     }
     if(haveImageOrContent){
-      toast.error(t("validation.one_of_image_and_content_should_be_enter_in_answer_in_answer"))
+      toast.error(t("validation.one_of_image_and_content_should_be_enter_in_answer"))
       return false
     }
+
+    console.log(1);
+    
+    if(isValid){
+      handleSubmit(values)
+    }
       
   }
-  const handleValidateBaseQuestion = (values: any) => {  
+  const handleValidateBaseQuestion = (values: any,isValid:boolean,handleSubmit:any) => {  
     const content = values.content ;
     const content_image = values.content_image ;
     const haveContentOrContentImage = !!content || !!content_image ;
-
+    console.log(2);
+    
     if(!haveContentOrContentImage){
       toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
       return false;
     }
-    
-     values?.Questions?.every((Question: any, QuestionsIndex: number) => {
+      console.log(1);
+      
+   const isValidate = values?.Questions?.every((Question: any, QuestionsIndex: number) => {
 
 
       const content = Question.content ;
@@ -179,9 +187,15 @@ const AddPage: React.FC = () => {
         return false
       }
   
-      return true; 
+      return true
     });
 
+        console.log(1);
+        
+  if(isValid && isValidate){
+    console.log(2);
+    handleSubmit(values)
+  }
     
   };
   
@@ -212,12 +226,13 @@ const AddPage: React.FC = () => {
 
       <div className="exercise_add">
         <Formik
-        onSubmit={handleSubmit}
+        onSubmit={handleFormSubmit}
         initialValues={getInitialValuesBase({} as any)}
         validationSchema={getValidationSchemaBase}
         enableReinitialize
+        
         >
-            {({ values,handleSubmit }) => (
+            {({ values,isValid,handleSubmit }) => (
 
 <Form className="w-100">
           <main className="w-100 exercise_add_main">
@@ -226,9 +241,9 @@ const AddPage: React.FC = () => {
 
             <div className="exercise_add_buttons">
               <div onClick={handleCancel}>{t("practical.back")}</div>
-              <button disabled={Loading} className="relative" type="submit" 
-               onClick={()=>{handleValidateBaseQuestion(values) ;handleSubmit(values)}}
-               onSubmit={()=>{handleValidateBaseQuestion(values) ;handleSubmit(values) }}
+              <button disabled={Loading} className="relative" type="button" 
+               onClick={()=>{handleValidateBaseQuestion(values,isValid,handleSubmit) }}
+               onSubmit={()=>{handleValidateBaseQuestion(values,isValid,handleSubmit) }}
               >
                 {t("practical.add")}
 
@@ -261,11 +276,12 @@ const AddPage: React.FC = () => {
   enableReinitialize={true}
   initialValues={getInitialValues({} as any)}
   validationSchema={getValidationSchema}
+  validateOnMount={true} 
   onSubmit={(values) => {
-    handleSubmit(values); 
+    handleFormSubmit(values); 
   }}
 >
-  {({ values,handleSubmit }) => (
+  {({ values,isValid ,handleSubmit}) => (
     <Form className="w-100">
       <main className="w-100 exercise_add_main">
         <Header />
@@ -273,12 +289,9 @@ const AddPage: React.FC = () => {
 
         <div className="exercise_add_buttons">
           <div onClick={handleCancel}>{t("practical.back")}</div>
-          <button
-            disabled={Loading}
+          <div
             className="relative"
-            onClick={()=>{handleValidateSingleQuestion(values) ;handleSubmit(values)}}
-            onSubmit={()=>{handleValidateSingleQuestion(values) ;handleSubmit(values) }}
-            type="submit"
+            onClick={()=>{ Loading ? ()=>{} : handleValidateSingleQuestion(values,isValid,handleSubmit)  }}
           >
             {t("practical.add")}
 
@@ -287,7 +300,7 @@ const AddPage: React.FC = () => {
                 <Spin />
               </span>
             )}
-          </button>
+          </div>
         </div>
       </main>
     </Form>
diff --git a/src/Pages/Admin/question/EditPage.tsx b/src/Pages/Admin/question/EditPage.tsx
index 5bfc7cd..cb6b529 100644
--- a/src/Pages/Admin/question/EditPage.tsx
+++ b/src/Pages/Admin/question/EditPage.tsx
@@ -28,10 +28,11 @@ import { Form, Formik } from "formik";
 import { MdOutlineArrowForwardIos } from "react-icons/md";
 import { SettingFilled } from "@ant-design/icons";
 import { CheckboxProps } from "antd/lib";
+import { LocalStorageEnum } from "../../../enums/LocalStorageEnum";
 
 const EditPage: React.FC = () => {
   const { subject_id, lesson_id, question_id } = useParams<ParamsEnum>();
-  const { isBseQuestion, setIsBseQuestion, setTagsSearch, DeletedQuestions , ShowHint,setShowHint } =
+  const { isBseQuestion, setIsBseQuestion, setTagsSearch, DeletedQuestions , ShowHint,setShowHint , ShowLatexOption,setShowLatexOption } =
     useObjectToEdit();
 
   const { mutate, isSuccess, isLoading } = useUpdateQuestion();
@@ -45,7 +46,7 @@ const EditPage: React.FC = () => {
   const { data: Questions, isLoading: QuestionsDataLoading } =
     useGetAllQuestion({
       parent_id: question_id,
-      paginate:false
+      isPaginated:false
     });
 
   const objectToEdit = { ...data?.data, Questions: Questions?.data };
@@ -190,20 +191,19 @@ const EditPage: React.FC = () => {
     navigate(-1);
   };
 
-
-  const handleValidateSingleQuestion = (values:any)=>{
+  const handleValidateSingleQuestion = (values:any,isValid:boolean,handleSubmit:any)=>{
     const haveMoreThanOneAnswer =  values?.answers?.length > 1;      
     const haveOneAnswerRight = haveMoreThanOneAnswer && values?.answers?.some((item:any)=> item?.isCorrect === 1 || item.isCorrect === true )
     const haveImageOrContent = haveOneAnswerRight && values?.answers?.some((item:any)=> !(item?.content)  && !(item.content_image)  )
     const content = values.content ;
     const content_image = values.content_image ;
     const haveContentOrContentImage = !!content || !!content_image ;
-
     console.log(haveImageOrContent,"haveImageOrContent");
     if(!haveContentOrContentImage){
       toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
       return false;
     }
+
     if(!haveMoreThanOneAnswer){
         toast.error(t("validation.it_should_have_more_than_one_answers")) ;
         return false ;
@@ -216,12 +216,28 @@ const EditPage: React.FC = () => {
     toast.error(t("validation.one_of_image_and_content_should_be_enter_in_answer"))
     return false
   }
+
+  console.log(1);
+  
+  if(isValid){
+    handleSubmit(values)
+  }
     
 }
-
-const handleValidateBaseQuestion = (values: any) => {  
-  const haveAnswers = values?.Questions?.every((Question: any, QuestionsIndex: number) => {
+const handleValidateBaseQuestion = (values: any,isValid:boolean,handleSubmit:any) => {  
+  const content = values.content ;
+  const content_image = values.content_image ;
+  const haveContentOrContentImage = !!content || !!content_image ;
+  console.log(2);
+  
+  if(!haveContentOrContentImage){
+    toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
+    return false;
+  }
+    console.log(1);
     
+ const isValidate = values?.Questions?.every((Question: any, QuestionsIndex: number) => {
+
 
     const content = Question.content ;
     const content_image = Question.content_image ;
@@ -232,13 +248,15 @@ const handleValidateBaseQuestion = (values: any) => {
     }
 
 
-     //// answers
+    //// answers
     const answers = Question?.answers;
-      const haveAnswers = answers?.length > 0;
+    const haveAnswers = answers?.length > 0;
     const haveMoreThanOneAnswer = haveAnswers && answers?.length > 1;
-    const haveOneAnswerRight =
-      haveMoreThanOneAnswer && answers?.some((item: any) => item?.isCorrect === 1 || item.isCorrect === true);
-      const haveImageOrContent = haveOneAnswerRight && answers?.some((item:any)=> !(item?.content)  && !(item.content_image)  )
+    const haveOneAnswerRight = haveMoreThanOneAnswer && answers?.some((item: any) => item?.isCorrect === 1 || item.isCorrect === true);
+    const haveImageOrContent = haveOneAnswerRight && answers?.some((item:any)=> !(item?.content)  && !(item.content_image)  )
+    
+    
+ 
 
     if (!haveAnswers) {
       toast.error(t("validation.it_should_have_more_than_one_answers"));
@@ -260,14 +278,18 @@ const handleValidateBaseQuestion = (values: any) => {
       return false
     }
 
-    
-    return true; 
+    return true
   });
 
-  console.log(haveAnswers, "haveAnswers");
+      console.log(1);
+      
+if(isValid && isValidate){
+  console.log(2);
+  handleSubmit(values)
+}
+  
 };
 
-
 const handleNavigateToPage = () => {
   const cleanedUrl = location.pathname.replace(/\/Question\/\d+$/, "");
   navigate(cleanedUrl);
@@ -280,17 +302,29 @@ const handleNavigateToPage = () => {
     }
   }, [isSuccess]);
 
-  const onChange: CheckboxProps['onChange'] = (e) => {
+  const onChangeHint: CheckboxProps['onChange'] = (e) => {
     setShowHint(e.target.checked);
+    localStorage?.setItem(LocalStorageEnum.HINT_INPUT,e.target.checked ? "true" : "false" )
   };
 
+  const onChangeLatexOption: CheckboxProps['onChange'] = (e) => {
+    setShowLatexOption(e.target.checked);
+    localStorage?.setItem(LocalStorageEnum.LATEX_OPTION_INPUT,e.target.checked ? "true" : "false" )
+  };
+
+
   const contentSetting = (
     <div>
     
-      <Checkbox checked={ShowHint} onChange={onChange}>
+      <Checkbox checked={ShowHint} onChange={onChangeHint}>
       { t("header.show_hint")}
       </Checkbox>
 
+      <Checkbox checked={ShowLatexOption} onChange={onChangeLatexOption}>
+      { t("header.show_MMl")}
+      </Checkbox>
+
+
     </div>
   );
 
@@ -317,7 +351,7 @@ const handleNavigateToPage = () => {
         validationSchema={getValidationSchemaBase}
         enableReinitialize
         >
-            {({ values,handleSubmit }) => (
+            {({ values,isValid,handleSubmit }) => (
 
 <Form className="w-100">
 <main className="w-100 exercise_add_main">
@@ -337,10 +371,10 @@ const handleNavigateToPage = () => {
             <BaseForm />
             <div className="exercise_add_buttons">
               <div onClick={handleCancel}>{t("practical.back")}</div>
-              <button disabled={Loading} className="relative" type="submit" 
-               onClick={()=>{handleValidateBaseQuestion(values) ;handleSubmit(values)}}
-               onSubmit={()=>{handleValidateBaseQuestion(values) ;handleSubmit(values) }}
-              >                {t("practical.edit")}
+              <button disabled={Loading} className="relative" type="button" 
+               onClick={()=>{handleValidateBaseQuestion(values,isValid,handleSubmit) }}
+               onSubmit={()=>{handleValidateBaseQuestion(values,isValid,handleSubmit) }}
+              >          {t("practical.edit")}
 
                 {Loading && (
                   <span className="Spinier_Div">
@@ -376,7 +410,7 @@ const handleNavigateToPage = () => {
     handleSubmit(values); 
   }}
 >
-  {({ values,handleSubmit , dirty }) => (
+  {({ values , dirty,isValid,handleSubmit }) => (
     <Form className="w-100">
   <main className="w-100 exercise_add_main">
           {/* <Header/> */}
@@ -384,25 +418,28 @@ const handleNavigateToPage = () => {
             <div>
               {t("practical.edit")} {t("models.exercise")}{" "}
             </div>
+            <div className="SettingEdit">
+
+            <Popover   trigger="click" content={contentSetting}>
+          <SettingFilled/>
+          
+  </Popover>
             <div>{t("header.exercise")}</div>
+            </div>
           </header>
           <ModelForm />
           <div className="exercise_add_buttons">
             <div onClick={handleCancel}>{t("practical.back")}</div>
-            <button
-            disabled={Loading || !dirty}
+            <div
             className="relative"
-            onClick={()=>{handleValidateSingleQuestion(values) ;handleSubmit(values)}}
-            onSubmit={()=>{handleValidateSingleQuestion(values) ;handleSubmit(values) }}
-            type="submit"
-            
-          >              {t("practical.edit")}
+            onClick={()=>{ Loading ? ()=>{} : handleValidateSingleQuestion(values,isValid,handleSubmit)  }}
+          >             {t("practical.edit")}
               {Loading && (
                 <span className="Spinier_Div">
                   <Spin />
                 </span>
               )}
-            </button>
+            </div>
           </div>
         </main>
 
diff --git a/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx b/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx
index 5e71cb7..3979a65 100644
--- a/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx
+++ b/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx
@@ -10,6 +10,7 @@ import ImageBoxField from "../../../../../Components/CustomFields/ImageBoxField/
 import { GoTrash } from "react-icons/go";
 import { Popconfirm } from "antd";
 import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
+import LaTeXInput from "../../../../../Components/LatextInput/LaTeXInput";
 
 const ChoiceFields = ({ index }: { index: number; data: Choice }) => {
   const formik = useFormikContext<any>();
@@ -43,20 +44,7 @@ const ChoiceFields = ({ index }: { index: number; data: Choice }) => {
   return (
     <>
       <div id={`ChoiceField_${index}`} className="ChoiceFields">
-        <TextField
-          className="textarea_exercise"
-          placeholder={"choice"}
-          label2={
-            t(`input.choice`) +
-            ` ` +
-            `( ${t(`alphabet.${getCharFromNumber(index)}`)} )`
-          }
-          name={index}
-          id={`choice_${index + 1}`}
-          type="TextArea"
-          
-        />
-
+ <LaTeXInput  id={`choice_${index + 1}`} name={`answers.${index}.content`}  label={t(`input.choice`) + ` ` +`( ${index + 1} )`}/>
         <ImageBoxField name={`answers.${index}.content_image`} />
 
         <div className="answer_status">
diff --git a/src/Pages/Admin/question/Model/Malty/ChoiceField/CheckboxField.tsx b/src/Pages/Admin/question/Model/Malty/ChoiceField/CheckboxField.tsx
index 139fc2c..4fad1ae 100644
--- a/src/Pages/Admin/question/Model/Malty/ChoiceField/CheckboxField.tsx
+++ b/src/Pages/Admin/question/Model/Malty/ChoiceField/CheckboxField.tsx
@@ -16,8 +16,8 @@ const CheckboxField = ({
   const [t] = useTranslation();
   const CheckboxhandleChange = (value: any) => {
     const allAreZero = formik?.values?.Questions?.[parent_index]?.answers?.some(
-      (item: any) => item.isCorrect === 1,
-    );
+      (item: any) => item.isCorrect === 1 || item.isCorrect === true,
+    ); 
     if (allAreZero) {
       formik?.values?.Questions?.[parent_index]?.answers.forEach(
         (item: any, index: number) => {
diff --git a/src/Pages/Admin/question/Model/Malty/ChoiceField/ChoiceFields.tsx b/src/Pages/Admin/question/Model/Malty/ChoiceField/ChoiceFields.tsx
index 91e7fa5..3f26310 100644
--- a/src/Pages/Admin/question/Model/Malty/ChoiceField/ChoiceFields.tsx
+++ b/src/Pages/Admin/question/Model/Malty/ChoiceField/ChoiceFields.tsx
@@ -11,6 +11,7 @@ import ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxFie
 import { GoTrash } from "react-icons/go";
 import { Popconfirm } from "antd";
 import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
+import LaTeXInput from "../../../../../../Components/LatextInput/LaTeXInput";
 
 const ChoiceFields = ({
   index,
@@ -53,7 +54,7 @@ const ChoiceFields = ({
   return (
     <>
       <div id={`ChoiceField_${parent_index}_${index}`} className="ChoiceFields">
-        <TextField
+        {/* <TextField
           className="textarea_exercise"
           placeholder={"choice"}
           label2={
@@ -64,8 +65,12 @@ const ChoiceFields = ({
           name={index}
           parent_index={parent_index}
           type="TextArea"
-        />
-
+        /> */}
+      <LaTeXInput name={`Questions[${parent_index}].answers[${index}].content`}  label={
+            t(`input.choice`) +
+            ` ` +
+            `( ${index + 1} )`
+          }/>
         <ImageBoxField
           name={`Questions.${parent_index}.answers.${index}.content_image`}
         />
diff --git a/src/Pages/Admin/question/Model/Malty/Form.tsx b/src/Pages/Admin/question/Model/Malty/Form.tsx
index f0509d2..ea802ed 100644
--- a/src/Pages/Admin/question/Model/Malty/Form.tsx
+++ b/src/Pages/Admin/question/Model/Malty/Form.tsx
@@ -13,6 +13,7 @@ import MaltySelectTag from "./Tags/MaltySelectTag";
 import useKeyCombination from "../../../../../Hooks/useKeyCombination";
 import { CombinationKeyEnum } from "../../../../../enums/CombinationKeyEnum";
 import { toast } from "react-toastify";
+import LaTeXInput from "../../../../../Components/LatextInput/LaTeXInput";
 
 const Form = () => {
   const formik = useFormikContext<any>();
@@ -101,12 +102,7 @@ const Form = () => {
   return (
     <Row className="w-100 exercise_form_container">
       <div className="exercise_form">
-        <ValidationField
-          className="textarea_exercise"
-          name="content"
-          label="main_question"
-          type="TextArea"
-        />
+         <LaTeXInput name={"content"} label={t("input.main_question")}/>
         <ImageBoxField name="content_image" />
 
         <div></div>
diff --git a/src/Pages/Admin/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx b/src/Pages/Admin/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx
index 4b239f8..e41fc54 100644
--- a/src/Pages/Admin/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx
+++ b/src/Pages/Admin/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx
@@ -8,6 +8,7 @@ import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
 import ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
 import { GoTrash } from "react-icons/go";
 import { Popconfirm } from "antd";
+import LaTeXInput from "../../../../../../Components/LatextInput/LaTeXInput";
 
 const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
   const formik = useFormikContext<any>();
@@ -48,20 +49,12 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
     <>
       <div className="exercise_forms">
         <div className="ChoiceFields">
-          <TextField
-            className="textarea_exercise"
-            placeholder={"question"}
-            label2={
+          <LaTeXInput   id={`question_${index + 1}`} name={`Questions[${index}].content`} label={
               t(`input.question`) +
               ` ` +
-              `( ${t(`alphabet.${getCharFromNumber(index)}`)} )`
-            }
-            name={index}
-            id={`question_${index + 1}`}
-            type="TextArea"
-          />
-
-          <ImageBoxField name={`Questions.${index}.content_image`} />
+              `( ${index + 1} )`
+            }/>
+          <ImageBoxField  name={`Questions.${index}.content_image`} />
 
               {handelCanDeleteAnswers() ? 
               <div className="answer_status"  >
diff --git a/src/Pages/Admin/question/Model/ModelForm.tsx b/src/Pages/Admin/question/Model/ModelForm.tsx
index d0a769b..8599dfc 100644
--- a/src/Pages/Admin/question/Model/ModelForm.tsx
+++ b/src/Pages/Admin/question/Model/ModelForm.tsx
@@ -11,6 +11,7 @@ import SelectTag from "../../../../Components/CustomFields/SelectTag";
 import useKeyCombination from "../../../../Hooks/useKeyCombination";
 import { CombinationKeyEnum } from "../../../../enums/CombinationKeyEnum";
 import { toast } from "react-toastify";
+import LaTeXInput from "../../../../Components/LatextInput/LaTeXInput";
 
 const Form = () => {
   const [t] = useTranslation();
@@ -50,14 +51,8 @@ const Form = () => {
   return (
     <Row className="w-100 exercise_form_container">
       <div className="exercise_form">
-        <ValidationField
-          className="textarea_exercise"
-          name="content"
-          label="answer_content"
-          type="TextArea"
-          
-        />
   
+   <LaTeXInput name={"content"} label={t("input.answer_content")}/>
       <ImageBoxField name="content_image" />
       </div>
 
diff --git a/src/Pages/Admin/question/formUtil.ts b/src/Pages/Admin/question/formUtil.ts
index 59f488e..83b0fd0 100644
--- a/src/Pages/Admin/question/formUtil.ts
+++ b/src/Pages/Admin/question/formUtil.ts
@@ -47,9 +47,11 @@ export const getValidationSchema = () => {
     "content-or-image-required",
     "At least one of content or content_image must be provided",
     (obj:any) => {
+      console.log(obj);
+      
       const isValid = !!obj.content || !!obj.content_image;
       console.log(isValid,"isValid");
-      
+
       return isValid;
     }
   );
@@ -80,10 +82,11 @@ export const getInitialValuesBase = (objectToEdit: Question): any => {
   });
 
   const questions = newQuestions ?? [{answers:[]}];
-
+  console.log(objectToEdit,"objectToEdit");
+  
   return {
     id: objectToEdit?.id ?? null,
-    content: objectToEdit?.content ?? "",
+    content: objectToEdit?.content ?? null,
     content_image: objectToEdit?.content_image ?? "",
     subject_id: objectToEdit?.subject_id ?? "",
     isBase: 1,
diff --git a/src/Pages/Admin/subject/Table/Page.tsx b/src/Pages/Admin/subject/Table/Page.tsx
index 5f02289..0c57bcd 100644
--- a/src/Pages/Admin/subject/Table/Page.tsx
+++ b/src/Pages/Admin/subject/Table/Page.tsx
@@ -25,7 +25,6 @@ const TableWithHeader = () => {
   const deleteMutation = useDeleteSubject();
 
   const { grade_id } = useParams<ParamsEnum>();
-  console.log(grade_id);
   
   const { data: grade } = useGetAllGrade({
     show: grade_id,
diff --git a/src/Pages/Admin/subject/Table/useTableColumns.tsx b/src/Pages/Admin/subject/Table/useTableColumns.tsx
index b73808a..8b160ed 100644
--- a/src/Pages/Admin/subject/Table/useTableColumns.tsx
+++ b/src/Pages/Admin/subject/Table/useTableColumns.tsx
@@ -49,6 +49,7 @@ export const useColumns = () => {
       dataIndex: "name",
       key: "name",
       align: "center",
+      ellipsis:true
     },
     {
       title: t("columns.icon"),
diff --git a/src/Pages/Home/Dummy.tsx b/src/Pages/Home/Dummy.tsx
index 1f2dd04..274ab7c 100644
--- a/src/Pages/Home/Dummy.tsx
+++ b/src/Pages/Home/Dummy.tsx
@@ -1,31 +1,11 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import useFilter from "../../Components/FilterField/components/useFilter";
-import { Select } from "antd";
-import { Form, Formik } from "formik";
-import LaTeXInput from "../../Components/LatextInput/LaTeXInput";
-
 const Dummy = () => {
   const [t] = useTranslation();
-  // const { FilterButton, FilterBody } = useFilter();
   return (
     <div className="DummyHomePage">
       
-      {/* <FilterButton/>
-      <FilterBody>
-        karim
-      </FilterBody>
-      <Select 
-        style={{width:"200px"}}
-        showSearch
-      />
-       */}
-       <Formik initialValues={{name:""}} onSubmit={()=>{}}>
-        <Form>
-       <LaTeXInput name={"name"}/>
-          
-        </Form>
-       </Formik>
+
 
     </div>
   );
diff --git a/src/Styles/Pages/exercise.scss b/src/Styles/Pages/exercise.scss
index c4158e8..f645fd2 100644
--- a/src/Styles/Pages/exercise.scss
+++ b/src/Styles/Pages/exercise.scss
@@ -176,7 +176,7 @@
 .answer_status {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  
   padding-block: 30px;
   align-items: flex-end;
 }
diff --git a/src/Styles/components/LaTeXInput.scss b/src/Styles/components/LaTeXInput.scss
index 1a888cc..11a0915 100644
--- a/src/Styles/components/LaTeXInput.scss
+++ b/src/Styles/components/LaTeXInput.scss
@@ -3,8 +3,12 @@
 }
 
 .LaTeXInputArea{
-    width: 600px;
+    
+    width: 50vw;
     position: relative;
+    margin-bottom: 10px;
+   
+
 }
 .showPreviewInput{
     background-color: var(--bg);
@@ -59,4 +63,12 @@
 .LaTeXInputOptions{
     display: flex;
     padding: 10px;
+}
+.text{
+  margin-bottom: 7px !important;
+  font-weight: bold;
+  font-size: 19px;
+  > span {
+    color: transparent;
+  }
 }
\ No newline at end of file
diff --git a/src/enums/LocalStorageEnum.ts b/src/enums/LocalStorageEnum.ts
index dc0a8fc..141f712 100644
--- a/src/enums/LocalStorageEnum.ts
+++ b/src/enums/LocalStorageEnum.ts
@@ -3,4 +3,6 @@ export enum LocalStorageEnum {
   LANGUAGE_KEY = LocalStorageEnum.PROJECT_NAME + "_LANGUAGE",
   TOKEN_KEY = LocalStorageEnum.PROJECT_NAME + "_TOKEN_KEY",
   USER_KEY = LocalStorageEnum.PROJECT_NAME + "_USER_KEY",
+  HINT_INPUT = LocalStorageEnum.PROJECT_NAME + "HINT_INPUT",
+  LATEX_OPTION_INPUT = LocalStorageEnum.PROJECT_NAME + "LATEX_OPTION_INPUT",
 }
diff --git a/src/translate/ar.json b/src/translate/ar.json
index d293fbf..c18d2de 100644
--- a/src/translate/ar.json
+++ b/src/translate/ar.json
@@ -146,7 +146,8 @@
     "show_hint":"عرض الشرح",
     "past_your_MMl_text":"ضع نص MMl الخاص بك",
     "add_MML":"إضافة MML",
-    "show_preview":"عرض المعاينة"
+    "show_preview":"عرض المعاينة",
+    "show_MMl":" MML عرض"
   },
   "columns": {
     "id": "الرقم التعريفي",
diff --git a/src/utils/parseTextAndLatex.ts b/src/utils/parseTextAndLatex.ts
index 13c9d15..27224a0 100644
--- a/src/utils/parseTextAndLatex.ts
+++ b/src/utils/parseTextAndLatex.ts
@@ -1,6 +1,7 @@
 interface TextLatexPart {
     text: string;
     isLatex: boolean;
+    key:number
   }
   
  export const parseTextAndLatex = (input: string): TextLatexPart[] => {
@@ -8,13 +9,13 @@ interface TextLatexPart {
   
     const parts = input.split(/(\$\$[^$]+\$\$)/g);
   
-    parts.forEach(part => {
+    parts.forEach((part,index) => {
       if (part.startsWith('$$') && part.endsWith('$$')) {
 
-        result.push({ text: part.slice(2, -2), isLatex: true });
+        result.push({ text: part.slice(2, -2), isLatex: true , key:index });
       } else if (part.trim()) {
 
-        result.push({ text: part, isLatex: false });
+        result.push({ text: part, isLatex: false,key:index });
       }
     });
   
diff --git a/src/zustand/ObjectToEditState.ts b/src/zustand/ObjectToEditState.ts
index 56f69a7..45979b9 100644
--- a/src/zustand/ObjectToEditState.ts
+++ b/src/zustand/ObjectToEditState.ts
@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { LocalStorageEnum } from "../enums/LocalStorageEnum";
 
 interface ModelState {
   objectToEdit: any;
@@ -27,6 +28,9 @@ interface ModelState {
 
   ShowHint: any;
   setShowHint: (data: any) => void;
+
+  ShowLatexOption: any;
+  setShowLatexOption: (data: any) => void;
 }
 
 export const useObjectToEdit = create<ModelState>((set) => ({
@@ -52,6 +56,8 @@ export const useObjectToEdit = create<ModelState>((set) => ({
   setDeletedQuestions: (data) => set(() => ({ DeletedQuestions: data })),
   SavedQuestionData: [],
   setSavedQuestionData: (data) => set(() => ({ SavedQuestionData: data })),
-  ShowHint: false,
+  ShowHint: localStorage?.getItem(LocalStorageEnum.HINT_INPUT) === "true",
   setShowHint: (data) => set(() => ({ ShowHint: data })),
+  ShowLatexOption: localStorage?.getItem(LocalStorageEnum.LATEX_OPTION_INPUT) === "true" ,
+  setShowLatexOption: (data) => set(() => ({ ShowLatexOption: data })),
 }));