JarCasting
JarCasting JarCasting

angular-rich-text-diff

WebJar for angular-rich-text-diff

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-rich-text-diff
Last Version

Last Version

0.2.2
Release Date

Release Date
Type

Type

jar
Description

Description

angular-rich-text-diff
WebJar for angular-rich-text-diff
Project URL

Project URL

http://webjars.org
Source Code Management

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
Browse

How to add to project

<!-- 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>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-rich-text-diff/
implementation 'org.webjars.bower:angular-rich-text-diff:0.2.2'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-rich-text-diff/
implementation ("org.webjars.bower:angular-rich-text-diff:0.2.2")
'org.webjars.bower:angular-rich-text-diff:jar:0.2.2'
<dependency org="org.webjars.bower" name="angular-rich-text-diff" rev="0.2.2">
  <artifact name="angular-rich-text-diff" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-rich-text-diff', version='0.2.2')
)
libraryDependencies += "org.webjars.bower" % "angular-rich-text-diff" % "0.2.2"
[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