Merge pull request #203 from code-hike/stable-annotations

Stable annotations

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>

packages/mdx/src/smooth-code/annotations.tsx

@@ -205,6 +205,12 @@ function annotateMultilineSide(
   while (lineIndex < lines.length) {
     const annotation = annotations[0]
     let line = lines[lineIndex]
+    if (
+      annotation &&
+      getLineNumber(line) > annotation.lineNumbers.start
+    ) {
+      throw "Code Hike can't handle two annotations for the same line"
+    }
     if (
       annotation &&
       getLineNumber(line) === annotation.lineNumbers.start
@@ -505,8 +511,11 @@ function shiftGroups(
 ): TokenGroup[] {
   const removedGroups = [] as TokenGroup[]
   let currentStartColumn = startColumn
-  while (currentStartColumn < newStartColumn) {
-    const currentTokenGroup = tokenGroups.shift()!
+  while (
+    currentStartColumn < newStartColumn &&
+    tokenGroups.length > 0
+  ) {
+    const currentTokenGroup = tokenGroups.shift()
     removedGroups.push(currentTokenGroup)
     const length = currentTokenGroup.tokens.reduce(
       (a, t) => a + t.content.length,

packages/mdx/src/smooth-code/partial-step-parser.ts

@@ -24,6 +24,7 @@ export type CodeAnnotation = {
     children: React.ReactNode
     data: any
     theme: EditorTheme
+    isInline: boolean
   }) => React.ReactElement
   data?: any
 }

playground/src/app.jsx

@@ -54,7 +54,7 @@ function App() {
           <CodeHikeLogo />
           <h1>
             Code Hike
-            <span>v0.6.0</span>
+            <span>v{__APP_VERSION__}</span>
           </h1>
         </a>
         <a href="https://codehike.org/docs">Docs</a>

playground/vite.config.js

@@ -4,4 +4,7 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  define: {
+    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
+  },
 });