BlazorTextDiff 0.0.1

Blazor Text Diff

A component to display side by side text diff using the DiffPlex library. The CSS can probably be cleaned up a lot.

Here is an image showing some example data from the sample folder.

Installation

You will need to add the nuget package DiffPlex into your project for this to work. An example project can be found in the Samples Folder for implementation.

// Program.cs
public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    
    // These must be injected into your application to supply the component with its diff checking.
    builder.Services.AddScoped<ISideBySideDiffBuilder, SideBySideDiffBuilder>();
    builder.Services.AddScoped<IDiffer, Differ>();

    builder.RootComponents.Add<App>("app");

    await builder.Build().RunAsync();
}

<link href="_content/BlazorTextDiff/css/BlazorDiff.css" rel="stylesheet" />
<script src="_content/BlazorTextDiff/js/BlazorTextDiff.js"></script>

Usage

<TextDiff

  
  OldText="Old Text"
  
  
  NewText="New Text"

  
  
  CollapseContent="true"
  
  
  ShowWhiteSpace="true"

>
    <Header>
      
      
      
      
    </Header>
</TextDiff>