markdown-plain-urls

package.json

@@ -155,6 +155,7 @@
         "lodash": "^4.17.20",
         "mathjax-full": "^3.1.0",
         "md5": "^2.3.0",
+        "mdast-util-find-and-replace": "1.1.1",
         "mdast-util-from-markdown": "^0.8.0",
         "minimist": "^1.2.6",
         "mobx": "^5.15.7",

packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx

@@ -15,6 +15,7 @@ import { TextWrap } from "../TextWrap/TextWrap.js"
 import fromMarkdown from "mdast-util-from-markdown"
 import type { Root, Content } from "mdast"
 import { match } from "ts-pattern"
+import { urlRegex } from "../markdown/remarkPlainLinks.js"
 
 const SUPERSCRIPT_NUMERALS = {
     "0": "\u2070",
@@ -888,12 +889,13 @@ function convertMarkdownNodeToIRTokens(
             (item) => {
                 const splitted = item.value.split(/\s+/)
                 const tokens = splitted.flatMap((text, i) => {
+                    const textNode = new IRText(text, fontParams)
+                    const node = text.match(urlRegex)
+                        ? new IRLink(text, [textNode], fontParams)
+                        : textNode
                     if (i < splitted.length - 1) {
-                        return [
-                            new IRText(text, fontParams),
-                            new IRWhitespace(fontParams),
-                        ]
-                    } else return [new IRText(text, fontParams)]
+                        return [node, new IRWhitespace(fontParams)]
+                    } else return [node]
                 })
                 return tokens
             }

packages/@ourworldindata/components/src/SimpleMarkdownText.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { computed } from "mobx"
 import { Remark } from "react-remark"
+import { remarkPlainLinks } from "./markdown/remarkPlainLinks.js"
 
 type SimpleMarkdownTextProps = {
     text: string
@@ -12,6 +13,6 @@ export class SimpleMarkdownText extends React.Component<SimpleMarkdownTextProps>
     }
 
     render(): JSX.Element | null {
-        return <Remark>{this.text}</Remark>
+        return <Remark remarkPlugins={[remarkPlainLinks]}>{this.text}</Remark>
     }
 }

packages/@ourworldindata/components/src/markdown/mdast-util-find-and-replace.d.ts

@@ -0,0 +1 @@
+declare module "mdast-util-find-and-replace"

packages/@ourworldindata/components/src/markdown/remarkPlainLinks.ts

@@ -0,0 +1,23 @@
+import findAndReplace from "mdast-util-find-and-replace"
+
+export const urlRegex = /https?:\/\/([\w-]+\.)+[\w-]+(\/[\w\- .\+/?:%&=~#]*)?/
+
+export function remarkPlainLinks() {
+    const turnIntoLink = (value: any, _match: string) => {
+        return [
+            {
+                type: "link",
+                url: value,
+                children: [
+                    {
+                        type: "text",
+                        value: value,
+                    },
+                ],
+            },
+        ]
+    }
+    return (tree: any) => {
+        findAndReplace(tree, [[urlRegex, turnIntoLink]])
+    }
+}

yarn.lock

@@ -11255,6 +11255,7 @@ __metadata:
     lodash: "npm:^4.17.20"
     mathjax-full: "npm:^3.1.0"
     md5: "npm:^2.3.0"
+    mdast-util-find-and-replace: "npm:1.1.1"
     mdast-util-from-markdown: "npm:^0.8.0"
     minimist: "npm:^1.2.6"
     mobx: "npm:^5.15.7"
@@ -14234,6 +14235,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-find-and-replace@npm:1.1.1":
+  version: 1.1.1
+  resolution: "mdast-util-find-and-replace@npm:1.1.1"
+  dependencies:
+    escape-string-regexp: "npm:^4.0.0"
+    unist-util-is: "npm:^4.0.0"
+    unist-util-visit-parents: "npm:^3.0.0"
+  checksum: e4c9e50d9bce5ae4c728a925bd60080b94d16aaa312c27e2b70b16ddc29a5d0a0844d6e18efaef08aeb22c68303ec528f20183d1b0420504a0c2c1710cebd76f
+  languageName: node
+  linkType: hard
+
 "mdast-util-from-markdown@npm:^0.8.0":
   version: 0.8.5
   resolution: "mdast-util-from-markdown@npm:0.8.5"