daily pastebin goal
31%
SHARE
TWEET

Untitled

a guest Feb 25th, 2018 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var React = require('react');
  2.  
  3. var ContentEditable = React.createClass({
  4.     render: function(){
  5.         //TODO: find where html=undefined and fix it! So I can remove this? Maybe I should keep this safety.
  6.         var html = this.props.html || '';
  7.         console.log('content editable render, html: ', this.props.html);
  8.         return <div id="contenteditable"
  9.             onInput={this.emitChange}
  10.             onBlur={this.emitChange}
  11.             contentEditable
  12.             dangerouslySetInnerHTML={{__html: html}}></div>;
  13.     },
  14.     shouldComponentUpdate: function(nextProps){
  15.         return nextProps.html !== this.getDOMNode().innerHTML;
  16.     },
  17.  
  18.     emitChange: function(){
  19.         var html = this.getDOMNode().innerHTML;
  20.         if (this.props.onChange && html !== this.lastHtml) {
  21.             this.props.onChange({
  22.                 target: {
  23.                     value: html
  24.                 }
  25.             });
  26.         }
  27.         this.lastHtml = html;
  28.     }
  29. });
  30.  
  31. module.exports = ContentEditable;
  32.    
  33. <div class='wrapper'>    
  34. <div key={this.props.thing.id} dangerouslySetInnerHtml={this.props.thing.content} />
  35. </div>
  36.    
  37. componentDidMount() {
  38.   this.updateInnerHTMLFromProps();
  39. }
  40.  
  41. componentDidUpdate() {
  42.   this.updateInnerHTMLFromProps();
  43. }
  44.  
  45. updateInnerHTMLFromProps() {
  46.   this.refEl.innerHTML = this.props.html;
  47. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top