Skip to content

Instantly share code, notes, and snippets.

@sebastiandeutsch
Created May 28, 2015 00:10
Show Gist options
  • Save sebastiandeutsch/6f96f7e9d1ff1931c37b to your computer and use it in GitHub Desktop.
Save sebastiandeutsch/6f96f7e9d1ff1931c37b to your computer and use it in GitHub Desktop.
ContentEditable React Component using ES6 classes
import React from 'react';
export default class ContentEditable extends React.Component {
constructor() {
super();
this.emitChange = this.emitChange.bind(this);
}
render() {
return <div id="contenteditable"
onInput={this.emitChange}
onBlur={this.emitChange}
contentEditable
dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
}
shouldComponentUpdate(nextProps) {
return nextProps.html !== React.findDOMNode(this).innerHTML;
}
componentDidUpdate() {
if ( this.props.html !== React.findDOMNode(this).innerHTML ) {
React.findDOMNode(this).innerHTML = this.props.html;
}
}
emitChange(evt) {
var html = React.findDOMNode(this).innerHTML;
if (this.props.onChange && html !== this.lastHtml) {
evt.target = { value: html };
this.props.onChange(evt);
}
this.lastHtml = html;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment