angular-rich-text-diff

WebJar for angular-rich-text-diff

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.bower
ArtifactId	angular-rich-text-diff
Last Version	0.2.2
Release Date	Aug 19, 2016
Type	jar
Description	angular-rich-text-diff WebJar for angular-rich-text-diff
Project URL	http://webjars.org
Source Code Management	https://github.com/bill-long/angular-rich-text-diff

Download angular-rich-text-diff

Filename	Size
angular-rich-text-diff-0.2.2.pom
angular-rich-text-diff-0.2.2.jar	8 KB
angular-rich-text-diff-0.2.2-sources.jar	22 bytes
angular-rich-text-diff-0.2.2-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-rich-text-diff/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-rich-text-diff</artifactId>
    <version>0.2.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/angular-rich-text-diff/
implementation 'org.webjars.bower:angular-rich-text-diff:0.2.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/angular-rich-text-diff/
implementation ("org.webjars.bower:angular-rich-text-diff:0.2.2")

Apache Buildr

'org.webjars.bower:angular-rich-text-diff:jar:0.2.2'

Apache Ivy

<dependency org="org.webjars.bower" name="angular-rich-text-diff" rev="0.2.2">
  <artifact name="angular-rich-text-diff" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='angular-rich-text-diff', version='0.2.2')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "angular-rich-text-diff" % "0.2.2"

Leiningen

[org.webjars.bower/angular-rich-text-diff "0.2.2"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.bower : google-diff-match-patch	jar	[0.1.0,0.2)

Project Modules

There are no modules declared in this project.

angular-rich-text-diff

Plunker: http://plnkr.co/edit/wmf4t70Di19Vtk89TWgK?p=preview

This is a directive that uses google-diff-match-patch to show the semantic diff between two HTML strings, while preserving the HTML formatting. The point is to show the diff of two sets of "rich text" that has typically been entered by a user into a rich text input such as textAngular.

The idea for this approach came from a stackoverflow answer. I couldn't find an actual implementation anywhere, so I created one.

Dependencies

ngSanitize

You will need to include angular-sanitize.js in your project, as this directive depends on ngSanitize in order to display the resulting HTML.

google-diff-match-patch

This dependency is declared in the bower.json, but you will still need to be sure to include the google-diff-match-patch.js file in your project.

Usage

Install from bower:

bower install angular-rich-text-diff

Include angular-rich-text-diff.js and google-diff-match-patch.js in your index.html. Add the module to your app's dependencies:

angular.module('app', ['angular-rich-text-diff']);

Put the following HTML somewhere, where left and right are strings containing the before and after HTML you want to diff:

<rich-text-diff left="beforeString" right="afterString"></rich-text-diff>

The CSS in angular-rich-text-diff.css will highlight additions in green and deletions in red.

Versions

Version
0.2.2 Aug 19, 2016