Notes.js

import { Component, EditorSession,
  ProseEditorConfigurator as Configurator } from 'substance'
import MiniEditor from '../../miniEditor/miniEditor'
import config from '../../miniEditor/config'
import Importer from '../../SimpleEditorImporter'
import SimpleExporter from '../../SimpleEditorExporter'

class Notes extends Component {
  constructor (props) {
    super(props)

    this.resize = this.resize.bind(this)
    this.stopResize = this.stopResize.bind(this)
  }
  // use toc:updated to avoid rewriting TOCProvider's this.handleDocumentChange
  didMount () {
    this.context.editorSession.onUpdate('document', this.onNotesUpdated, this)
  }

  initResize (e) {
    window.addEventListener('mousemove', this.resize, false)
    window.addEventListener('mouseup', this.stopResize, false)
  }

  resize (e) {
    this.el.el.style.height = (this.el.el.offsetHeight + this.el.el.offsetTop - e.clientY) + 'px'
  }

  stopResize (e) {
    window.removeEventListener('mousemove', this.resize, false)
    window.removeEventListener('mouseup', this.stopResize, false)
  }

  render ($$) {
    const miniEditorSession = this._initMiniEditor()
    const resizer = $$('div').addClass('resize-area')

    const el = $$('div')
         .addClass('notes-container').append(resizer)

    el.append($$(MiniEditor, {
      editorSession: miniEditorSession
    }))

    resizer.addEventListener('mousedown', this.initResize, false)

    return el
  }

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

    const importer = configurator.createImporter('html')
    const doc = importer.importDocument('Hello')

    const editorSession = new EditorSession(doc, {
      configurator: configurator
    })

    editorSession.setSaveHandler({
      saveDocument: this.saveNote
    })

    return editorSession
  }

  getProvider () {
    return this.context.notesProvider
  }

  onNotesUpdated (change) {
    const notesProvider = this.getProvider()
    notesProvider.handleDocumentChange(change)
    this.rerender()
  }

  dispose () {
    const provider = this.getProvider()
    provider.off(this)
  }
}

export default Notes