tyay math

src/Pages/Home/Dummy.tsx

@@ -1,23 +1,14 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import MathMLPreview from "./MathMLPreview";
-import { Field, Form, Formik } from "formik";
-import Test from "./Test";
-import MarkdownPreview from '@uiw/react-markdown-preview';
-import { BlockMath } from "react-katex";
-
+import { MathConverter } from "./MathConverter";
 const Dummy = () => {
   const [t] = useTranslation();
-  const [markdown, setMarkdown] = useState<string>(' \nV_{sphere} = \\frac{4}{3}\\pi r^3\n');
 
 
   return (
     <div className="DummyHomePage">
        
-       <MarkdownPreview style={{background:"transparent" ,color:"black"}} source={"This is an <u>underlined</u> text."} />
-       <BlockMath>
-      {markdown} 
-        </BlockMath> 
+<MathConverter />
     </div>
   );
 };

src/Pages/Home/MathConverter.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { MathJax, MathJaxContext } from 'better-react-mathjax';
+
+const convertToLatex = (input: string): string => {
+    // Replace fractions
+    let latex = input.replace(/(\d+)\/(\d+)/g, '\\frac{$1}{$2}');
+    latex = latex.replace(/\(([^()]+)\)\/\(([^()]+)\)/g, '\\frac{($1)}{($2)}');
+    latex = latex.replace(/([^\s()]+)\s*\/\s*([^\s()]+)/g, '\\frac{$1}{$2}');
+  
+    // Handle exponentiation
+    latex = latex.replace(/(\w+)\^(\(.+?\)|\w+)/g, '$1^{ $2 }');
+    latex = latex.replace(/(\w+)\s*\^(\w+)/g, '$1^{ $2 }');
+  
+    // Handle square roots
+    latex = latex.replace(/sqrt\(([^()]+)\)/g, '\\sqrt{$1}');
+  
+    // Replace subscripts
+    latex = latex.replace(/_(\w+)/g, '_{ $1 }');
+    latex = latex.replace(/_([\w+]+)/g, '_{ $1 }');
+  
+    // Add spacing for equations
+    latex = latex.replace(/=/g, ' = ');
+  
+    return latex;
+};
+
+export const MathConverter: React.FC = () => {
+    const config = {
+        loader: { load: ["input/asciimath"] }
+    };
+    
+    const [inputText, setInputText] = useState<string>('u_(n+1)=e.sqrt(u_n)');
+    const [convertedLatex, setConvertedLatex] = useState<string>('');
+
+const handleClick = () => {
+        const latex = convertToLatex(inputText);
+        setConvertedLatex(latex);
+    };
+
+    return (
+        <MathJaxContext config={config}>
+            <div>
+                <h2>LaTeX Preview</h2>
+                <textarea
+                    value={inputText}
+                    onChange={(e) => setInputText(e.target.value)}
+                    rows={10}
+                    cols={50}
+                />
+                <h3>Converted LaTeX:</h3>
+                <MathJax inline={false}>{`$$${convertedLatex}$$`}</MathJax>
+                <button onClick={handleClick}>Convert to LaTeX</button>
+            </div>
+        </MathJaxContext>
+    );
+};

src/Styles/Layout/PageHeader.scss

@@ -31,6 +31,7 @@
 .PageTitle {
   display: flex;
   gap: 10px;
+  flex-wrap: wrap;
   margin-block: 10px;
 
   .PageTitleItems {

src/Styles/components/LaTeXInput.scss

@@ -73,13 +73,13 @@
   }
 }
 
-.katex .msupsub{
-    text-align: end !important;
-}
-.mtight{
+    // .katex .msupsub{
+    //     text-align: end !important;
+    // }
+    // .mtight{
         
-    font-size: 10px !important;
-}
-.katex .delimcenter, .katex .op-symbol{
-    display: none;
-}
+    //     font-size: 10px !important;
+    // }
+// .katex .delimcenter, .katex .op-symbol{
+//     display: none;
+// }