index.js

import React from 'react';
import './index.less';

const stripNbsp = str => str.replace(/ |\u202F|\u00A0/g, ' ');

export default class ContentEditable extends React.Component {
  shouldComponentUpdate(nextProps) {
    let {
      props,
      htmlEl
    } = this;
    if (JSON.stringify(this.props.style) === JSON.stringify(nextProps.style)) {
      return false;
    };
    // We need not rerender if the change of props simply reflects the user's edits.
    // Rerendering in this case would make the cursor/caret jump

    // Rerender if there is no element yet... (somehow?)
    if (!htmlEl) {
      return true;
    };
    // ...or if html really changed... (programmatically, not by user edit)
    if (
      stripNbsp(nextProps.html) !== stripNbsp(htmlEl.innerHTML) &&
      nextProps.html !== props.html
    ) {
      return true;
    };
    let optional = ['style', 'className', 'disabled', 'tagName'];
    // Handle additional properties
    return optional.some(name => props[name] !== nextProps[name]);
  }

  componentDidUpdate() {
    if (this.htmlEl && this.props.html !== this.htmlEl.innerHTML) {
      // Perhaps React (whose VDOM gets outdated because we often prevent
      // rerendering) did not update the DOM. So we update it manually now.
      this.htmlEl.innerHTML = this.props.html;
    };
  }

  emitChange = (evt) => {
    if (!this.htmlEl) return;
    var name = evt.target.dataset.name;
    var html = this.htmlEl.innerHTML;
    if (this.props.onChange && html !== this.lastHtml) {
      // Clone event with Object.assign to avoid 
      // "Cannot assign to read only property 'target' of object"
      var evt = Object.assign({}, evt, {
        target: {
          value: html,
          name: name,
        },
      });
      this.props.onChange(evt);
    }
    this.lastHtml = html;
  }

  render() {
    var {
      tagName,
      name,
      html,
      style,
      onKeyPress,
      ...otherProps,
    } = this.props;

    return (
      // React.createElement(
      //   tagName || 'div',
      //   {
      //     ...props,
      //     ref: (e) => this.htmlEl = e,
      //     onInput: this.emitChange,
      //     onBlur: this.props.onBlur || this.emitChange,
      //     contentEditable: !this.props.disabled,
      //     dangerouslySetInnerHTML: {__html: html}
      //   },
      //   this.props.children);
      <div {...otherProps}
        className="contentEditable"
        style={style}
        data-name={name} 
        ref={(e) => this.htmlEl = e}
        onInput={this.emitChange}
        onKeyPress={onKeyPress} 
        //onBlur={this.props.onBlur || this.emitChange}
        contentEditable={!this.props.disabled}
        dangerouslySetInnerHTML={{__html: html}}>
        {this.props.children}
      </div>
    );
  }
}