Виджеты

DiffView

Дифф двух текстов: построчно и в две колонки, по словам.

Дифф двух текстов: построчно и в две колонки, с внутристрочной подсветкой по словам. Изменения собираются в куски с контекстом, а не показываются на фоне всего файла.

Установка

terminal

npx @toimetdev/pathlogs-ui add diff-view

Пример

greet.ts+2−3

@@ -1,5 +1,4 @@

1−export function greet(name) {

2− const msg = "Привет, " + name;

3− console.log(msg);

1+export function greet(name: string) {

2+ const msg = `Привет, ${name}!`;

43 return msg;

54 }

Переключите «Две колонки» — изменённые строки встанут напротив друг друга.

Пропсы

Проп	Тип	По умолчанию	Описание
`before / after`*	`string`	—	Исходный и изменённый текст.
`mode`	`"unified" \| "split"`	`"unified"`	Построчно или в две колонки.
`inline`	`boolean`	`true`	Подсвечивать изменения внутри строки по словам.
`collapse`	`boolean`	`true`	Сворачивать неизменённое, оставляя контекст (unified).
`context`	`number`	`3`	Сколько строк контекста вокруг изменений.
`filename`	`string`	—	Заголовок над диффом.

before / after*string

Исходный и изменённый текст.

mode"unified" | "split"

по умолчанию: "unified"

Построчно или в две колонки.

inlineboolean

по умолчанию: true

Подсвечивать изменения внутри строки по словам.

collapseboolean

по умолчанию: true

Сворачивать неизменённое, оставляя контекст (unified).

contextnumber

по умолчанию: 3

Сколько строк контекста вокруг изменений.

filenamestring

Заголовок над диффом.

Дифф по словам

Алгоритм отдельно

tsx

import {
  diffLines,   // построчный дифф (LCS с отсечением общих краёв)
  diffWords,   // внутристрочный дифф по словам
  buildHunks,  // сборка изменений в куски с контекстом
  pairRows,    // раскладка в две колонки
} from "@/components/ui/diff-view/diffModel";