Merge pull request #358 from code-hike/autolink

Autolink option

Author: pomber

packages/mdx/dev/content/autolink.mdx

@@ -0,0 +1,22 @@
+```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]
+```
+
+<CH.Code lineNumbers={true} autoLink={false}>
+
+```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
+```
+
+</CH.Code>

packages/mdx/dev/files.ts

@@ -36,6 +36,7 @@ export async function getCode(file: any, config = {}) {
             autoImport: false,
             skipLanguages: ["", "mermaid"],
             showCopyButton: true,
+            autoLink: true,
             theme,
             ...config,
           },

packages/mdx/src/remark/annotations.ts

@@ -4,6 +4,7 @@ import { wrapChildren } from "./to-estree"
 import { annotationsMap } from "../mdx-client/annotations"
 import { JsxNode as JsxNode, SuperNode } from "./nodes"
 import { getCommentData } from "./comment-data"
+import { CodeHikeConfig } from "./config"
 
 export function getAnnotationsFromMetastring(
   options: Record<string, string>
@@ -18,7 +19,10 @@ export function getAnnotationsFromMetastring(
   return annotations
 }
 
-export function extractAnnotationsFromCode(code: Code) {
+export function extractAnnotationsFromCode(
+  code: Code,
+  config: CodeHikeConfig
+) {
   const { lines } = code
   let lineNumber = 1
   const annotations = [] as CodeAnnotation[]
@@ -50,9 +54,48 @@ export function extractAnnotationsFromCode(code: Code) {
       lineNumber++
     }
   }
+
+  // extract links
+  if (config.autoLink) {
+    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,

packages/mdx/src/remark/code.ts

@@ -130,7 +130,7 @@ async function mapFile(
   code = await getCodeFromExternalFileIfNeeded(code, config)
 
   const [commentAnnotations, commentFocus] =
-    extractAnnotationsFromCode(code)
+    extractAnnotationsFromCode(code, config)
 
   const options = parseMetastring(
     typeof node.meta === "string" ? node.meta : ""

packages/mdx/src/remark/config.ts

@@ -5,6 +5,7 @@ export type CodeHikeConfig = {
   skipLanguages: string[]
   showExpandButton?: boolean
   showCopyButton?: boolean
+  autoLink?: boolean
   staticMediaQuery?: string
   // path to the current file, internal use only
   filepath?: string

playground/src/app.jsx

@@ -29,6 +29,7 @@ function App() {
       config: {
         lineNumbers: false,
         showCopyButton: false,
+        autoLink: false,
         theme: "material-darker",
       },
     };

playground/src/editor.jsx

@@ -104,6 +104,14 @@ function ConfigEditor({ config, onChange }) {
         />
         Copy Button
       </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={config.autoLink}
+          onChange={(e) => onChange({ ...config, autoLink: e.target.checked })}
+        />
+        Auto Link
+      </label>
       <label>
         Theme:
         <br />