react-rich-diff

React component to display a rich diff between two Markup-it documents.

Installation

$ npm install react-rich-diff --save

Usage

const React = require('react');
const RichDiff = require('react-rich-diff');
const MarkupIt = require('markup-it');
const markdown = require('markup-it/lib/markdown');

const state = MarkupIt.State.create(markdown);

const MyApp = React.createClass({
    render() {
        const original = state.deserializeToDocument('Hello **World**');
        const modified = state.deserializeToDocument('Hello **World 2**');

        const state = RichDiff.State.create(original, modified);

        return (
            <RichDiff
                state={state}
                />
        )
    }
})

CSS

react-rich-diff creates HTML elements with classes diff-<kind>-<type.

kind can be one of block, inline or character. type can be one of added, removed or modified.