ui: change method of rendering complex text

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

Hide file tree

Showing 9 changed files with 114 additions and 89 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -11,14 +11,14 @@
   "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",
     "nextjs-progressbar": "^0.0.16",
     "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
@@ -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<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>
+        <MathJax.Context input="tex">
+          <MathJax.Text
+            text={
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: renderComplexSytnax(cleanText(article?.title)),
+                }}
+              />
+            }
+          />
+        </MathJax.Context>
       </a>
       <div className="mb-2">
         <Authors authors={article?.authors} page="search" />
@@ -36,9 +49,18 @@ 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>
+      <MathJax.Context input="tex">
+        <MathJax.Text
+          text={
+            <p
+              className="search-results-record-abstract mb-4"
+              dangerouslySetInnerHTML={{
+                __html: renderComplexSytnax(cleanText(article?.abstract)),
+              }}
+            />
+          }
+        />
+      </MathJax.Context>
       <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,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<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>
+            <MathJax.Context input="tex">
+              <MathJax.Text
+                text={
+                  <h2
+                    className="font-normal mb-3"
+                    dangerouslySetInnerHTML={{
+                      __html: renderComplexSytnax(cleanText(article?.title)),
+                    }}
+                  />
+                }
+              />
+            </MathJax.Context>
             <Authors
               authors={article?.authors}
               page="detail"
               affiliations
               className="mb-3"
             />
-            <p className="text-justify leading-relaxed">
-              <MathJax inline>{ReactHtmlParser(article?.abstract)}</MathJax>
-            </p>
+            <MathJax.Context input="tex">
+              <MathJax.Text
+                text={
+                  <p
+                    className="text-justify leading-relaxed"
+                    dangerouslySetInnerHTML={{
+                      __html: renderComplexSytnax(cleanText(article?.abstract)),
+                    }}
+                  />
+                }
+              />
+            </MathJax.Context>
             <JsonPreview article={article} />
           </div>
           <div className="detail-page-right">

diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css
@@ -24,6 +24,10 @@ a {
   cursor: pointer;
 }
 
+[class*="MJX"][class*="-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
@@ -0,0 +1 @@
+declare module 'react-mathjax2';
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|inf)>/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"
@@ -2097,6 +2080,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 locate-path@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
@@ -2128,26 +2116,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 +2148,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"
@@ -2507,7 +2475,7 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
-prop-types@^15.5.8, prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -2912,6 +2880,15 @@ react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-mathjax2@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/react-mathjax2/-/react-mathjax2-0.0.2.tgz#31a8478d0eb45601d26a66c90682360be062724d"
+  integrity sha512-m63PiOej2OTpcgvT4+VAxTr0zxQVfRmmkSD66QSEcQgSh8ryU/oInlnBCpBJRH6Za5GW8N3/pevTuzI+FG6OkA==
+  dependencies:
+    load-script "^1.0.0"
+    prop-types "^15.6.0"
+    react "^16.0.0"
+
 react-motion@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
@@ -2944,6 +2921,15 @@ react-vis@^1.12.1:
     prop-types "^15.5.8"
     react-motion "^0.5.2"
 
+react@^16.0.0:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -3152,15 +3138,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 +3501,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"