From 03818f6073d1e1283548518c233ca7139878e1c7 Mon Sep 17 00:00:00 2001 From: Viliam Geffert <60324080+vgeffer@users.noreply.github.com> Date: Sat, 14 Dec 2024 22:18:37 +0100 Subject: [PATCH] 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 | 3 +- .../Admin/custom/FlatpagePreview.tsx | 2 +- src/components/Admin/custom/LatexPreview.tsx | 4 +- src/components/CompetitionPage/RulesPage.tsx | 2 +- src/components/Latex/Latex.module.scss | 5 - src/components/Latex/Latex.module.scss.d.ts | 9 -- src/components/Latex/Latex.tsx | 63 -------- .../{StaticSites => Markdown}/Markdown.tsx | 6 +- .../Texts.module.scss | 0 .../Texts.module.scss.d.ts | 0 .../{StaticSites => Markdown}/Texts.tsx | 0 .../ProblemAdministration.tsx | 4 +- src/components/Problems/Problem.tsx | 4 +- src/pages/strom/[page].tsx | 2 +- yarn.lock | 138 +++++++----------- 15 files changed, 70 insertions(+), 172 deletions(-) delete mode 100644 src/components/Latex/Latex.module.scss delete mode 100644 src/components/Latex/Latex.module.scss.d.ts delete mode 100644 src/components/Latex/Latex.tsx rename src/components/{StaticSites => Markdown}/Markdown.tsx (84%) rename src/components/{StaticSites => Markdown}/Texts.module.scss (100%) rename src/components/{StaticSites => Markdown}/Texts.module.scss.d.ts (100%) rename src/components/{StaticSites => Markdown}/Texts.tsx (100%) diff --git a/package.json b/package.json index 14afa390..0ec8acab 100644 --- a/package.json +++ b/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", diff --git a/src/components/Admin/custom/FlatpagePreview.tsx b/src/components/Admin/custom/FlatpagePreview.tsx index 9ec8bf9b..01c053e1 100644 --- a/src/components/Admin/custom/FlatpagePreview.tsx +++ b/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 = () => { diff --git a/src/components/Admin/custom/LatexPreview.tsx b/src/components/Admin/custom/LatexPreview.tsx index 25f6d9b7..b0452eae 100644 --- a/src/components/Admin/custom/LatexPreview.tsx +++ b/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 = ({source}) => { if (!source) return null @@ -13,7 +13,7 @@ export const LatexPreview: FC = ({source}) => { const data = formData[source] if (!data) return null - return {data} + return }} diff --git a/src/components/CompetitionPage/RulesPage.tsx b/src/components/CompetitionPage/RulesPage.tsx index 7094a709..c06bb437 100644 --- a/src/components/CompetitionPage/RulesPage.tsx +++ b/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 diff --git a/src/components/Latex/Latex.module.scss b/src/components/Latex/Latex.module.scss deleted file mode 100644 index 7ad5925b..00000000 --- a/src/components/Latex/Latex.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -.inlineSvgs { - svg { - display: inline; - } -} \ No newline at end of file diff --git a/src/components/Latex/Latex.module.scss.d.ts b/src/components/Latex/Latex.module.scss.d.ts deleted file mode 100644 index 61dbc70c..00000000 --- a/src/components/Latex/Latex.module.scss.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -export type Styles = { - inlineSvgs: string -} - -export type ClassNames = keyof Styles - -declare const styles: Styles - -export default styles diff --git a/src/components/Latex/Latex.tsx b/src/components/Latex/Latex.tsx deleted file mode 100644 index 567ed67e..00000000 --- a/src/components/Latex/Latex.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import {Typography} from '@mui/material' -import {MathComponentProps} from 'mathjax-react/dist/components/MathComponent' -import dynamic from 'next/dynamic' -import {FC, Fragment} from 'react' - -import styles from './Latex.module.scss' - -// mathjax-react musi byt renderovany client-side (spolieha sa na browser `window`): https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr -const MathComponent = dynamic( - () => import('mathjax-react').then(({MathComponent}) => MathComponent), - {ssr: false}, -) - -// toto je regex, ktory matchuje LaTeX matematiku: $$.$$ \[.\] $.$ \(.\) -const re = /((? { - if (str[0] === '$' && str[1] !== '$') { - return str.slice(1, -1) - } else { - return str.slice(2, -2) - } -} - -export const Latex: FC<{children: string}> = ({children}) => { - const matches = Array.from(children.matchAll(re)) - - if (matches.length === 0) { - return - } - - const result = [] - let currentPosition = 0 - - for (const m of matches) { - result.push( - , - , - ) - - if (typeof m.index !== 'undefined') { - currentPosition = m.index + m[0].length - } - } - - result.push( - , - ) - - return ( - // nas globalny CSS reset nastavuje SVGcka na display:block, tak to tu resetneme nazad na inline - // - MathComponent totiz pouziva SVGcka na LaTex vyrazy a rata s tym, ze su inline -
- {result.map((child, index) => ( - // kazdy element listu potrebuje key, inak mame react warning - {child} - ))} -
- ) -} diff --git a/src/components/StaticSites/Markdown.tsx b/src/components/Markdown/Markdown.tsx similarity index 84% rename from src/components/StaticSites/Markdown.tsx rename to src/components/Markdown/Markdown.tsx index 67b7b426..b34171c6 100644 --- a/src/components/StaticSites/Markdown.tsx +++ b/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 = ({content}) => ( = ({content}) => ( h6: H3, ol: Ol, ul: Ul, + script: Empty, }} > {content} diff --git a/src/components/StaticSites/Texts.module.scss b/src/components/Markdown/Texts.module.scss similarity index 100% rename from src/components/StaticSites/Texts.module.scss rename to src/components/Markdown/Texts.module.scss diff --git a/src/components/StaticSites/Texts.module.scss.d.ts b/src/components/Markdown/Texts.module.scss.d.ts similarity index 100% rename from src/components/StaticSites/Texts.module.scss.d.ts rename to src/components/Markdown/Texts.module.scss.d.ts diff --git a/src/components/StaticSites/Texts.tsx b/src/components/Markdown/Texts.tsx similarity index 100% rename from src/components/StaticSites/Texts.tsx rename to src/components/Markdown/Texts.tsx diff --git a/src/components/ProblemAdministration/ProblemAdministration.tsx b/src/components/ProblemAdministration/ProblemAdministration.tsx index e126c265..eec9a28e 100644 --- a/src/components/ProblemAdministration/ProblemAdministration.tsx +++ b/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 = () => { - {problem.text ?? 'Načítavam...'} +
diff --git a/src/components/Problems/Problem.tsx b/src/components/Problems/Problem.tsx index 0bc789d8..eeecdb92 100644 --- a/src/components/Problems/Problem.tsx +++ b/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<{ {problem.order}. ÚLOHA - {problem.text} + {problem.image && (