You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I (on behalf of design systems @ Anthropic) would like to propose a consumer-facing way to style arbitrary character ranges within a rendered line. Something like a spanDecorations input on File / FileDiff / CodeView that addresses {lineNumber, spanStart, spanLength, className} and wraps the range in a span carrying the class.
The machinery seems to already exists internally... intra-line word/char diff highlighting is implemented with Shiki DecorationItems, and createDiffSpanDecoration is already exported. This would be exposing that stuff for consumer-supplied ranges. I'm aware of #459; this is the character-granularity counterpart, and I'd want to pick a name that doesn't collide with it.
Open API questions I'd defer to y'all on:
Render prop (like lineAnnotations) vs. option on BaseCodeOptions
Whether interaction callbacks (onDecoration*, mirroring onToken*) are in scope or a separate ask
I'd previously opened #810 with an implementation before discussing it here (sorry for jumping the gun!) That PR is available as a reference if useful, but I'm treating the API shape as fully open.
Motivation and context
We use @pierre/diffs in an internal code review tool. We'd like to add overlays anchored to sub-line ranges for things like...
Highlighting high-risk spans (e.g. flagging string-concatenated SQL on an added line)
Muting low-relevance code so the behavioral change stands out
IDE-style diagnostics squiggles at exact character positions
Anchoring AI-assist affordances (click a flagged span → explainer card)
I had Claude create some examples of this in action:
Prerequisites
Proposal
Hi! Big fan.
I (on behalf of design systems @ Anthropic) would like to propose a consumer-facing way to style arbitrary character ranges within a rendered line. Something like a
spanDecorationsinput on File / FileDiff / CodeView that addresses{lineNumber, spanStart, spanLength, className}and wraps the range in a span carrying the class.The machinery seems to already exists internally... intra-line word/char diff highlighting is implemented with Shiki
DecorationItems, andcreateDiffSpanDecorationis already exported. This would be exposing that stuff for consumer-supplied ranges. I'm aware of #459; this is the character-granularity counterpart, and I'd want to pick a name that doesn't collide with it.Open API questions I'd defer to y'all on:
lineAnnotations) vs. option onBaseCodeOptionsonDecoration*, mirroringonToken*) are in scope or a separate askspanDecorationsvs. something else, given Decorations v3 #459)I'd previously opened #810 with an implementation before discussing it here (sorry for jumping the gun!) That PR is available as a reference if useful, but I'm treating the API shape as fully open.
Motivation and context
We use
@pierre/diffsin an internal code review tool. We'd like to add overlays anchored to sub-line ranges for things like...I had Claude create some examples of this in action: