ui: change method of rendering complex text

* ref: cern-sis/issues-scoap3#291 cern-sis/issues-scoap3#304
ErnestaP · Feb 22, 2024 · f5fb989 · f5fb989
1 parent 5a07843
commit f5fb989
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 108 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 { 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<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>
+        <Text
+          text={
+            <span
+              dangerouslySetInnerHTML={{
+                __html: renderComplexSytnax(cleanText(article?.title)),
+              }}
+            />
+          }
+        />
       </a>
       <div className="mb-2">
         <Authors authors={article?.authors} page="search" />
@@ -36,9 +47,16 @@ 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>
+      <Text
+        text={
+          <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,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<AppProps> = ({ Component, pageProps }) => (
-  <MathJaxContext version={3} config={config}>
-    <ConfigProvider theme={theme}>
-      <style jsx global>{`
-        html {
-          font-family: ${font.style.fontFamily};
-        }
-      `}</style>
-      <Layout>
-        <Head>
-          <title>SCOAP3 Repository</title>
-        </Head>
-        <NextNProgress />
+  <ConfigProvider theme={theme}>
+    <style jsx global>{`
+      html {
+        font-family: ${font.style.fontFamily};
+      }
+    `}</style>
+    <Layout>
+      <Head>
+        <title>SCOAP3 Repository</title>
+      </Head>
+      <NextNProgress />
+      <Context
+        script="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
+        options={{
+          asciimath2jax: {
+            useMathMLspacing: true,
+            delimiters: [
+              ["$", "$"],
+              ["$$", "$$"],
+            ],
+            preview: "none",
+          },
+          tex2jax: {
+            inlineMath: [
+              ["$", "$"],
+              ["\\(", "\\)"],
+            ],
+            processEscapes: true,
+          },
+        }}
+      >
         <Component {...pageProps} />
-      </Layout>
-    </ConfigProvider>
-  </MathJaxContext>
+      </Context>
+    </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 { 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<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>
+            <Text
+              text={
+                <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>
+            <Text
+              text={
+                <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/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
@@ -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 };