diff --git a/ui/package.json b/ui/package.json index 8183b5d81..08d813e54 100644 --- a/ui/package.json +++ b/ui/package.json @@ -11,7 +11,6 @@ "dependencies": { "@ant-design/cssinjs": "^1.17.2", "antd": "^5.10.1", - "better-react-mathjax": "^2.0.3", "lodash.isequal": "^4.5.0", "moment": "^2.29.4", "next": "13.5.5", @@ -19,6 +18,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-html-parser": "^2.0.2", + "react-mathjax2": "^0.0.2", "react-vis": "^1.12.1" }, "devDependencies": { diff --git a/ui/src/components/search/ResultItem.tsx b/ui/src/components/search/ResultItem.tsx index 7f09a8d3b..b885ef86d 100644 --- a/ui/src/components/search/ResultItem.tsx +++ b/ui/src/components/search/ResultItem.tsx @@ -1,11 +1,14 @@ import React from "react"; -import ReactHtmlParser from "react-html-parser"; -import { MathJax } from "better-react-mathjax"; +import { Text } from "react-mathjax2"; import { ArticleIdentifier, Result } from "@/types"; import PublicationInfo from "../shared/PublicationInfo"; import Authors from "../shared/Authors"; -import { resolveIdentifierLink } from "@/utils/utils"; +import { + cleanText, + renderComplexSytnax, + resolveIdentifierLink, +} from "@/utils/utils"; import FulltextFiles from "../shared/FulltextFiles"; interface ResultItemProps { @@ -27,7 +30,15 @@ const ResultItem: React.FC = ({ article }) => { return (
  • - {ReactHtmlParser(article?.title)} + + } + />
    @@ -36,9 +47,16 @@ const ResultItem: React.FC = ({ article }) => { - {article?.publication_date}
    -

    - {ReactHtmlParser(article?.abstract)} -

    + + } + />
    Published in: diff --git a/ui/src/components/search/SearchResults.tsx b/ui/src/components/search/SearchResults.tsx index 81716e456..90a745a98 100644 --- a/ui/src/components/search/SearchResults.tsx +++ b/ui/src/components/search/SearchResults.tsx @@ -57,9 +57,9 @@ const SearchResults: React.FC = ({ onChange={sortResults} defaultValue="_updated_at" > -
    + -
    +
    )} diff --git a/ui/src/pages/_app.tsx b/ui/src/pages/_app.tsx index 2c64987ee..f124be61a 100644 --- a/ui/src/pages/_app.tsx +++ b/ui/src/pages/_app.tsx @@ -2,8 +2,8 @@ import React from "react"; import { ConfigProvider } from "antd"; import Head from "next/head"; import NextNProgress from "nextjs-progressbar"; -import { MathJaxContext } from "better-react-mathjax"; import { PT_Sans_Narrow } from "next/font/google"; +import { Context } from "react-mathjax2"; import "@/styles/globals.css"; import theme from "../theme/themeConfig"; @@ -14,21 +14,6 @@ interface AppProps { pageProps: any; } -const config = { - loader: { load: ["[tex]/html"] }, - tex: { - packages: { "[+]": ["html"] }, - inlineMath: [ - ["$", "$"], - ["\\(", "\\)"], - ], - displayMath: [ - ["$$", "$$"], - ["\\[", "\\]"], - ], - }, -}; - const font = PT_Sans_Narrow({ weight: ["400", "700"], style: ["normal"], @@ -37,22 +22,41 @@ const font = PT_Sans_Narrow({ }); const App: React.FC = ({ Component, pageProps }) => ( - - - - - - SCOAP3 Repository - - + + + + + SCOAP3 Repository + + + - - - + + + ); export default App; diff --git a/ui/src/pages/records/[recordId].tsx b/ui/src/pages/records/[recordId].tsx index e47ab154a..53b82d52c 100644 --- a/ui/src/pages/records/[recordId].tsx +++ b/ui/src/pages/records/[recordId].tsx @@ -1,12 +1,16 @@ import React from "react"; -import ReactHtmlParser from "react-html-parser"; import { GetServerSideProps } from "next"; -import { MathJax } from "better-react-mathjax"; +import { Text } from "react-mathjax2"; import { Result } from "@/types"; import Authors from "@/components/shared/Authors"; import DetailPageInfo from "@/components/detail/DetailPageInfo"; -import { authToken, getApiUrl } from "@/utils/utils"; +import { + authToken, + cleanText, + getApiUrl, + renderComplexSytnax, +} from "@/utils/utils"; import { JsonPreview } from "@/components/shared/JsonPreview"; interface RecordPageProps { @@ -19,18 +23,32 @@ const RecordPage: React.FC = ({ article }) => {
    -

    - {ReactHtmlParser(article?.title)} -

    + + } + /> -

    - {ReactHtmlParser(article?.abstract)} -

    + + } + />
    diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css index 75b7f22bd..3cca973a5 100644 --- a/ui/src/styles/globals.css +++ b/ui/src/styles/globals.css @@ -23,6 +23,11 @@ a { cursor: pointer; } +[class*="MJX"][class*="-display"], +div.MathJax_Display { + display: inline !important; +} + .app { min-height: 100vh; } diff --git a/ui/src/typings/react-mathjax2/index.d.ts b/ui/src/typings/react-mathjax2/index.d.ts new file mode 100644 index 000000000..546f1fb6e --- /dev/null +++ b/ui/src/typings/react-mathjax2/index.d.ts @@ -0,0 +1 @@ +declare module 'react-mathjax2'; diff --git a/ui/src/utils/utils.tsx b/ui/src/utils/utils.tsx index 288d46589..dfd2ee391 100644 --- a/ui/src/utils/utils.tsx +++ b/ui/src/utils/utils.tsx @@ -1,3 +1,5 @@ +import ReactHtmlParser from "react-html-parser"; + import { ArticleIdentifier, Params, QueryType, queryTypes } from "@/types"; import { Token } from "../../token"; @@ -65,4 +67,14 @@ const resolveIdentifierLink = (identifier: ArticleIdentifier) => { } }; -export { getSearchUrl, getApiUrl, resolveIdentifierLink }; + // strip

    and tags to resolve errors:

    cannot appear as a descendant of

    and is not a valid tag. + const cleanText = (text: string) => text.replace(/<\/?(p|italic|sup|i|inf)>/g, "") ?? ""; + + const renderComplexSytnax = (abstract: string) => { + if (abstract.includes("