feat(markdown): add react-markdown to parse md to html

wri · Dec 13, 2024 · c61ad80 · c61ad80
1 parent 410a649
commit c61ad80
Show file tree

Hide file tree

Showing 3 changed files with 748 additions and 9 deletions.
diff --git a/components/modals/meta/component.jsx b/components/modals/meta/component.jsx
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
-import { Remark } from 'react-remark';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
 
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
@@ -57,22 +58,32 @@ class ModalMeta extends PureComponent {
    */
   setContentDate() {
     const {
-      tableData: { content_date_range, content_date_description, ...rest },
+      tableData: {
+        resolution_description,
+        content_date_range,
+        content_date_description,
+        ...rest
+      },
     } = this.props;
 
     if (content_date_description) {
-      return { ...rest, content_date: content_date_description };
+      return {
+        resolution: resolution_description,
+        content_date: content_date_description,
+        ...rest,
+      };
     }
 
     if (content_date_description && content_date_range) {
       const { start_date, end_date } = content_date_range;
       return {
-        ...rest,
+        resolution: resolution_description,
         content_date: `${start_date.slice(0, 4)}-${end_date.slice(0, 4)}`,
+        ...rest,
       };
     }
 
-    return rest;
+    return { resolution: resolution_description, ...rest };
   }
 
   getContent() {
@@ -112,7 +123,9 @@ class ModalMeta extends PureComponent {
                         dangerouslySetInnerHTML={{ __html: lowerCase(key) }} // eslint-disable-line
                       />
                       <div className="description-column">
-                        <Remark>{tableDataWithContentDate[key]}</Remark>
+                        <ReactMarkdown rehypePlugins={[rehypeRaw]}>
+                          {tableDataWithContentDate[key]}
+                        </ReactMarkdown>
                       </div>
                     </div>
                   ) : null
@@ -122,15 +135,19 @@ class ModalMeta extends PureComponent {
               <div className="overview">
                 <h4>Overview</h4>
                 <div className="body">
-                  <Remark>{overview}</Remark>
+                  <ReactMarkdown rehypePlugins={[rehypeRaw]}>
+                    {overview}
+                  </ReactMarkdown>
                 </div>
               </div>
             )}
             {parsedCitation && (
               <div className="citation">
                 <h5>Citation</h5>
                 <div className="body">
-                  <Remark>{parsedCitation}</Remark>
+                  <ReactMarkdown rehypePlugins={[rehypeRaw]}>
+                    {parsedCitation}
+                  </ReactMarkdown>
                 </div>
               </div>
             )}

diff --git a/package.json b/package.json
@@ -153,6 +153,7 @@
     "react-intersection-observer": "^8.31.1",
     "react-joyride": "^2.2.1",
     "react-map-gl": "^5.2.7",
+    "react-markdown": "9.0.1",
     "react-modal": "^3.11.2",
     "react-outside-click-handler": "^1.3.0",
     "react-portal": "^4.2.1",
@@ -173,6 +174,7 @@
     "recharts": "2.4.3",
     "redux": "^4.0.5",
     "redux-actions": "^2.6.5",
+    "rehype-raw": "7.0.0",
     "release": "^6.3.0",
     "reselect": "4.0.0",
     "responsive-loader": "^1.2.0",