From 5f28f0cdac21844f8c1b3498a2e80ad242250ccf Mon Sep 17 00:00:00 2001 From: karolina-siemieniuk-morawska Date: Wed, 7 Feb 2024 15:13:10 +0100 Subject: [PATCH] ui: change method of rendering complex text * ref: cern-sis/issues-scoap3#291 --- ui/package.json | 1 - ui/src/components/search/ResultItem.tsx | 17 ++++--- ui/src/components/search/SearchResults.tsx | 4 +- ui/src/pages/_app.tsx | 21 ++++---- ui/src/pages/records/[recordId].tsx | 22 +++++---- ui/src/utils/utils.tsx | 14 +++++- ui/yarn.lock | 56 ---------------------- 7 files changed, 47 insertions(+), 88 deletions(-) diff --git a/ui/package.json b/ui/package.json index 8183b5d81..f67e24d8c 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", diff --git a/ui/src/components/search/ResultItem.tsx b/ui/src/components/search/ResultItem.tsx index 7f09a8d3b..30379b179 100644 --- a/ui/src/components/search/ResultItem.tsx +++ b/ui/src/components/search/ResultItem.tsx @@ -1,11 +1,9 @@ import React from "react"; -import ReactHtmlParser from "react-html-parser"; -import { MathJax } from "better-react-mathjax"; 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 +25,11 @@ const ResultItem: React.FC = ({ article }) => { return (
  • - {ReactHtmlParser(article?.title)} +
    @@ -36,9 +38,10 @@ 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..409986b0f 100644 --- a/ui/src/pages/records/[recordId].tsx +++ b/ui/src/pages/records/[recordId].tsx @@ -1,12 +1,10 @@ import React from "react"; -import ReactHtmlParser from "react-html-parser"; import { GetServerSideProps } from "next"; -import { MathJax } from "better-react-mathjax"; 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 +17,24 @@ const RecordPage: React.FC = ({ article }) => {
    -

    - {ReactHtmlParser(article?.title)} -

    +

    -

    - {ReactHtmlParser(article?.abstract)} -

    +

    diff --git a/ui/src/utils/utils.tsx b/ui/src/utils/utils.tsx index 288d46589..82f014d1f 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|)>/g, "") ?? ""; + + const renderComplexSytnax = (abstract: string) => { + if (abstract.includes("