add switch For more than line in MML
This commit is contained in:
parent
5638be0664
commit
cbd3698b58
|
|
@ -1,10 +1,11 @@
|
||||||
import { Modal } from "antd";
|
import { Modal, Switch } from "antd";
|
||||||
import TextArea from "antd/es/input/TextArea";
|
import TextArea from "antd/es/input/TextArea";
|
||||||
import { useFormikContext } from "formik";
|
import { useFormikContext } from "formik";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { convertMathMLToLaTeX } from "../../utils/convertMathMLToLaTeX";
|
import { convertMathMLToLaTeX } from "../../utils/convertMathMLToLaTeX";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
|
import ValidationField from "../ValidationField/ValidationField";
|
||||||
|
|
||||||
const AddLaTexModal = ({
|
const AddLaTexModal = ({
|
||||||
name,
|
name,
|
||||||
|
|
@ -22,19 +23,27 @@ const AddLaTexModal = ({
|
||||||
setCurrentValue: (value: string) => void;
|
setCurrentValue: (value: string) => void;
|
||||||
}) => {
|
}) => {
|
||||||
const { values, setFieldValue, getFieldProps } = useFormikContext<any>();
|
const { values, setFieldValue, getFieldProps } = useFormikContext<any>();
|
||||||
|
const [isSwitchActive,setIsSwitchActive] = useState(false)
|
||||||
|
|
||||||
|
const onChange = (checked: boolean) => {
|
||||||
|
setIsSwitchActive(checked)
|
||||||
|
};
|
||||||
|
|
||||||
const currentValue = getFieldProps(name).value;
|
const currentValue = getFieldProps(name).value;
|
||||||
const handleOk = () => {
|
const handleOk = () => {
|
||||||
const oldValue = currentValue ?? "";
|
const oldValue = currentValue ?? "";
|
||||||
const newLatex = convertMathMLToLaTeX(Latex)
|
const newLatex = convertMathMLToLaTeX(Latex)
|
||||||
const final = oldValue + " $$ " + newLatex + " $$ "
|
const final = oldValue + (isSwitchActive ? " $$$ " + newLatex + " $$$ " : " $$ " + newLatex + " $$ ")
|
||||||
setFieldValue(name, final);
|
setFieldValue(name, final);
|
||||||
setCurrentValue(final);
|
setCurrentValue(final);
|
||||||
setLatex("");
|
setLatex("");
|
||||||
|
setIsSwitchActive(false)
|
||||||
setIsModalOpen(false);
|
setIsModalOpen(false);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
|
setIsSwitchActive(false)
|
||||||
setIsModalOpen(false);
|
setIsModalOpen(false);
|
||||||
setLatex("");
|
setLatex("");
|
||||||
};
|
};
|
||||||
|
|
@ -65,6 +74,11 @@ const AddLaTexModal = ({
|
||||||
onChange={handleChangeInputLatex}
|
onChange={handleChangeInputLatex}
|
||||||
value={Latex}
|
value={Latex}
|
||||||
/>
|
/>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<Switch id="switch" value={isSwitchActive} onChange={onChange} />
|
||||||
|
<label className="mb-3 "style={{cursor:"pointer"}} htmlFor="switch"> {t("input.moreThanOneLine")} </label>
|
||||||
|
</div>
|
||||||
<div className="buttons">
|
<div className="buttons">
|
||||||
<div className="back_button pointer" onClick={handleCancel}>
|
<div className="back_button pointer" onClick={handleCancel}>
|
||||||
{t("practical.cancel")}
|
{t("practical.cancel")}
|
||||||
|
|
|
||||||
|
|
@ -8,12 +8,14 @@ interface TextPart {
|
||||||
export const parseTextAndLatex = (input: string = ""): TextPart[] => {
|
export const parseTextAndLatex = (input: string = ""): TextPart[] => {
|
||||||
const out: TextPart[] = [];
|
const out: TextPart[] = [];
|
||||||
|
|
||||||
const parts = input.split(/(\$\$[\s\S]+?\$\$|<<img>>[\s\S]+?<<img>>)/g);
|
const parts = input.split(/(\$\$\$[\s\S]+?\$\$\$|\$\$[\s\S]+?\$\$|<<img>>[\s\S]+?<<img>>)/g);
|
||||||
|
|
||||||
parts.forEach((part, index) => {
|
parts.forEach((part, index) => {
|
||||||
if (!part) return;
|
if (!part) return;
|
||||||
|
|
||||||
if (part.startsWith("$$") && part.endsWith("$$")) {
|
if (part.startsWith("$$$") && part.endsWith("$$$")) {
|
||||||
|
out.push({ text: part.slice(3, -3), isLatex: true, isImage: false, key: index });
|
||||||
|
}else if (part.startsWith("$$") && part.endsWith("$$")) {
|
||||||
out.push({ text: part.slice(2, -2), isLatex: true, isImage: false, key: index });
|
out.push({ text: part.slice(2, -2), isLatex: true, isImage: false, key: index });
|
||||||
} else if (part.startsWith("<<img>>") && part.endsWith("<<img>>")) {
|
} else if (part.startsWith("<<img>>") && part.endsWith("<<img>>")) {
|
||||||
const url = part.slice("<<img>>".length, -"<<img>>".length).trim();
|
const url = part.slice("<<img>>".length, -"<<img>>".length).trim();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user