110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
import TextArea from 'antd/es/input/TextArea'
|
|
import { useFormikContext } from 'formik';
|
|
import React, { Suspense, useState } from 'react'
|
|
import { parseTextAndLatex } from '../../utils/parseTextAndLatex';
|
|
import LatexPreview from '../../Components/CustomFields/MathComponent';
|
|
import { Checkbox } from 'antd';
|
|
import { CheckboxProps } from 'antd/lib';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { FaPlus } from 'react-icons/fa';
|
|
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,getFieldProps} = useFormikContext<any>()
|
|
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 ?? "") ;
|
|
|
|
const onPreviewChange: CheckboxProps['onChange'] = (e) => {
|
|
const value = e.target.checked
|
|
setShowPreview(value)
|
|
};
|
|
const [t] = useTranslation()
|
|
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
|
|
|
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"
|
|
showCount
|
|
maxLength={1000}
|
|
autoSize={{ minRows: 6, maxRows: 10 }}
|
|
style={{height:"400px"}}
|
|
onChange={handleChangeInput}
|
|
value={value}
|
|
{...props}
|
|
|
|
/>
|
|
{ShowLatexOption &&
|
|
<div className='LaTeXInputOptions'>
|
|
|
|
<Checkbox onChange={onPreviewChange}>{t("header.show_preview")}</Checkbox>
|
|
<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} onClick={()=>handelEditModal(item)} className='LatexPreview'> <LatexPreview Latex={item?.text} /> </div>
|
|
}
|
|
return <div key={index}>
|
|
{item?.text}
|
|
</div>
|
|
})}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
|
|
<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>
|
|
)
|
|
}
|
|
|
|
export default LaTeXInput |