React component for live-editing Immutable.JS data
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example
src
.babelrc
.eslintrc
.gitignore
Gruntfile.js
README.md
package.json

README.md

immutable-editor

immutable-editor is a React component used to live-edit JSON data, complete with change history (undo/redo) and file saving.

Underneath the hood, it uses Facebook's Immutable.js library for performance.

Changelog

0.2.0 - 2015-08-27:

- Remove toolbar and expose history API as static methods on `Editor` component

0.1.0 - 2015-08-27:

- Change API to allow generic JSON and callback instead of requiring client to use Immutable types/cursors

How to use

Installation:

npm install immutable-editor --save

Use:

const React = require('react');
const Editor = require('immutable-editor');

const MyApp = React.createClass({
	getInitialState() {
		return {
			data: {
				hello: {
					world: "!"
				}
			}
		}
	},
	render() {
		return (
			<div>
				<button onClick={() => this.setState({ data: Editor.undo() })}>undo</button>
				<button onClick={() => this.setState({ data: Editor.redo() })}>redo</button>
				<button onClick={() => Editor.save('test.json')}>save</button>
				<Editor
					data={this.state.data}
					onUpdate={(data) => this.setState({ data })}
					minEditDepth={0}
					minRemovalDepth={0}
				/>
			</div>
		);
	}
});

React.render(<MyApp />, document.getElementById('app'));

If you're using Immutable.js in your project, you can tell the editor to pass back immutable data by setting the immutable flag on the <Editor /> component, as well as passing true to undo and redo() (e.g. Editor.undo(true) to get the previous Immutable type instead of JS object).

Dependencies

The editor has two external dependencies: FontAwesome (for font icons) and the Source Code Pro font. They can be included like so:

<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">