Add more useful options and documentation

Nice to have this project published as ContentEditables are hard to deal with.

You should probably document that the implementation is “uncontrolled” and that the div content changes before the state is updated.

Also there are some useful options. Here is the full implementation I use in my project, to give you some insights of features I need:

• Possibility to post-process the div DOM on change before emitting the change (permits to “format” the DOM, like removing inline styles, html comments, classes or things like that.
• Possibility to “lock” the contenteditable without unmounting/remounting, to avoid flickering effects
• Possibility to use a placeholder easily
• Possibility to disable the listening of changes, to allow integration of side effect libraries like AnnotationJS to update the DIV content without triggering the callback/parser

var UncontrolledContentEditable = React.createClass({

    propTypes: {
        // The HTML to set in this content editable
        html: React.PropTypes.string.isRequired,

        // What to do on changes (key input,paste...)
        onChange: React.PropTypes.func.isRequired,

        // Gives the possibility to "reformat" the dom tree before emitting the change
        parser: React.PropTypes.func,

        // Adds a placeholder attribute to the div.
        // Notice that it requires some CSS to work:
        // [contenteditable][placeholder]:empty:not(:focus):before { content: attr(placeholder); }
        placeholder: React.PropTypes.string,

        // Permits to eventually "lock" the contenteditable. It means that the contenteditable will not be editable anymore
        // This is useful to change from edition to read-only mode
        locked: React.PropTypes.bool,

        // This can be useful to be able to disable the listening of changes
        // This allow external libraries to be able to manipulate the content without triggering parsing/change callback
        // This was primarily done to be able to display annotations on text, using AnnotatorJS
        disableChangeListener: React.PropTypes.bool

    },

    shouldComponentUpdate: function(nextProps) {
        // Special case to avoid cursor jumps
        // See http://stackoverflow.com/a/27255103/82609
        var htmlChanged = nextProps.html !== this.getDOMNode().innerHTML;
        //
        var lockedChanged = this.props.locked !== nextProps.locked;
        var onChangeChanged = this.props.onChange !== nextProps.onChange;
        var parserChanged = this.props.parser !== nextProps.parser;
        var placeholderChanged = this.props.placeholder !== nextProps.placeholder;
        var shouldUpdate = htmlChanged || lockedChanged || onChangeChanged || parserChanged || placeholderChanged;
        if ( shouldUpdate ) {
            console.debug("UncontrolledContentEditable -> should update");
        }
        return shouldUpdate;
    },
    componentDidUpdate: function() {
        // Bypass VDOM diff by React and updates the dom if it is not correct
        // See http://stackoverflow.com/a/27255103/82609
        if ( this.props.html !== this.getDOMNode().innerHTML ) {
            this.getDOMNode().innerHTML = this.props.html;
        }
    },

    emitChange: function(e) {
        if ( this.props.disableChangeListener ) {
            return;
        }
        if ( this.props.parser ) {
            this.props.parser(this.getDOMNode());
        }
        var html = this.getDOMNode().innerHTML;
        if ( html !== this.lastHtml) {
            this.props.onChange(html);
        }
        this.lastHtml = html;
    },

    render: function() {
        return <div {...this.props}
            onInput={this.emitChange}
            placeholder={this.props.placeholder}
            contentEditable={!this.props.locked}
            dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
    }

});

[monolithed]

+1 to add another option placeholder

[lovasoa]

I am closing this issue as it covers several independent feature requests, some of which were implemented. Feel free to open new issues if you have a feature request for which there is no open issue.