Split annotation focus string

Author: pomber

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

@@ -15,6 +15,7 @@ import {
   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/storybook/src/code-spring.story.js

@@ -36,8 +36,7 @@ const x = (y) => y++
 `.trim()
 
   const prevAnnotations = [
-    { focus: "1[10:11]" },
-    { focus: "2[1:5]" },
+    { focus: "1[10:11],2[1:5]" },
     { focus: "3[8]" },
   ]
 

packages/utils/src/focus.ts

@@ -34,7 +34,7 @@ export function mapFocusToLineNumbers(
   }
 }
 
-function splitParts(focus: string) {
+export function splitParts(focus: string) {
   return focus.split(/,(?![^\[]*\])/g)
 }