TextCompareForBlazor 1.0.0

TextCompareForBlazor

TextCompareForBlazor is a lightweight, client-side Blazor (WebAssembly or Server) component for visually comparing two text blobs side-by-side with selectable diff granularity (Character / Word / Line), optional whitespace normalization, synchronized scrolling, line alignment (with gap placeholders), and customizable theming.

Features

• Side-by-side synchronized scroll viewing (toggleable)
• Granularity selector: Character, Word, or Line
• Word diff uses token mapping to preserve original spacing
• Intelligent line alignment (modified / inserted / deleted handling)
• Optional whitespace collapsing (IgnoreWhitespace)
• Optional NBSP width preservation for deleted/inserted tokens (UseTokenPadding)
• Line numbers (toggleable)
• Footer metrics: lines, words, characters, differences
• Fully styleable via parameters + CSS variable hooks
• Accessible structure: ARIA labels, focusable line items

Getting Started

Add a project/package reference to TextCompareForBlazor (project reference or NuGet, if published). Then:

Set originalText / modifiedText in your page/component C# code.

Minimal Example (.razor)

<CompareText Text="@textA" Text2="@textB" Width="800px" Height="600px" />
@code {
    string textA = "...";
    string textB = "...";
}

Component Parameters

Styling Parameters

Override by passing parameter values or extend with a wrapping CSS class via UserStyle.

Granularity Behavior

• Character: Fine-grained semantic diff (uses DiffMatchPatch) on each line.
• Word: Tokenizes into whitespace + word runs; preserves spacing; optional NBSP padding.
• Line: Each aligned line treated as a single segment (modified vs equal).

Alignment Logic

Lines are normalized (optionally whitespace collapsed), then encoded into tokens for diffing. Deletes followed immediately by inserts are paired as modified lines; pure inserts/deletes create blank counterpart placeholders for visual alignment.

Accessibility

• Panels have aria-label regions.
• Lines are focusable (tabindex="0"), enabling keyboard navigation.
• Placeholder lines include a title for context.

JavaScript Interop

Scroll synchronization uses a tiny JS module (tsCompareSync) injected inline. No external script file needed. If you bundle scripts separately, you may extract that <script> block.

Performance Notes

• DiffMatchPatch is efficient for typical text sizes; extremely large files (> several MB) may benefit from pre-truncation.
• Word granularity token mapping uses in-memory dictionaries; memory footprint proportional to distinct tokens.
• Re-render triggers recomputation when IgnoreWhitespace or Granularity changes�cache externally if needed.

Extensibility Ideas

• Add export of diff summary (counts)
• Provide virtualized rendering for very large files (wrap lines list)
• Add unified diff view mode (single panel) or inline change markers

Example With Custom Theme

<SideBySide Text="@textA" Text2="@textB" 
    LeftCaption="Before" RightCaption="After"
    IgnoreWhitespace="true" Granularity="Word"
    UserStyle="--caption-bg:#f0f0f0; --footer-bg:#f8f8f8;"
    Width="800px" Height="600px" />
@code {
    string textA = "...";
    string textB = "...";
}

Footer Metrics

• Lines = aligned line pair count
• Words / characters refer to right side counts (you can extend to show both)
• Differences = number of non-equal segments under current granularity

Namespace

Use @using TextCompareForBlazor.Components (or add in _Imports.razor).

License / Attribution

Uses DiffMatchPatch via NuGet (DiffMatchPatch 3.0.0). Ensure compliance with its license (Apache 2.0).

Questions or improvements? Extend SideBySideTextCompareBase in your own partial class for additional behaviors.