Blazor Text Diff

A component to display side by side text diff using the DiffPlex library. There is probably some issues that I have looked over so if you notice one please submit an issue or do a pull request!

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();
}

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

Usage

<TextDiff

  <!-- The left side of the comparison -->
  OldText="Old Text"
  
  <!-- The right side of the comparison -->
  NewText="New Text"

  <!-- Determines if the div containing the diffs should be collapsed if there is a lot of data. -->
  <!-- There is currently an issue where the toggling doesn't work accurately with the js interop. -->
  CollapseContent="true"
  
  <!-- Converts space values into \u00B7 and tab values into \u00B7\u00B7 -->
  ShowWhiteSpace="true"

>
    <Header>
      <!-- Context Variables -->
      <!-- @context.Additions -->
      <!-- @context.Modifications -->
      <!-- @context.Deletions -->
    </Header>
</TextDiff>