Feature: Public API for sub-line span decorations

Aperta
  • Qualcosa non va?
#884 4 commenti 2 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
38/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
typescript
Ambito
frontend

Direzione di ricerca

Start by reading the existing intra-line diff highlighting built with Shiki DecorationItems and the exported createDiffSpanDecoration, then compare the consumer APIs on File, FileDiff, CodeView, and BaseCodeOptions. The issue leaves the API shape and naming open, so settle those questions before implementation. Done means consumers can supply character ranges and have them rendered as spans with the requested class.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement
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 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
  • Naming (spanDecorations vs. something else, given #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/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:

Image Image
Lingua principale
TypeScript
Stelle
6.2k
Fork
226
Merge medio
2g 56m
PR unite (30g)
44

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di pierrecomputer/pierre

Tutte le issue di pierrecomputer/pierre

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.