Merge pull request #211 from aodn/bugs/5964-fix-abstract-formatting

Fix abstract format issue on UI

src/components/list/listItem/subitem/ExpandableTextArea.tsx

@@ -4,6 +4,7 @@ import { Button, Grid, Typography } from "@mui/material";
 import {
   decodeHtmlEntities,
   truncateText,
+  enrichHTML,
 } from "../../../../utils/StringUtils";
 
 interface ExpandableTextAreaProps {
@@ -24,19 +25,20 @@ const ExpandableTextArea: React.FC<ExpandableTextAreaProps> = ({
   showMoreStr = "Show More",
 }) => {
   const decodedText = decodeHtmlEntities(text);
-  const truncatedText = truncateText(decodedText, truncateCount);
   const doesNeedTruncation = decodedText.length > truncateCount;
 
   const [isExpanded, setIsExpanded] = useState(false);
 
   const onButtonClick = useCallback(() => {
     setIsExpanded((prev) => !prev);
   }, []);
+
   return (
     <TextAreaBaseGrid>
       <Grid item md={12}>
         <Typography
           variant="detailContent"
+          whiteSpace="pre-wrap"
           sx={{
             textAlign: "left",
             ...(isClickable && {
@@ -48,7 +50,7 @@ const ExpandableTextArea: React.FC<ExpandableTextAreaProps> = ({
           }}
           onClick={onClick}
         >
-          {isExpanded ? decodedText : truncatedText}
+          {isExpanded ? decodedText : truncateText(decodedText, truncateCount)}
         </Typography>
       </Grid>
       <Grid item md={12} display="flex" justifyContent="flex-end">

src/pages/detail-page/subpages/tab-panels/AbstractAndDownloadPanel.tsx

@@ -40,7 +40,6 @@ import Layers from "../../../../components/map/mapbox/layers/Layers";
 import { StaticLayersDef } from "../../../../components/map/mapbox/layers/StaticLayer";
 import { MapboxWorldLayersDef } from "../../../../components/map/mapbox/layers/MapboxWorldLayer";
 import useScrollToSection from "../../../../hooks/useScrollToSection";
-import { decodeHtmlEntities } from "../../../../utils/StringUtils";
 import ExpandableTextArea from "../../../../components/list/listItem/subitem/ExpandableTextArea";
 import DetailClusterLayer from "../../../../components/map/mapbox/layers/DetailClusterLayer";
 
@@ -156,7 +155,7 @@ const AbstractAndDownloadPanel: FC = () => {
         <Grid item xs={12}>
           <Stack direction="column">
             <ExpandableTextArea
-              text={decodeHtmlEntities(abstract)}
+              text={abstract}
               showMoreStr={"Show All"}
               truncateCount={TRUNCATE_COUNT}
             />

src/utils/StringUtils.ts

@@ -2,6 +2,7 @@
 // e.g capitalize, concatenate, ...
 
 import { decode } from "he";
+import React from "react";
 
 /**
  * Capitalizes the first letter of a given string.
@@ -46,3 +47,15 @@ export const decodeHtmlEntities = (str: string): string => {
     return str;
   }
 };
+// TODO: Keep it for now, we want to enhance the url later with http
+export const enrichHTML = (text: string): string => {
+  // Regular expression to match URLs with http:// or https://
+  const urlPattern = /\bhttps?:\/\/[^\s/$.?#].[^\s]*\b/g;
+
+  // Replace URLs in the text with anchor tags
+  const h = text.replace(urlPattern, (url) => {
+    return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
+  });
+
+  return h.replace(/\n/g, "<br>");
+};