ui-kit/components/editable/index.jade

user interface kit

:doc
  @name Editable
  @prop {String} className
  @prop {Function} onChange
  @prop {Object} options
  @prop {String} tag
  @prop {String} text

// import * as ReactDOM from 'react-dom'
import * as MediumEditor from 'medium-editor'
import './index.ess'

var.
  tagProps = {
    className: props.className,
    contentEditable: true,
    dangerouslySetInnerHTML: {__html: state.text}
  }

= DOM(props.tag, tagProps);

:module
  export function getInitialState() {
    return {text: this.props.text};
  }

  export function getDefaultProps() {
    return {
      tag: 'div'
    };
  }

  export function componentDidMount() {
    // var dom = this.getDOMNode ? this.getDOMNode() : ReactDOM.findDOMNode(this);
    var dom = this.getDOMNode();
    this.medium = new MediumEditor(dom, this.props.options);
    this.medium.subscribe('editableInput', (e) => {
      this._updated = true;
      this.change(dom.innerHTML);
    });
  }

  export function componentWillUnmount() {
    this.medium.destroy();
  }

  export function componentWillReceiveProps(nextProps) {
    if(nextProps.text !== this.state.text && !this._updated)
      this.setState({text: nextProps.text});
    if(this._updated) this._updated = false;
  }

  export function change(text) {
    if(this.props.onChange) this.props.onChange(text);
  }