ContentEditable React Component

gistfile1.js

var React = require('react');
var Medium = require("medium.js");



function setupEditable(self) {

    var editable = self.props.editable;
    var extraOptions = self.props.extraOptions;

    if (editable) {
        var DOM = self.getDOMNode();

        self.medium = new Medium(
            Object.assign({}, 
                extraOptions, {element: DOM}
            )
        );

    } else if (self.medium) {
        self.medium.destroy();
    }
}

var ContentEditable = React.createClass({

    // TODO - add isRequired to required props
    propTypes: {
        html: React.PropTypes.string,
        extraOptions: React.PropTypes.object,
        tagName: React.PropTypes.string,
        className: React.PropTypes.string,
        placeholder: React.PropTypes.string,
        onChange: React.PropTypes.func,
        editable: React.PropTypes.bool
    },

    render: function() {

        var html = this.props.html;
        var tagName = this.props.tagName;
        var placeholder = this.props.placeholder;
        var className = this.props.className;

        return (
            React.DOM[tagName]({
                className: className, 
                onInput: this._change, 
                onBlur: this._change, 
                "data-placeholder": placeholder, 
                dangerouslySetInnerHTML: { __html: html}
            })
        );


    },

    componentDidMount: function() {
        setupEditable(this);
    },

    componentDidUpdate: function() {
        setupEditable(this);
    },

    shouldComponentUpdate: function(nextProps){
        var DifferentHTML = nextProps.html !== this.getDOMNode().innerHTML;
        var DifferentEditableState = nextProps.editable !== this.props.editable;
        return (DifferentHTML || DifferentEditableState);
    },

    _change: function(e) {
        var contentHTML = this.getDOMNode().innerHTML;        
        this.props.onChange(contentHTML);
    }

});

module.exports = ContentEditable;