respect \n

src/Components/LatextInput/LaTeXInputMemo.tsx

@@ -10,10 +10,16 @@ import { useObjectToEdit } from "../../zustand/ObjectToEditState";
 import SpinContainer from "../Layout/SpinContainer";
 import { areFieldPropsEqual } from "./areFieldPropsEqual";
 import { useHandlePasteKeyDown } from "../../Hooks/useHandlePasteKeyDown";
-import { getLatexOnCustomShortCut } from "../../utils/keyDownUtils";
+import { getLatexOnCtrlShiftQkeyDown, getLatexOnCtrlShiftThKeyDown } from "../../utils/keyDownUtils";
+import { InlineMath } from "react-katex";
+import 'katex/dist/katex.min.css';
+
+
+const AddLazyLatexModal = React.lazy(() => import("./AddLaTexModal"));
+const EditLazyLatexModal = React.lazy(() => import("./EditLaTexModal"));
+
+const AddLazyImageModal = React.lazy(() => import("./AddImageModal"));
 
-const AddLazyModal = React.lazy(() => import("./AddLaTexModal"));
-const EditLazyModal = React.lazy(() => import("./EditLaTexModal"));
 
 const LaTeXInputMemo: React.FC<any> = React.memo(
   ({ field, form, label, ...props }) => {
@@ -31,14 +37,21 @@ const LaTeXInputMemo: React.FC<any> = React.memo(
 
     const [t] = useTranslation();
 
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+    const [isLatexModalOpen, setIsLatexModalOpen] = useState(false);
+    const [isLatexEditModalOpen, setIsLatexEditModalOpen] = useState(false);
     const [Latex, setLatex] = useState<string>("");
     
-    const showModal = () => {
-      setIsModalOpen(true);
+    const [isImageModalOpen, setIsImageModalOpen] = useState(false);
+
+    const showLatexModal = () => {
+      setIsLatexModalOpen(true);
     };
 
+        const showImageModal = () => {
+      setIsImageModalOpen(true);
+    };
+
+
     const handleEditModal = (item: any) => {
       // console.log(item);
       // setLatex(item);
@@ -93,11 +106,15 @@ const LaTeXInputMemo: React.FC<any> = React.memo(
         setFieldValue(metaName, { ...(meta ?? {}), direction: "ltr" });
       }
     };
+    
       const handlePaste = useHandlePasteKeyDown();
     const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) =>{
       if(!ShowLatexOption) return ;
         handlePaste(e,name)
-        getLatexOnCustomShortCut(e) && setFieldValue(name,getLatexOnCustomShortCut(e))
+        const latexOnCtrlSHiftQClick = getLatexOnCtrlShiftQkeyDown(e)
+        // const latexOnCtrlSHiftThClick = getLatexOnCtrlShiftThKeyDown(e)
+        latexOnCtrlSHiftQClick && document.execCommand('insertText', false,latexOnCtrlSHiftQClick);
+        // latexOnCtrlSHiftThClick && document.execCommand('insertText', false,latexOnCtrlSHiftThClick);
     }
     return (
       <div className="LaTeXInput">
@@ -133,56 +150,65 @@ const LaTeXInputMemo: React.FC<any> = React.memo(
                 <Checkbox onChange={onPreviewChange}>
                   {t("header.show_preview")}
                 </Checkbox>
-                <button type="button" className="addMML" onClick={showModal}>
+                <button type="button" className="addMML" onClick={showLatexModal}>
                   <FaPlus /> {t("MML")}
                 </button>
+                <button type="button" className="addMML mx-2" onClick={showImageModal}>
+                  <FaPlus /> {t("practical.image")}
+                </button>
               </>
             )}
           </div>
 
-          {showPreview && (
+{showPreview && (
   <div className="showPreviewInput">
-              {Preview?.map((item: any, index: number,items) => {
-                if (item?.isLatex) {
-
+        {Preview.map((item, idx) => {
+      if (item.isLatex) {
+        return <span dir="ltr" key={idx}><InlineMath  >{item.text}</InlineMath></span>;
+      }else if(item.isImage){
+        return <img key={idx} alt="img" width={200} src={item.text}/>
+      }
+       else {
+        const lines = item.text.split('\n');
         return (
-                    <div
-                      dir="ltr"
-                      key={index}
-                      className="LatexPreview"
-                      
-                    >
-                      <LatexPreview latex={item?.text}  />
-                    </div>
+          <React.Fragment key={idx}>
+            {lines.map((line, i) => (
+              <React.Fragment key={`${idx}-${i}`}>
+                {line}
+                {i < lines.length - 1 && <br />} 
+              </React.Fragment>
+            ))}
+          </React.Fragment>
         );
       }
-                return <div key={index} 
-                style={{
-                    width: item?.text?.includes("\n") && items.length > 1 ? "100%" : undefined,
-                    whiteSpace: "pre-wrap",
-                      }}
-                >{ items[index -1]?.isLatex ? item?.text?.replace(/\n/, ""):item?.text}</div>;
     })}
   </div>
-          )}
+)}
+
         </div>
 
         <Suspense fallback={<SpinContainer />}>
-          <AddLazyModal
+          <AddLazyLatexModal
             name={name}
             Latex={Latex}
-            isModalOpen={isModalOpen}
-            setIsModalOpen={setIsModalOpen}
+            isModalOpen={isLatexModalOpen}
+            setIsModalOpen={setIsLatexModalOpen}
             setLatex={setLatex}
             setCurrentValue={setCurrentValue}
           />
-          <EditLazyModal
+          <EditLazyLatexModal
             name={name}
             Latex={Latex}
-            isModalOpen={isEditModalOpen}
-            setIsModalOpen={setIsEditModalOpen}
+            isModalOpen={isLatexEditModalOpen}
+            setIsModalOpen={setIsLatexEditModalOpen}
             setLatex={setLatex}
           />
+          <AddLazyImageModal
+            name={name}
+            isModalOpen={isImageModalOpen}
+            setIsModalOpen={setIsImageModalOpen}
+            setCurrentValue={setCurrentValue}
+          />
         </Suspense>
       </div>
     );