https://github.com/akovac35/BlazorMergely

An implementation of Blazor diff and merge component based on Mergely with server side support.
https://github.com/akovac35/BlazorMergely

blazor blazor-server diff merge

Last synced: 3 months ago
JSON representation

An implementation of Blazor diff and merge component based on Mergely with server side support.

• Host: GitHub
• URL: https://github.com/akovac35/BlazorMergely
• Owner: akovac35
• License: lgpl-2.1
• Created: 2021-07-07T19:36:51.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-07-08T18:11:45.000Z (over 3 years ago)
• Last Synced: 2024-04-28T05:44:35.527Z (6 months ago)
• Topics: blazor, blazor-server, diff, merge
• Language: HTML
• Homepage:
• Size: 1.92 MB
• Stars: 10
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazor - BlazorMergely -  An implementation of Blazor diff and merge component based on Mergely with server side support. (Libraries & Extensions / 2D/3D Rendering engines)

README

        
# BlazorMergely

An implementation of Blazor diff and merge component based on Mergely with server side support.

![this](Resources/.NET_Core_Logo_small.png)

* [com.github.akovac35.BlazorMergely](https://www.nuget.org/packages/com.github.akovac35.BlazorMergely/)

	[![NuGet Version](http://img.shields.io/nuget/v/com.github.akovac35.BlazorMergely.svg?style=flat)](https://www.nuget.org/packages/com.github.akovac35.BlazorMergely/)

Browser functionality:

![this](Resources/simple-showcase.gif)

Interaction with the server:

![this](Resources/save-to-server-console.gif)

## Status

PRODUCTION READY starting from version 1.0.0.

## Usage

Update _Host.cshtml file with static file references as follows:

```cshtml

@using com.github.akovac35.BlazorMergely

@* BlazorMergely CSS references *@

@* BlazorMergely JS references *@

```

The above may not meet some specific application criteria like jQuery version etc. In that case simply add the required static file references manually, as per the following examples:

* [BlazorMergelyCssReferences](src/com.github.akovac35.BlazorMergely/BlazorMergelyCssReferences.razor)

* [BlazorMergelyJsReferences](src/com.github.akovac35.BlazorMergely/BlazorMergelyJsReferences.cs)

Then use the component as follows:

```razor

@using com.github.akovac35.BlazorMergely



	


		Print contents to console on server side

	










	


		

	



@code{

	private BlazorMergelyComponent? BlazorMergelyComponentInstance { get; set; }

	private string MergelyOptions { get; set; } = "{\"cmsettings\":{\"mode\":\"text/javascript\",\"readOnly\":false,\"styleSelectedText\": true}}"; // This is optional

	

	private TestModel TestModelInstance { get; set; } = new() { LeftValue = "var x = 0;", RightValue = "var y = 0;" };

	protected override async Task OnAfterRenderAsync(bool firstRender)

	{

		await base.OnAfterRenderAsync(firstRender);

		

		// Component reference is set after the first render

		if(firstRender)

		{

			await BlazorMergelyComponentInstance!.SetValueAsync(TestModelInstance.LeftValue, TestModelInstance.RightValue);

		}

	}

	private async Task PrintContentsToConsoleOnServerSide(MouseEventArgs args)

	{

		var contents = await BlazorMergelyComponentInstance!.GetValuesAsync();

		Console.WriteLine(contents.Left);

		Console.WriteLine(contents.Right);

	}

}

```

All methods and properties are listed here: [BlazorMergelyComponent.razor.cs](src/com.github.akovac35.BlazorMergely/BlazorMergelyComponent.razor.cs)

## Samples

Review the following samples:

* [BlazorMergelySimpleTest](instance/BlazorMergelyWebApp/Pages/BlazorMergelySimpleTest.razor)

* [BlazorMergelyTest](instance/BlazorMergelyWebApp/Pages/BlazorMergelyTest.razor)

Clone this repository locally, navigate to `instance/BlazorMergelyWebApp` and issue the `dotnet run` command.

## Release history

* 1.0.0 - Production ready.

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## Credits

Based on Mergely javascript library: [www.mergely.com](https://mergely.com/)

## License

[LGPL-2.1](LICENSE)