✨ add react-remark library, test it in SimpleMarkdownText

owid · Oct 30, 2023 · 002618e · 002618e
1 parent 87cedb9
commit 002618e
Show file tree

Hide file tree

Showing 5 changed files with 421 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -187,6 +187,7 @@
         "react-intersection-observer": "^9.4.0",
         "react-move": "^6.5.0",
         "react-recaptcha": "^2.3.10",
+        "react-remark": "^2.1.0",
         "react-router-dom": "^5.3.1",
         "react-select": "^5.7.3",
         "react-tag-autocomplete": "^7.1.0",

diff --git a/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx b/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx
@@ -49,11 +49,9 @@ export const IndicatorProcessing = (props: IndicatorProcessingProps) => {
                         Notes on our processing step for this indicator
                     </h5>
                     <div className="variable-processing-info__description">
-                        <p className="article-block__text">
-                            <SimpleMarkdownText
-                                text={props.descriptionProcessing}
-                            />
-                        </p>
+                        <SimpleMarkdownText
+                            text={props.descriptionProcessing}
+                        />
                     </div>
                 </div>
             )}

diff --git a/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.tsx b/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.tsx
@@ -65,11 +65,9 @@ export const IndicatorSources = (props: IndicatorSourcesProps) => {
                                 content={
                                     <>
                                         {source.description && (
-                                            <p className="article-block__text">
-                                                <SimpleMarkdownText
-                                                    text={source.description}
-                                                />
-                                            </p>
+                                            <SimpleMarkdownText
+                                                text={source.description}
+                                            />
                                         )}
                                         {(dateAccessed || source.urlMain) && (
                                             <div

diff --git a/packages/@ourworldindata/components/src/SimpleMarkdownText.tsx b/packages/@ourworldindata/components/src/SimpleMarkdownText.tsx
@@ -1,11 +1,6 @@
 import React from "react"
 import { computed } from "mobx"
-import {
-    IRToken,
-    parsimmonToTextTokens,
-    recursiveMergeTextTokens,
-} from "./MarkdownTextWrap/MarkdownTextWrap.js"
-import { MarkdownRoot, mdParser } from "./MarkdownTextWrap/parser.js"
+import { Remark } from "react-remark"
 type SimpleMarkdownTextProps = {
     text: string
 }
@@ -15,22 +10,22 @@ export class SimpleMarkdownText extends React.Component<SimpleMarkdownTextProps>
         return this.props.text
     }
 
-    @computed get ast(): MarkdownRoot["children"] {
-        if (!this.text) return []
-        const result = mdParser.markdown.parse(this.props.text)
-        if (result.status) {
-            return result.value.children
-        }
-        return []
-    }
+    // @computed get ast(): MarkdownRoot["children"] {
+    //     if (!this.text) return []
+    //     const result = mdParser.markdown.parse(this.props.text)
+    //     if (result.status) {
+    //         return result.value.children
+    //     }
+    //     return []
+    // }
 
-    @computed get tokens(): IRToken[] {
-        const tokens = parsimmonToTextTokens(this.ast, {})
-        return recursiveMergeTextTokens(tokens)
-    }
+    // @computed get tokens(): IRToken[] {
+    //     const tokens = parsimmonToTextTokens(this.ast, {})
+    //     return recursiveMergeTextTokens(tokens)
+    // }
 
     render(): JSX.Element | null {
-        const { tokens } = this
-        return <>{tokens.map((token, index) => token.toHTML(index))}</>
+        // const { tokens } = this
+        return <Remark>{this.text}</Remark>
     }
 }