SimpleEditor.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import { Alert } from 'react-bootstrap'

import {
  ProseEditorConfigurator as Configurator,
  DocumentSession
} from 'substance'

import config from './config'
import Editor from './Editor'
import Importer from './SimpleEditorImporter'
import SimpleExporter from './SimpleEditorExporter'

import './SimpleEditor.scss'

export default class SimpleEditor extends React.Component {
  constructor (props) {
    super(props)
    this.save = this.save.bind(this)
    this.toggleTrackChangesStatus = this.toggleTrackChangesStatus.bind(this)

    this.state = {
      trackChanges: props.fragment.trackChanges
    }
  }

  createSession () {
    const { fragment } = this.props
    let source
    if (fragment) { source = fragment.source }

    const configurator = new Configurator().import(config)
    configurator.addImporter('html', Importer)

    const importer = configurator.createImporter('html')
    const doc = importer.importDocument(source)
    const documentSession = new DocumentSession(doc)

    documentSession.setSaveHandler({
      saveDocument: this.save
    })

    return {
      configurator: configurator,
      documentSession: documentSession
    }
  }

  toggleTrackChangesStatus () {
    const { fragment, update } = this.props
    fragment.trackChanges = !fragment.trackChanges
    update(fragment)
    this.setState({
      trackChanges: fragment.trackChanges
    })
  }

  save (source, changes, callback) {
    const { onSave } = this.props
    const config = this.state.config

    const exporter = new SimpleExporter(config)
    const convertedSource = exporter.exportDocument(source)

    onSave(convertedSource, callback)
  }

  componentDidMount () {
    const { canEdit } = this.props
    const { onSave } = this.props
    const el = ReactDOM.findDOMNode(this)

    const session = this.createSession()
    const documentSession = session.documentSession
    const configurator = session.configurator

    this.setState({
      config: configurator.config
    })

    Editor.mount({
      book: this.props.book,
      configurator: configurator,
      containerId: 'body',
      disabled: !canEdit, // set to true read only mode
      documentSession: documentSession,
      fragment: this.props.fragment,
      history: this.props.history,
      onSave: onSave,
      trackChanges: this.props.fragment.trackChanges,
      updateComments: this.props.updateComments,
      user: this.props.user
    }, el)
  }

  // New props arrived, update the editor
  // componentDidUpdate () {
  //   console.log('did update')
  //
  //   var session = this.createSession()
  //   var documentSession = session.documentSession
  //   var configurator = session.configurator
  //
  //   this.writer.extendProps({
  //     documentSession: documentSession,
  //     configurator: configurator
  //   })
  //
  //   console.log(this.writer)
  // }
  //
  // componentWillUnmount () {
  //   this.writer.dispose()
  // }

  render () {
    const { canEdit } = this.props

    let viewMode = !canEdit
    ? (
      <Alert bsStyle='warning' className='view-mode'>
        <span>Editor is in Read-Only Mode</span>
      </Alert>
    )
    : null

    let trackChangeStatus = 'Off'
    let trackChangesIconClass = 'fa-eye-slash'

    if (this.state.trackChanges === true) {
      trackChangeStatus = 'On'
      trackChangesIconClass = 'fa-eye'
    }

    let trackChanges =
      <Alert bsStyle='warning' className='track-changes'>
        <span>
          <i className={'fa ' + trackChangesIconClass} onClick={this.toggleTrackChangesStatus} />
          Track Changes is {trackChangeStatus}
        </span>
      </Alert>

    return (
      <div className='editor-wrapper'>
        {viewMode} {trackChanges}
      </div>
    )
  }
}

SimpleEditor.propTypes = {
  book: React.PropTypes.object.isRequired,
  canEdit: React.PropTypes.bool,
  fragment: React.PropTypes.object.isRequired,
  history: React.PropTypes.object.isRequired,
  onSave: React.PropTypes.func.isRequired,
  trackChanges: React.PropTypes.bool.isRequired,
  update: React.PropTypes.func.isRequired,
  updateComments: React.PropTypes.func.isRequired,
  user: React.PropTypes.object.isRequired
}