Create link annotations

Author: pomber

packages/mdx/dev/content/autolink.mdx

@@ -0,0 +1,19 @@
+{/* prettier-ignore */}
+```py
+import requests
+
+# URL: https://api.example.com/data
+# Invalid URL: http://invalid_domain.123
+urls = ["https://typicode.com/todos/1", "https://typicode.com/todos/2"]
+responses = [requests.get(url) for url in urls]
+```
+
+```ruby mark=3:5
+require 'net/http'
+
+url = URI.parse('https://www.ruby-lang.org/en/')
+url = URI.parse 'https://www.ruby-lang.org/en/'
+url = URI.parse 'https://www.ruby-lang.org/en/'asdasd;
+response = Net::HTTP.get_response(url)
+puts response.body
+```

packages/mdx/src/remark/annotations.ts

@@ -50,9 +50,46 @@ export function extractAnnotationsFromCode(code: Code) {
       lineNumber++
     }
   }
+
+  // extract links
+  lineNumber = 1
+  while (lineNumber <= lines.length) {
+    const line = lines[lineNumber - 1]
+    const lineContent = line.tokens
+      .map(t => t.content)
+      .join("")
+
+    const urls = extractURLsFromLine(lineContent)
+    urls.forEach(({ url, start, end }) => {
+      const Component = annotationsMap["link"]
+      const focus = `${lineNumber}[${start + 1}:${end}]`
+      annotations.push({
+        Component,
+        focus,
+        data: url,
+      })
+    })
+    lineNumber++
+  }
   return [annotations, focusList.join(",")] as const
 }
 
+const urlRegex = /https?:\/\/[\w\-_.~:/?#[\]@!$&*+,;=%]+/g
+function extractURLsFromLine(line: string) {
+  const urls = []
+  let match: RegExpExecArray | null
+
+  while ((match = urlRegex.exec(line)) !== null) {
+    const url = match[0]
+    const start = match.index
+    const end = start + url.length
+
+    urls.push({ url, start, end })
+  }
+
+  return urls
+}
+
 export function extractJSXAnnotations(
   node: SuperNode,
   index: number,