Code

Code diff

Shows what changed from original to value: removed and added lines and the changed characters inside them, inline or side by side. It scrolls to the first change and can let people edit the new side. The diff is computed by the kit, with no library.

Part of @tectra-ng/code-editor — install it separately: npm install @tectra-ng/code-editor.

Features4

API

Theming

Basic

Inline view: removed lines in red above the added lines in green, changed characters marked inside. Whitespace at the start and end of a line is ignored by default (ignoreTrimWhitespace).

export function price(amount: number): string {

const rounded = Math.round(amount);

return '$' + rounded;

export function price(amount: number, currency = 'USD'): string {

return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount);

}

export function discount(amount: number) {

return amount * 0.9;

export function discount(amount: number, rate = 0.1): number {

return amount * (1 - rate);

}

export const FREE_SHIPPING_FROM = 50;

Side by side

view="split" puts the original on the left and the new text on the right; empty rows keep the lines aligned and both sides scroll together.

{

"name": "weekly-report",

"enabled": false,

"schedule": { "day": "monday", "hour": 9 },

"format": "pdf",

"recipients": ["team@example.com"]

}

{

"name": "weekly-report",

"enabled": true,

"schedule": { "day": "friday", "hour": 16 },

"recipients": [

"team@example.com",

"lead@example.com"

"timezone": "UTC"

}

Editable

Without readOnly the new side is an editor: [(value)] follows the edits and the diff updates as you type. changed reports the added and removed line counts.

−2

.card {

padding: 16px;

padding: 20px 24px;

border: 1px solid #e2e8f0;

border-radius: 8px;

border-radius: 12px;

box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);

}

20 lines

<div class="wrap">  <div class="bar">    <tx-tag severity="success" [value]="'+' + summary().added" />    <tx-tag severity="danger" [value]="'−' + summary().removed" />    <button      txButton      variant="outlined"      size="small"      label="Revert"      (click)="value.set(original)"    ></button>  </div>  <tx-code-diff    language="css"    [original]="original"    [(value)]="value"    height="240px"    (changed)="summary.set($event)"  /></div>

Navigation

nextChange() and previousChange() move to the next or previous change; F7 and Shift+F7 do the same from the keyboard.

<ul>

</ul>

21 lines

<div class="wrap">  <div class="actions">    <button      txButton      variant="outlined"      size="small"      icon="arrow-up"      label="Previous"      (click)="diff.previousChange()"    ></button>    <button      txButton      variant="outlined"      size="small"      icon="arrow-down"      label="Next"      (click)="diff.nextChange()"    ></button>  </div>  <tx-code-diff #diff [original]="before" [value]="after" readOnly height="240px" /></div>