ui: change method of rendering complex text

* ref: cern-sis/issues-scoap3#291
karolina-siemieniuk-morawska · Feb 7, 2024 · 478903a · 478903a
1 parent dbe0488
commit 478903a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 30 deletions.
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/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 {
@@ -17,27 +15,31 @@ const RecordPage: React.FC<RecordPageProps> = ({ article }) => {
   return (
     <div className="container grid grid-cols-4 gap-8">
       <div id="abstract_and_preview" className="col-span-3">
-        <div id="abstract">
-          <div className="detail-page-main">
-            <h2 className="font-normal mb-3">
-              <MathJax inline>{ReactHtmlParser(article?.title)}</MathJax>
-            </h2>
-            <Authors
-              authors={article?.authors}
-              page="detail"
-              affiliations
-              className="mb-3"
-            />
-            <p className="text-justify leading-relaxed">
-              <MathJax inline>{ReactHtmlParser(article?.abstract)}</MathJax>
-            </p>
-          </div>
+        <div className="detail-page-main">
+          <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"
+            dangerouslySetInnerHTML={{
+              __html: renderComplexSytnax(cleanText(article?.abstract)),
+            }}
+          />
         </div>
-        <div id="preview">
+        <div className="mt-4">
           <JsonPreview article={article} />
         </div>
       </div>
-      <div id="abstract_and_preview" className="col-span-1 detail-page-right">
+      <div className="col-span-1 detail-page-right">
         <DetailPageInfo article={article} />
       </div>
     </div>

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 };