✨ add react-remark library, test it in SimpleMarkdownText

.bundlewatch.config.json

@@ -2,7 +2,7 @@
     "files": [
         {
             "path": "./dist/assets/common.mjs",
-            "maxSize": "1.75MB"
+            "maxSize": "1.83MB"
         },
         {
             "path": "./dist/assets/owid.mjs",

package.json

@@ -186,6 +186,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",

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

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

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,7 @@ 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 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))}</>
+        return <Remark>{this.text}</Remark>
     }
 }