#67

src/Components/LatextInput/AddImageModal.tsx

@@ -0,0 +1,95 @@
+import { Button, Modal, Spin, Switch } from "antd";
+import TextArea from "antd/es/input/TextArea";
+import { Field, getIn, useFormikContext } from "formik";
+import React, { useEffect, useState } from "react";
+import { convertMathMLToLaTeX } from "../../utils/convertMathMLToLaTeX";
+import { useTranslation } from "react-i18next";
+import ImageBoxFieldMemo from "../CustomFields/ImageBoxField/ImageBoxFieldMemo";
+import { useGetUrl } from "../../api/image";
+import Loading from "../Utils/Loading/Loading";
+import { Spinner } from "reactstrap";
+
+const AddImageModal = ({
+  name,
+  setIsModalOpen,
+  isModalOpen,
+  setCurrentValue,
+}: {
+  name: string;
+  setIsModalOpen: (value: boolean) => void;
+  isModalOpen: boolean;
+  setCurrentValue: (value: string) => void;
+}) => {
+  const { values, setFieldValue, getFieldProps } = useFormikContext<any>();
+  const [imageUrl,setImageUrl] = useState<any>("")
+
+  const {isSuccess,data,isLoading,mutateAsync:sendFile}= useGetUrl()
+
+
+
+
+  const currentValue = getFieldProps(name).value;
+
+const File = getIn(values, `${name}_image_with_content`);            
+
+  const handleOk = async () => {
+
+    if(!File)return;
+      await sendFile({image:File}).then((response:any) => {
+        const oldValue = currentValue ?? "";
+        const imageUrl = response?.data?.url
+
+        const final =  oldValue + `<<img>> ${imageUrl} <<img>>`
+        
+          setFieldValue(name, final);
+          setCurrentValue(final);
+          setFieldValue(`${name}_image_with_content`, null);
+    
+          setIsModalOpen(false);
+      })
+
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+    // setLatex("");
+  };
+
+  const handleChangeInputLatex = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const newValue = e.target.value;
+    // setLatex(newValue);
+
+  };
+
+
+
+  const [t] = useTranslation();
+  return (
+    <Modal
+      footer={false}
+      open={isModalOpen}
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <div className="imageModal">
+              <label className="mb-3"> {t("header.past_your_image")} </label>
+        <div className="bg-upload">
+            <Field key={File} component={ImageBoxFieldMemo} name={`${name}_image_with_content`}/>
+        </div>
+
+        <div className="buttons">
+          <div className="back_button pointer" onClick={handleCancel}>
+            {t("practical.cancel")}
+          </div>
+          <Button className="add_button"  onClick={handleOk} disabled={isLoading || !File} loading={isLoading} >
+            {t(`practical.${"add"}`)}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default AddImageModal;

src/api/image.ts

@@ -0,0 +1,20 @@
+import useAddMutation from "./helper/useAddMutation";
+import useDeleteMutation from "./helper/useDeleteMutation";
+import useGetQuery from "./helper/useGetQuery";
+import useUpdateMutation from "./helper/useUpdateMutation";
+
+const API = {
+  GET: "/image",
+  ADD: "/image",
+  DELETE: "/image",
+  UPDATE: "/image",
+};
+
+const KEY = "image";
+
+export const useGetAllImages = (params?: any, options?: any) =>
+  useGetQuery(KEY, API.GET, params, options);
+export const useGetUrl = () => useAddMutation(KEY, API.ADD);
+export const useUpdateImage = (params?: any) => useUpdateMutation(KEY, API.GET);
+export const useDeleteImage = (params?: any) =>
+  useDeleteMutation(KEY, API.DELETE);

src/utils/parseTextAndLatex.ts

@@ -1,25 +1,27 @@
-interface TextLatexPart {
-  text: string;
+interface TextPart {
+  text: string;       
   isLatex: boolean;
+  isImage: boolean;
   key: number;
 }
 
-export const parseTextAndLatex = (input: string): TextLatexPart[] => {
-  const result: TextLatexPart[] = [];
+export const parseTextAndLatex = (input: string = ""): TextPart[] => {
+  const out: TextPart[] = [];
 
-  console.log(input)
-  const parts = input?.split(/(\$\$[^$]+\$\$)/g);
-  console.log(parts)
+  const parts = input.split(/(\$\$[\s\S]+?\$\$|<<img>>[\s\S]+?<<img>>)/g);
 
   parts.forEach((part, index) => {
+    if (!part) return;
+
     if (part.startsWith("$$") && part.endsWith("$$")) {
-      result.push({ text: part.slice(2, -2), isLatex: true, key: index });
-    }
-     else  {
-      result.push({ text: part, isLatex: false, key: index });
+      out.push({ text: part.slice(2, -2), isLatex: true, isImage: false, key: index });
+    } else if (part.startsWith("<<img>>") && part.endsWith("<<img>>")) {
+      const url = part.slice("<<img>>".length, -"<<img>>".length).trim();
+      out.push({ text: url, isLatex: false, isImage: true, key: index });
+    } else {
+      out.push({ text: part, isLatex: false, isImage: false, key: index });
     }
   });
-  console.log(result)
 
-  return result;
+  return out;
 };