feat(metadata): add markdown lib to replace parse method

wri · Nov 28, 2024 · afe9890 · afe9890
1 parent abaaf8d
commit afe9890
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 45 deletions.
diff --git a/components/modals/meta/component.jsx b/components/modals/meta/component.jsx
@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
+import { Remark } from 'react-remark';
+
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import lowerCase from 'lodash/lowerCase';
 import moment from 'moment';
-import ReactHtmlParser from 'react-html-parser';
 import { trackEvent } from 'utils/analytics';
 
 import { Button, NoContent } from '@worldresources/gfw-components';
@@ -84,7 +85,7 @@ class ModalMeta extends PureComponent {
                         dangerouslySetInnerHTML={{ __html: lowerCase(key) }} // eslint-disable-line
                       />
                       <div className="description-column">
-                        <p>{this.parseMarkdownURLToHTML(tableData[key])}</p>
+                        <Remark>{tableData[key]}</Remark>
                       </div>
                     </div>
                   ) : null
@@ -94,15 +95,15 @@ class ModalMeta extends PureComponent {
               <div className="overview">
                 <h4>Overview</h4>
                 <div className="body">
-                  <p>{this.parseMarkdownURLToHTML(overview)}</p>
+                  <Remark>{overview}</Remark>
                 </div>
               </div>
             )}
             {parsedCitation && (
               <div className="citation">
                 <h5>Citation</h5>
                 <div className="body">
-                  <p>{this.parseMarkdownURLToHTML(parsedCitation)}</p>
+                  <Remark>{parsedCitation}</Remark>
                 </div>
               </div>
             )}
@@ -134,18 +135,6 @@ class ModalMeta extends PureComponent {
     );
   }
 
-  parseMarkdownURLToHTML = (markdown) => {
-    const markdownRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
-    if (typeof markdown !== 'string') return markdown;
-
-    const htmlAnchor = markdown.replace(
-      markdownRegex,
-      '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
-    );
-
-    return <>{ReactHtmlParser(htmlAnchor)}</>;
-  };
-
   render() {
     const { metakey, setModalMetaClosed, metaData, loading } = this.props;
     const { title } = metaData || {};

diff --git a/package.json b/package.json
@@ -158,6 +158,7 @@
     "react-portal": "^4.2.1",
     "react-pose": "^3.3.6",
     "react-redux": "^7.2.2",
+    "react-remark": "^2.1.0",
     "react-scroll": "^1.7.16",
     "react-simple-maps": "^2.0.0",
     "react-slick": "^0.25.2",