facebook / facebook/astryx

CodeBlock: no per-line add/remove (diff) backgrounds — highlightLines is single-accent only

Open
#3,345 1 comment 0 reactions 1 assignee Claimed by @thedjpetersen View on GitHub
component enhancement
Dominant language
TypeScript
Stars
13k
Forks
1.1k
Avg merge
1d 15h
Merged PRs (30d)
690

Description

## Problem

Builders showing config/code changes need green/red line washes, and CodeBlock can't provide them. `highlightLines` paints every listed line with the single neutral accent (`--color-accent-muted`) — there is no way to mark a line as *added* or *removed*.

Evidence:

- An internal-tool builder (Meridian) hand-tinted lines with manual green/red styling because `highlightLines` only offers the neutral accent — bypassing the design system entirely for a presentation concern CodeBlock already half-owns.
- The ChatToolCalls diff-display template is an in-repo consumer that would use this immediately for tool-call before/after code display.

## API arbitration (compact round, 2026-07-01, naive sonnet generations + haiku probe)

| Candidate | Result |
| --- | --- |
| (a) `highlightLines` extended to `Array` | 0 invented props, 0 escapes, exact usage |
| (b) separate `diffLines: {added: number[], removed: number[]}` | 0 invented props, 0 escapes |
| (c) `language="diff"` auto-parse | Agent embedded `+`/`-` prefixes and `@@` hunk headers INTO the code string — conflates content with presentation; the copy button would copy the markers |

Probe against the **current** API: the agent invented `addedLines` / `removedLines` props, confirming the demand pull for per-line diff semantics.

**Verdict:** extend `highlightLines` — backward compatible, one prop owns line accents. `diffLines` is the runner-up (also clean, but splits line-accent ownership across two props).

## Proposed API

```tsx
interface CodeBlockProps {
/**
* 1-indexed lines to accent. Plain numbers (and type: 'highlight')
* keep today's neutral accent; 'add' / 'remove' render green/red
* diff washes.
*/
highlightLines?: Array<
number | {line: number; type?: 'add' | 'remove' | 'highlight'}
>;
}
```

```tsx

```

Plain numbers keep today's neutral accent — fully backward compatible, no behavior change for existing callers.

## Theming note

The add/remove washes must be theme-aware tokens (they need to work in light/dark and under SyntaxTheme backgrounds), not raw green/red. The theme already carries the wash pair used by Banner/FieldStatus: `--color-success-muted` and `--color-error-muted` (both `light-dark()` translucent pairs, same family as the `--color-accent-muted` the current highlight uses). Translucency matters so the wash composes over `--color-syntax-background` in either scheme.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.