TextCompareForBlazor 1.0.3

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.

What's New in 1.0.3

• Unified font family and size applied to both gutter (line numbers) and text content via CSS variables.
• Toolbar dropdowns for Font and Size.
• Toolbar order: Search first, then Granularity/Whitespace, then Font; Sync toggle right-aligned.
• Typical, widely available monospace font stacks offered by default.

Usage: Unified Font Settings

Control the font family and size for the entire compare surface (both gutters and text areas). These parameters can be set directly or via toolbar dropdowns when ShowToolbar is true.

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)

<TextCompareForBlazor.Components.SideBySide UserStyle="width:calc(100vw - 320px); height:calc(100vh - 180px);" LeftText="@OriginalText" RightText="@ModifiedText" />
@code {
    string OriginalText = "...";
    string ModifiedText = "...";
}

Component Parameters

Tip: Font settings are propagated via CSS variables --tcb-font-family and --tcb-font-size to kee

Styling Parameters

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

Unified Font CSS Variables

Font settings propagate to both gutter and text content via these variables:

• --tcb-font-family
• --tcb-font-size

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.