dchest/jsbin.konan.html

## jsbin.konan.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<script src="//fb.me/react-0.10.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

## jsbin.konan.jsx
/** @jsx React.DOM */

var original = "this is <em>an</em> <strong>example</strong>";

var App = React.createClass({
  getInitialState: function(){
    return {html: original};
  },
  handleChange: function(event) {
    //console.log(event.target.value);
    this.setState({html: event.target.value}, function(x) {
      console.log(event.target.value);
    });
  },
  revert: function() {
    this.setState({html: original}, function() {
      console.log(this.state.html);
    });
  },
  someOther: function() {
    this.setState({html: 'Some <i>other</i>'});
  },
  render: function(){
    return <div>
      <ContentEditable html={this.state.html} onChange={this.handleChange} />
      <button onClick={this.revert}>Revert</button>
      <button onClick={this.someOther}>Some other</button>
    </div>;
  }
});

var ContentEditable = React.createClass({
    render: function(){
        return <div
            onInput={this.emitChange}
            onBlur={this.emitChange}
            contentEditable
            dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
    },
    shouldComponentUpdate: function(nextProps){
      if (nextProps.html !== this.getDOMNode().innerHTML) {
        console.log('should update')
        this.getDOMNode().innerHTML = nextProps.html;
        return true;
      }
      return false;
    },
    emitChange: function(){
        var html = this.getDOMNode().innerHTML;
        if (this.props.onChange && html !== this.lastHtml) {
            this.props.onChange({
                target: {
                    value: html
                }
            });
        }
        this.lastHtml = html;
    }
});

React.renderComponent(<App />, document.body);
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[add your bin description]" />
	<script src="//fb.me/react-0.10.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	</body>
	</html>
	/** @jsx React.DOM */

	var original = "this is <em>an</em> <strong>example</strong>";

	var App = React.createClass({
	getInitialState: function(){
	return {html: original};
	},
	handleChange: function(event) {
	//console.log(event.target.value);
	this.setState({html: event.target.value}, function(x) {
	console.log(event.target.value);
	});
	},
	revert: function() {
	this.setState({html: original}, function() {
	console.log(this.state.html);
	});
	},
	someOther: function() {
	this.setState({html: 'Some <i>other</i>'});
	},
	render: function(){
	return <div>
	<ContentEditable html={this.state.html} onChange={this.handleChange} />
	<button onClick={this.revert}>Revert</button>
	<button onClick={this.someOther}>Some other</button>
	</div>;
	}
	});

	var ContentEditable = React.createClass({
	render: function(){
	return <div
	onInput={this.emitChange}
	onBlur={this.emitChange}
	contentEditable
	dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
	},
	shouldComponentUpdate: function(nextProps){
	if (nextProps.html !== this.getDOMNode().innerHTML) {
	console.log('should update')
	this.getDOMNode().innerHTML = nextProps.html;
	return true;
	}
	return false;
	},
	emitChange: function(){
	var html = this.getDOMNode().innerHTML;
	if (this.props.onChange && html !== this.lastHtml) {
	this.props.onChange({
	target: {
	value: html
	}
	});
	}
	this.lastHtml = html;
	}
	});

	React.renderComponent(<App />, document.body);