editor.js

import React from 'react'
import {Editor as MobileDocEditor} from 'mobiledoc-kit';

const MOBILEDOC_VERSION = '0.3.0';

const EMPTY_MOBILEDOC = {
  version: MOBILEDOC_VERSION,
  markups: [],
  atoms: [],
  cards: [],
  sections: []
};


class Editor extends React.Component
{

  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    console.log('EDITOR render');
    return <div className="editor-wrapper" ref={(ref) => this._wrapperEl = ref}></div>
  }

  componentDidMount() {
    this._renderEditor();
  }

  componentDidUpdate() {
    console.log('EDITOR componentDidUpdate');
    this._renderEditor();
  }

  componentWillUnmount() {
    this._destroyEditor();
  }

  // @TODO: make this logic more intelligent
  shouldComponentUpdate(_nextProps, _nextState) {
    return true;
  }

  _renderEditor() {
    var self = this;

    if (this._editor) {
      this._editor.destroy();
    }

    var editor = new MobileDocEditor({mobiledoc: this.props.mobiledoc});
    editor.render(this._wrapperEl);

    editor.on('update', () => {
      let updatedMobileDoc = editor.serialize(MOBILEDOC_VERSION);
      if (self.props.onChange) {
        self.props.onChange(updatedMobileDoc);
      }
    });

    this._editor = editor;
  }

  _destroyEditor() {
    if (this._editor) {
      this._editor.destroy();
    }
  }
}


Editor.propTypes = {onChange: React.PropTypes.func};
Editor.defaultProps = {mobiledoc: EMPTY_MOBILEDOC};

export default Editor;