Add config option

Author: pomber

packages/mdx/dev/content/autolink.mdx

@@ -1,4 +1,3 @@
-{/* prettier-ignore */}
 ```py
 import requests
 
@@ -8,6 +7,8 @@ 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'
 
@@ -17,3 +18,5 @@ 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[]
@@ -52,24 +56,26 @@ export function extractAnnotationsFromCode(code: Code) {
   }
 
   // extract links
-  lineNumber = 1
-  while (lineNumber <= lines.length) {
-    const line = lines[lineNumber - 1]
-    const lineContent = line.tokens
-      .map(t => t.content)
-      .join("")
+  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,
+      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++
+      lineNumber++
+    }
   }
   return [annotations, focusList.join(",")] as const
 }

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 />