angular-diff-match-patch

WebJar for angular-diff-match-patch

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-diff-match-patch
Last Version

Last Version

0.7.4
Release Date

Release Date

Type

Type

jar
Description

Description

angular-diff-match-patch
WebJar for angular-diff-match-patch
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/amweiss/angular-diff-match-patch

Download angular-diff-match-patch

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-diff-match-patch/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-diff-match-patch</artifactId>
    <version>0.7.4</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-diff-match-patch/
implementation 'org.webjars.bower:angular-diff-match-patch:0.7.4'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-diff-match-patch/
implementation ("org.webjars.bower:angular-diff-match-patch:0.7.4")
'org.webjars.bower:angular-diff-match-patch:jar:0.7.4'
<dependency org="org.webjars.bower" name="angular-diff-match-patch" rev="0.7.4">
  <artifact name="angular-diff-match-patch" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-diff-match-patch', version='0.7.4')
)
libraryDependencies += "org.webjars.bower" % "angular-diff-match-patch" % "0.7.4"
[org.webjars.bower/angular-diff-match-patch "0.7.4"]

Dependencies

compile (2)

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

Project Modules

There are no modules declared in this project.

angular-diff-match-patch

npm CircleCI Codecov

David David

This library is simply a wrapper around google-diff-match-patch.

Simple

(Shown here with some custom styles)

Angular 2 Port

Should you wish to use this in an Angular 2+ project, take a look at this port: elliotforbes/ng-diff-match-patch

Setup

Install from NPM

npm install amweiss/angular-diff-match-patch

Install from Bower

bower install angular-diff-match-patch

Usage with webpack

  config.plugins = [
    new webpack.ProvidePlugin({
      diff_match_patch: 'diff-match-patch'
    }),
  ];

Usage

See the included demo for reference or view a sample on Codepen.

<pre line-diff left-obj="left" right-obj="right"></pre>

Where left and right are defined on your scope. The options attribute can be used as well, but it's optional.

$scope.options = {
  editCost: 4,
  attrs: {
    insert: {
      'data-attr': 'insert',
      'class': 'insertion'
    },
    delete: {
      'data-attr': 'delete'
    },
    equal: {
      'data-attr': 'equal'
    }
  }
};

editCost is specific to processingDiff and controls the tolerence for hunk separation. attrs can contain any/all/none of the following: insert, delete, and equal where the properties in those objects represent attributes that get added to the tags.

Another option is to skip angular processing the diff, it's useful when you want to show a diff of a code pre-compiled by angular. The attribute you need to add is called: skipAngularCompilingOnDiff. If set to true, would skip compiling, otherwise it would compile the diff.

Add some style

.match{
  color: gray;
}

.ins{
  color: black;
  background: #bbffbb;
}

.del{
  color: black;
  background: #ffbbbb;
}

Development

Development work requires npm from Node.js

Begin with:

npm install

Then you can use:

npm start To host the directory so you can see the demo

npm test To run the Jasmine tests once

npm test-watch To run the Jasmine tests with change detection

Versions

Version
0.7.4
0.6.10
0.4.0
0.2.4
0.1.14
0.1.11