Handle errors spanning multiple tokens

.changeset/tall-moons-study.md

@@ -0,0 +1,15 @@
+---
+"shiki-twoslash": minor
+---
+
+Added support for highlighting errors that span multiple tokens.
+
+Previously, error highlighting checked each token in a line to see if an error should be applied. This failed to apply an error highlight when the error spanned multiple tokens, like `T`+`[`+`Key`+`]` in the following example:
+
+```ts
+type MyPick<T, K> = {
+  [Key in K]: T[Key];
+};
+```
+
+`T[Key]` will now be correctly highlighted as an error.

packages/shiki-twoslash/src/renderers/twoslash.ts

@@ -104,7 +104,21 @@ export function twoslashRenderer(lines: Lines, options: HtmlRendererOptions & Tw
           return result
         }
 
-        const errorsInToken = errors.filter(findTokenFunc(tokenPos))
+        const isTokenWithinErrorRange = (start: number) => (e: any) => 
+          start >= e.character && start + token.content.length <= e.character + e.length
+
+        const isTokenWithinErrorRangeDebug = (start: number) => (e: any) => {
+          const result = start >= e.character && start + token.content.length <= e.character + e.length
+          // prettier-ignore
+          console.log(result, token.content ,start, '>=', e.character, '&&', start + token.content.length, '<=', e.character + e.length)
+          if (result) {
+            console.log("Found:", e)
+            console.log("Inside:", token)
+          }
+          return result
+        }
+
+        const errorsInToken = errors.filter(isTokenWithinErrorRange(tokenPos))
         const lspResponsesInToken = lspValues.filter(findTokenFunc(tokenPos))
         const queriesInToken = queries.filter(findTokenFunc(tokenPos))