diff --git a/.changeset/tall-moons-study.md b/.changeset/tall-moons-study.md new file mode 100644 index 0000000..e4dbee8 --- /dev/null +++ b/.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 = { + [Key in K]: T[Key]; +}; +``` + +`T[Key]` will now be correctly highlighted as an error. diff --git a/packages/shiki-twoslash/src/renderers/twoslash.ts b/packages/shiki-twoslash/src/renderers/twoslash.ts index 7cece7d..224d8c6 100644 --- a/packages/shiki-twoslash/src/renderers/twoslash.ts +++ b/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))