Skip to content

Instantly share code, notes, and snippets.

@ezmiller
Created September 14, 2015 09:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ezmiller/698d1212eb8144b609be to your computer and use it in GitHub Desktop.
Save ezmiller/698d1212eb8144b609be to your computer and use it in GitHub Desktop.
A React component for a content editable div
var ContentEditable = React.createClass({
shouldComponentUpdate: function(nextProps){
return nextProps.html !== this.getDOMNode().innerHTML;
},
componentDidUpdate: function() {
if ( this.props.html !== this.getDOMNode().innerHTML ) {
this.getDOMNode().innerHTML = this.props.html;
}
},
emitChange: function(){
var html = this.getDOMNode().innerHTML;
if (this.props.onChange && html !== this.lastHtml) {
this.props.onChange({
target: {
value: html
}
});
}
this.lastHtml = html;
},
render: function() {
return <div
className={this.props.className}
id="contenteditable"
onKeyDown={this.handleKeyDown}
onChange={this.handleChange}
onInput={this.emitChange}
onBlur={this.emitChange}
contentEditable
dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment