ui: change method of rendering complex text

* ref: cern-sis/issues-scoap3#291
karolina-siemieniuk-morawska · Feb 8, 2024 · 5f28f0c · 5f28f0c
1 parent 59db9b5
commit 5f28f0c
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 88 deletions.
diff --git 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
@@ -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<ResultItemProps> = ({ article }) => {
   return (
     <li className="search-results-record border-0 border-b border-solid border-slate-200 py-6">
       <a href={`/records/${article?.id}`} className="mb-2 block text-lg">
-        <MathJax inline>{ReactHtmlParser(article?.title)}</MathJax>
+        <span
+          dangerouslySetInnerHTML={{
+            __html: renderComplexSytnax(cleanText(article?.title)),
+          }}
+        />
       </a>
       <div className="mb-2">
         <Authors authors={article?.authors} page="search" />
@@ -36,9 +38,10 @@ const ResultItem: React.FC<ResultItemProps> = ({ article }) => {
           - {article?.publication_date}
         </small>
       </div>
-      <p className="search-results-record-abstract mb-4">
-        <MathJax inline>{ReactHtmlParser(article?.abstract)}</MathJax>
-      </p>
+      <p
+        className="search-results-record-abstract mb-4"
+        dangerouslySetInnerHTML={{ __html: renderComplexSytnax(cleanText(article?.abstract)) }}
+      />
       <div className="lg:flex justify-between items-end">
         <div>
           <span className="text-sm">Published in: </span>

diff --git a/ui/src/components/search/SearchResults.tsx b/ui/src/components/search/SearchResults.tsx
@@ -57,9 +57,9 @@ const SearchResults: React.FC<SearchResultsProps> = ({
                 onChange={sortResults}
                 defaultValue="_updated_at"
               >
-                <div>
+                <Select.OptGroup>
                   <DownOutlined />
-                </div>
+                </Select.OptGroup>
               </Select>
             </div>
           )}

diff --git 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<AppProps> = ({ Component, pageProps }) => (
-  <MathJaxContext version={3} config={config}>
-    <ConfigProvider theme={theme}>
-      <Layout>
-        <Head>
-          <title>SCOAP3 Repository</title>
-        </Head>
-        <NextNProgress />
-        <Component {...pageProps} />
-      </Layout>
-    </ConfigProvider>
-  </MathJaxContext>
+  <ConfigProvider theme={theme}>
+    <Layout>
+      <Head>
+        <title>SCOAP3 Repository</title>
+      </Head>
+      <NextNProgress />
+      <Component {...pageProps} />
+    </Layout>
+  </ConfigProvider>
 );
 
 export default App;
diff --git 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<RecordPageProps> = ({ article }) => {
       <div className="container-inner">
         <div className="flex flex-col md:flex-row">
           <div className="detail-page-main">
-            <h2 className="font-normal mb-3">
-              <MathJax inline>{ReactHtmlParser(article?.title)}</MathJax>
-            </h2>
+          <h2
+            className="font-normal mb-3"
+            dangerouslySetInnerHTML={{
+              __html: renderComplexSytnax(cleanText(article?.title)),
+            }}
+          />
             <Authors
               authors={article?.authors}
               page="detail"
               affiliations
               className="mb-3"
             />
-            <p className="text-justify leading-relaxed">
-              <MathJax inline>{ReactHtmlParser(article?.abstract)}</MathJax>
-            </p>
+          <p
+            className="text-justify leading-relaxed"
+            dangerouslySetInnerHTML={{
+              __html: renderComplexSytnax(cleanText(article?.abstract)),
+            }}
+          />
             <JsonPreview article={article} />
           </div>
           <div className="detail-page-right">

diff --git 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 <p> and <italic> tags to resolve errors: <p> cannot appear as a descendant of <p> and <italic> is not a valid tag.
+  const cleanText = (text: string) => text.replace(/<\/?(p|italic|sup|i|)>/g, "") ?? "";
+
+  const renderComplexSytnax = (abstract: string) => {
+    if (abstract.includes("<math")) {
+      return abstract;
+    }
+    return ReactHtmlParser(abstract);
+  };
+
+export { getSearchUrl, getApiUrl, resolveIdentifierLink, cleanText, renderComplexSytnax };
diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -706,13 +706,6 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-better-react-mathjax@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/better-react-mathjax/-/better-react-mathjax-2.0.3.tgz#202dc6fe5c7263278f2491516f43f70ba188122f"
-  integrity sha512-wfifT8GFOKb1TWm2+E50I6DJpLZ5kLbch283Lu043EJtwSv0XvZDjr4YfR4d2MjAhqP6SH4VjjrKgbX8R00oCQ==
-  dependencies:
-    mathjax-full "^3.2.2"
-
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -819,11 +812,6 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-[email protected]:
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-9.2.0.tgz#6e21014b2ed90d8b7c9647230d8b7a94a4a419a9"
-  integrity sha512-e2i4wANQiSXgnrBlIatyHtP1odfUp0BbV5Y5nEGbxtIrStkEOAAzCUirvLBNXHLr7kwLvJl6V+4V3XV9x7Wd9w==
-
 commander@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
@@ -1421,11 +1409,6 @@ eslint@^8:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-esm@^3.2.25:
-  version "3.2.25"
-  resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
-  integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
-
 espree@^9.6.0, espree@^9.6.1:
   version "9.6.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
@@ -2128,26 +2111,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-mathjax-full@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/mathjax-full/-/mathjax-full-3.2.2.tgz#43f02e55219db393030985d2b6537ceae82f1fa7"
-  integrity sha512-+LfG9Fik+OuI8SLwsiR02IVdjcnRCy5MufYLi0C3TdMT56L/pjB0alMVGgoWJF8pN9Rc7FESycZB9BMNWIid5w==
-  dependencies:
-    esm "^3.2.25"
-    mhchemparser "^4.1.0"
-    mj-context-menu "^0.6.1"
-    speech-rule-engine "^4.0.6"
-
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-mhchemparser@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/mhchemparser/-/mhchemparser-4.2.1.tgz#d73982e66bc06170a85b1985600ee9dabe157cb0"
-  integrity sha512-kYmyrCirqJf3zZ9t/0wGgRZ4/ZJw//VwaRVGA75C4nhE60vtnIzhl9J9ndkX/h6hxSN7pjg/cE0VxbnNM+bnDQ==
-
 micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
@@ -2175,11 +2143,6 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
-mj-context-menu@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/mj-context-menu/-/mj-context-menu-0.6.1.tgz#a043c5282bf7e1cf3821de07b13525ca6f85aa69"
-  integrity sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA==
-
 moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
@@ -3152,15 +3115,6 @@ source-map-js@^1.0.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
-speech-rule-engine@^4.0.6:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/speech-rule-engine/-/speech-rule-engine-4.0.7.tgz#b655dacbad3dae04acc0f7665e26ef258397dd09"
-  integrity sha512-sJrL3/wHzNwJRLBdf6CjJWIlxC04iYKkyXvYSVsWVOiC2DSkHmxsqOhEeMsBA9XK+CHuNcsdkbFDnoUfAsmp9g==
-  dependencies:
-    commander "9.2.0"
-    wicked-good-xpath "1.3.0"
-    xmldom-sre "0.1.31"
-
 streamsearch@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
@@ -3524,21 +3478,11 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-[email protected]:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz#81b0e95e8650e49c94b22298fff8686b5553cf6c"
-  integrity sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw==
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-[email protected]:
-  version "0.1.31"
-  resolved "https://registry.yarnpkg.com/xmldom-sre/-/xmldom-sre-0.1.31.tgz#10860d5bab2c603144597d04bf2c4980e98067f4"
-  integrity sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==
-
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"