https://github.com/gitbookio/react-rich-diff

React component to render rich diff between two documents (Markdown, HTML)
https://github.com/gitbookio/react-rich-diff

diff markdown react rich-text-editor

Last synced: 2 days ago
JSON representation

React component to render rich diff between two documents (Markdown, HTML)

• Host: GitHub
• URL: https://github.com/gitbookio/react-rich-diff
• Owner: GitbookIO
• License: apache-2.0
• Created: 2017-01-16T21:35:39.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-30T15:53:34.000Z (about 7 years ago)
• Last Synced: 2024-10-29T15:34:09.797Z (15 days ago)
• Topics: diff, markdown, react, rich-text-editor
• Language: JavaScript
• Homepage: https://gitbookio.github.io/react-rich-diff/
• Size: 619 KB
• Stars: 52
• Watchers: 2
• Forks: 13
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-rich-diff

[![Build Status](https://travis-ci.org/GitbookIO/react-rich-diff.svg?branch=master)](https://travis-ci.org/GitbookIO/react-rich-diff) [![NPM version](https://badge.fury.io/js/react-rich-diff.svg)](http://badge.fury.io/js/react-rich-diff)

React component to display a rich diff between two [Markup-it](https://github.com/GitbookIO/markup-it) documents.

### Installation

```

$ npm install react-rich-diff --save

```

### Usage

```js

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 (

            

        )

    }

})

```

### CSS

`react-rich-diff` creates HTML elements with classes `diff--