Remove mathjax and replace it with ReactMarkdown (#532)

* Remove mathjax and replace it with ReactMarkdown

* Remove Latex component and replaced it with Markdown

package.json

@@ -30,8 +30,6 @@
     "clsx": "^2.1.1",
     "katex": "^0.16.11",
     "luxon": "^3.5.0",
-    "mathjax-full": "^3.2.2",
-    "mathjax-react": "^2.0.1",
     "next": "15.0.3",
     "ra-i18n-polyglot": "^5.4.0",
     "ra-language-slovak": "^3.6.2",
@@ -43,6 +41,7 @@
     "react-hook-form": "^7.53.2",
     "react-markdown": "^9.0.1",
     "rehype-katex": "^7.0.1",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "typescript": "^5.7.2",

src/components/Admin/custom/FlatpagePreview.tsx

@@ -2,7 +2,7 @@ import {ThemeProvider} from '@mui/material/styles'
 import {FC} from 'react'
 import {FormDataConsumer} from 'react-admin'
 
-import {Markdown} from '@/components/StaticSites/Markdown'
+import {Markdown} from '@/components/Markdown/Markdown'
 import {theme} from '@/theme'
 
 export const FlatpagePreview: FC = () => {

src/components/Admin/custom/LatexPreview.tsx

@@ -1,7 +1,7 @@
 import {FC} from 'react'
 import {FieldProps, FormDataConsumer, Labeled} from 'react-admin'
 
-import {Latex} from '@/components/Latex/Latex'
+import {Markdown} from '@/components/Markdown/Markdown'
 
 export const LatexPreview: FC<FieldProps> = ({source}) => {
   if (!source) return null
@@ -13,7 +13,7 @@ export const LatexPreview: FC<FieldProps> = ({source}) => {
           const data = formData[source]
           if (!data) return null
 
-          return <Latex>{data}</Latex>
+          return <Markdown content={data} />
         }}
       </FormDataConsumer>
     </Labeled>

src/components/CompetitionPage/RulesPage.tsx

@@ -1,6 +1,6 @@
 import {FC} from 'react'
 
-import {Markdown} from '@/components/StaticSites/Markdown'
+import {Markdown} from '@/components/Markdown/Markdown'
 import {Competition} from '@/types/api/generated/competition'
 
 type RulesPageProps = Pick<Competition, 'rules' | 'upcoming_or_current_event' | 'name'>

src/components/StaticSites/Markdown.tsx → src/components/Markdown/Markdown.tsx

@@ -3,6 +3,7 @@ import 'katex/dist/katex.min.css'
 import {FC} from 'react'
 import ReactMarkdown from 'react-markdown'
 import rehypeKatex from 'rehype-katex'
+import rehypeRaw from 'rehype-raw'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
@@ -12,10 +13,12 @@ type MarkdownProps = {
   content: string
 }
 
+const Empty: FC = () => <></>
+
 export const Markdown: FC<MarkdownProps> = ({content}) => (
   <ReactMarkdown
     remarkPlugins={[remarkGfm, remarkMath]}
-    rehypePlugins={[rehypeKatex]}
+    rehypePlugins={[rehypeKatex, rehypeRaw]}
     components={{
       a: MarkdownLink,
       table: Table,
@@ -30,6 +33,7 @@ export const Markdown: FC<MarkdownProps> = ({content}) => (
       h6: H3,
       ol: Ol,
       ul: Ul,
+      script: Empty,
     }}
   >
     {content}

src/components/ProblemAdministration/ProblemAdministration.tsx

@@ -17,8 +17,8 @@ import {Link} from '../Clickable/Link'
 import {Dialog} from '../Dialog/Dialog'
 import {FileDropZone} from '../FileDropZone/FileDropZone'
 import {FileUploader} from '../FileUploader/FileUploader'
-import {Latex} from '../Latex/Latex'
 import {Loading} from '../Loading/Loading'
+import {Markdown} from '../Markdown/Markdown'
 import styles from './ProblemAdministration.module.scss'
 
 export const ProblemAdministration: FC = () => {
@@ -188,7 +188,7 @@ export const ProblemAdministration: FC = () => {
           </Link>
         </Stack>
 
-        <Latex>{problem.text ?? 'Načítavam...'}</Latex>
+        <Markdown content={problem.text ?? 'Načítavam...'} />
 
         <div className={styles.row}>
           <Typography variant="body1" component="div">

src/components/Problems/Problem.tsx

@@ -7,7 +7,7 @@ import {Link} from '@/components/Clickable/Link'
 import {Problem as ProblemType} from '@/types/api/competition'
 import {AuthContainer} from '@/utils/AuthContainer'
 
-import {Latex} from '../Latex/Latex'
+import {Markdown} from '../Markdown/Markdown'
 import styles from './Problem.module.scss'
 import {UploadProblemForm} from './UploadProblemForm'
 
@@ -69,7 +69,7 @@ export const Problem: FC<{
       <Typography variant="h3" fontStyle="unset">
         {problem.order}. ÚLOHA
       </Typography>
-      <Latex>{problem.text}</Latex>
+      <Markdown content={problem.text} />
       {problem.image && (
         <Stack alignItems="center">
           <Image

src/pages/strom/[page].tsx

@@ -1,8 +1,8 @@
 import axios from 'axios'
 import {GetServerSideProps, NextPage} from 'next'
 
+import {Markdown} from '@/components/Markdown/Markdown'
 import {PageLayout} from '@/components/PageLayout/PageLayout'
-import {Markdown} from '@/components/StaticSites/Markdown'
 import {FlatPage} from '@/types/api/generated/base'
 import {Seminar} from '@/utils/useSeminarInfo'