ContentEditable.jsx

/** @jsx React.DOM */

var App = React.createClass({displayName: 'App',
  getInitialState: function(){
    return {html: "this is <em>an</em> <strong>example</strong>"};
  },
  render: function(){
    var handleChange = function(event){
    this.setState({html: event.target.value});
}.bind(this);

return (ContentEditable( {html:this.state.html, onChange:handleChange} ));
  }
});

var ContentEditable = React.createClass({displayName: 'ContentEditable',
    render: function(){
        return React.DOM.div( 
            {onInput:this.emitChange, 
            onBlur:this.emitChange,
            contentEditable:true,
            dangerouslySetInnerHTML:{__html: this.props.html}});
    },
    shouldComponentUpdate: function(nextProps){
        return nextProps.html !== this.getDOMNode().innerHTML;
    },
    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(null ), document.body);