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..ff26a04b1 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 MathJax 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,17 @@ const ResultItem: React.FC = ({ article }) => { return (
  • - {ReactHtmlParser(article?.title)} + + + } + /> +
    @@ -36,9 +49,18 @@ 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 4f41ca03c..7e2794835 100644 --- a/ui/src/pages/_app.tsx +++ b/ui/src/pages/_app.tsx @@ -2,7 +2,6 @@ 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 "@/styles/globals.css"; import theme from "../theme/themeConfig"; @@ -29,17 +28,15 @@ const config = { }; 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..204590422 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 MathJax 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,36 @@ 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 b34b3c403..19b4f6cfe 100644 --- a/ui/src/styles/globals.css +++ b/ui/src/styles/globals.css @@ -24,6 +24,10 @@ a { cursor: pointer; } +.MJXc-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("