|
| 1 | +# Blazor Text Diff |
| 2 | +A component to display side by side text diff using the [DiffPlex](https://github.com/mmanela/diffplex) library. The CSS can probably be cleaned up a lot. |
| 3 | + |
| 4 | + |
| 5 | +[](https://www.nuget.org/packages/BlazorTextDiff) |
| 6 | + |
| 7 | + |
| 8 | + |
| 9 | +Here is an image showing some example data from the sample folder. |
| 10 | + |
| 11 | + |
| 12 | +# Installation |
| 13 | +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](https://github.com/lzinga/BlazorTextDiff/tree/master/samples/BlazorTextDiff.Web) for implementation. |
| 14 | + |
| 15 | +```csharp |
| 16 | +// Program.cs |
| 17 | +public static async Task Main(string[] args) |
| 18 | +{ |
| 19 | + var builder = WebAssemblyHostBuilder.CreateDefault(args); |
| 20 | + |
| 21 | + // These must be injected into your application to supply the component with its diff checking. |
| 22 | + builder.Services.AddScoped<ISideBySideDiffBuilder, SideBySideDiffBuilder>(); |
| 23 | + builder.Services.AddScoped<IDiffer, Differ>(); |
| 24 | + |
| 25 | + builder.RootComponents.Add<App>("app"); |
| 26 | + |
| 27 | + await builder.Build().RunAsync(); |
| 28 | +} |
| 29 | +``` |
| 30 | + |
| 31 | +```html |
| 32 | +<!-- Index.html --> |
| 33 | +<link href="_content/BlazorTextDiff/css/BlazorDiff.css" rel="stylesheet" /> |
| 34 | +<script src="_content/BlazorTextDiff/js/BlazorTextDiff.js"></script> |
| 35 | +``` |
| 36 | + |
| 37 | + |
| 38 | +# Usage |
| 39 | +```html |
| 40 | +<TextDiff |
| 41 | + |
| 42 | + <!-- The left side of the comparison --> |
| 43 | + OldText="Old Text" |
| 44 | + |
| 45 | + <!-- The right side of the comparison --> |
| 46 | + NewText="New Text" |
| 47 | + |
| 48 | + <!-- Determines if the div containing the diffs should be collapsed if there is a lot of data. --> |
| 49 | + <!-- There is currently an issue where the toggling doesn't work accurately with the js interop. --> |
| 50 | + CollapseContent="true" |
| 51 | + |
| 52 | + <!-- Converts space values into \u00B7 and tab values into \u00B7\u00B7 --> |
| 53 | + ShowWhiteSpace="true" |
| 54 | + |
| 55 | +> |
| 56 | + <Header> |
| 57 | + <!-- Context Variables --> |
| 58 | + <!-- @context.Additions --> |
| 59 | + <!-- @context.Modifications --> |
| 60 | + <!-- @context.Deletions --> |
| 61 | + </Header> |
| 62 | +</TextDiff> |
| 63 | +``` |
0 commit comments