0.1.0 • Published 3 years ago
text-diff-jsx v0.1.0
text-diff-jsx
- A simple text diff
component
to be used with React and based ongoogle diff match patch
library.
Dependencies
diff-match-patch
: ^1.0.5
Installation
npm i text-diff-jsx
API
Component: TextDiff
Inputs
Name | Type | Required | Description |
---|---|---|---|
originalText | string | Yes | First text to be compared |
modifiedText | string | Yes | Second text to be compared |
format | DiffTableFormat | Optional, default: SideBySide | Possible values: -SideBySide -LineByLine |
hideMatchingLines | boolean | Optional, default: false | Possible values: -true : Only shows lines with differences.- false : shows all lines |
Custom Objects
export type DiffTableFormat = 'SideBySide' | 'LineByLine';
export type SideDiff = 'both' | 'left' | 'right';
export interface DiffTableFormatOption {
id: string;
name: string;
label: string;
value: DiffTableFormat;
icon?: string;
disabled?: boolean;
}
export interface DiffPart {
content: string;
isDiff: boolean;
}
export interface DiffLineResult {
lineNumber: number;
prefix: string;
lineContent: string;
lineDiffs: DiffPart[];
}
export interface DiffTableRowResult {
id?: number;
left?: DiffLineResult;
right?: DiffLineResult;
belongTo: SideDiff;
hasDiffs: boolean;
numDiffs: number;
}
export interface ProcessLinesOptions {
id: number;
leftLines: string[];
rightLines: string[];
leftNumber: number;
rightNumber: number;
hasDiffs?: boolean;
}
Credits
This project is based on Google Diff Match Patch.
0.1.0
3 years ago