Support multiline links

Author: pomber

packages/mdx/dev/content/test.mdx

@@ -1,124 +1,10 @@
-Annotations allow you to change how the code is displayed and also to add interactivity.
-
-<CH.Spotlight lineNumbers={true}>
-
-````mdx mark=1[7:13],5[1:7]
-```py focus=2
-print(1)
-print(2)
-print(3)
-# focus
-print(4)
-print(5)
+```js
+foo
+// link(1:2) https://codehike.org
+const hi = 'hi'
+const hi = 'hi'
+const hi = 'hi'
+// link[2:18] https://codehike.org
+hello world
+hello
 ```
-````
-
-There are two ways to add annotations:
-
----
-
-```mdx mark=1[7:13],5[1:7] focus=1
-
-```
-
-- using the codeblock metastring
-
----
-
-```mdx mark=1[7:13],5[1:7] focus=5
-
-```
-
-- using comments inside the code
-
-</CH.Spotlight>
-
-_`focus`_ is only one of the possible annotations. The full list is:
-
-- _`focus`_: keep the targeted code bright while dimming the rest
-- _`mark`_: add a background color to the targeted tokens
-- _`link`_: add links inside the code
-
-First let's see the syntax to target different parts of the code.
-
-## Targeting lines and columns
-
-<CH.Spotlight maxZoom={1.5} lineNumbers={true} >
-
-<CH.Code lineNumbers={true}>
-
-```text
-123456789
-123456789
-123456789
-123456789
-123456789
-123456789
-123456789
-```
-
-</CH.Code>
-
----
-
-```text focus=2
-123456789
-123456789
-123456789
-123456789
-123456789
-123456789
-123456789
-```
-
-To select a specific line, use the line number:
-_`focus=2`_
-
----
-
-```text focus=3:5
-123456789
-123456789
-123456789
-123456789
-123456789
-123456789
-123456789
-```
-
-To select a range of lines use a colon:
-_`focus=3:5`_
-
----
-
-```text focus=5[3:6]
-123456789
-123456789
-123456789
-123456789
-123456789
-123456789
-123456789
-```
-
-Select a range of column from a line using brackets:
-_`focus=5[3:6]`_
-
----
-
-```text focus=1,3:5,7[1:4,7:9]
-123456789
-123456789
-123456789
-123456789
-123456789
-123456789
-123456789
-```
-
-Combine selectors using a comma separated list:
-_`focus=1,3:5,7[1:4,7:9]`_
-
-</CH.Spotlight>
-
-## Comment syntax

packages/mdx/src/index.scss

@@ -66,3 +66,15 @@
   position: absolute;
   left: 0;
 }
+
+.ch-code-inline-link {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  color: inherit;
+}
+
+.ch-code-link :not(span) > span {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  color: inherit;
+}

packages/mdx/src/mdx-client/annotations.tsx

@@ -196,6 +196,8 @@ function Label({
 
 function CodeLink({
   children,
+  isInline,
+  style,
   data,
 }: {
   data:
@@ -205,18 +207,19 @@ function CodeLink({
       }
     | string
   children: React.ReactNode
+  isInline: boolean
+  style?: React.CSSProperties
 }) {
   const url = (data as any)?.url || data
   const title = (data as any)?.title
   return (
     <a
       href={url}
       title={title}
-      style={{
-        textDecoration: "underline",
-        textDecorationStyle: "dotted",
-        color: "inherit",
-      }}
+      className={
+        isInline ? "ch-code-inline-link" : "ch-code-link"
+      }
+      style={style}
     >
       {children}
     </a>