Merge pull request #94 from code-hike/fix-annotation-focus-string

Fix multi-annotation focus string

Author: pomber

packages/highlighter/package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@code-hike/utils": "^0.3.0-next.0",
-    "shiki": "^0.9.11"
+    "shiki": "^0.9.14"
   },
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",

packages/playground/content/meta-annotations.mdx

@@ -6,7 +6,7 @@ Besides `focus`, there are a few more annotations that can be used to highlight
 
 ### `box` annotation
 
-```js box=2[15:43]
+```js box=2[15:43],4[10:12]
 function lorem(ipsum, dolor = 1) {
   const sit = ipsum == null ? 0 : ipsum.sit
   dolor = sit - amet(dolor)
@@ -18,7 +18,7 @@ function lorem(ipsum, dolor = 1) {
 
 ### `bg` annotation
 
-```js bg=4:6
+```js bg=2,4:6
 function lorem(ipsum, dolor = 1) {
   const sit = ipsum == null ? 0 : ipsum.sit
   dolor = sit - amet(dolor)

packages/smooth-code/src/annotations.tsx

@@ -7,14 +7,15 @@ import {
   FocusedLine,
   AnnotatedLine,
   LineGroup,
-} from "./step-parser"
+} from "./partial-step-parser"
 import {
   Tween,
   FullTween,
   mapWithDefault,
   map,
   hasColumns,
   parsePartToObject,
+  splitParts,
   ColumnExtremes,
   parseExtremes,
 } from "@code-hike/utils"
@@ -32,13 +33,27 @@ export function parseAnnotations(
   >
   multilineAnnotations: FullTween<MultiLineAnnotation[]>
 } {
-  const inlineCodeAnnotations = mapWithDefault(
+  // split annotations with multiple parts in the focus string
+  // "1:2,3[4:5]" becomes  two annotations "1:2" and "3[4:5]"
+  const expandedAnnotations = mapWithDefault(
     annotations,
     [],
+    annotations =>
+      annotations!.flatMap(annotation =>
+        splitParts(annotation.focus).map(part => ({
+          ...annotation,
+          focus: part,
+        }))
+      )
+  )
+
+  const inlineCodeAnnotations = mapWithDefault(
+    expandedAnnotations,
+    [],
     annotations => annotations!.filter(isInline)
   )
   const multilineCodeAnnotations = mapWithDefault(
-    annotations,
+    expandedAnnotations,
     [],
     annotations => annotations!.filter(a => !isInline(a))
   )

packages/smooth-code/src/differ.ts

@@ -4,7 +4,7 @@ import {
   HighlightedLine,
   MergedCode,
   MergedLine,
-} from "./step-parser"
+} from "./partial-step-parser"
 
 export function mergeLines(
   code: FullTween<string>,