Boostnote/browser/components/CodeEditor.js

import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import modes from '../lib/modes'
import _ from 'lodash'

const ace = window.ace

export default class CodeEditor extends React.Component {
  constructor (props) {
    super(props)

    this.changeHandler = (e) => this.handleChange(e)
    this.blurHandler = (e) => {
      if (e.relatedTarget === null) {
        return
      }

      let isFocusingToSearch = e.relatedTarget.className && e.relatedTarget.className.split(' ').some((clss) => {
        return clss === 'ace_search_field' || clss === 'ace_searchbtn' || clss === 'ace_replacebtn' || clss === 'ace_searchbtn_close' || clss === 'ace_text-input'
      })
      if (isFocusingToSearch) {
        return
      }

      if (this.props.onBlur) this.props.onBlur(e)
    }

    this.killedBuffer = ''
    this.execHandler = (e) => {
      console.info('ACE COMMAND >> %s', e.command.name)
      switch (e.command.name) {
        case 'gotolinestart':
          e.preventDefault()
          {
            let position = this.editor.getCursorPosition()
            this.editor.navigateTo(position.row, 0)
          }
          break
        case 'gotolineend':
          e.preventDefault()
          let position = this.editor.getCursorPosition()
          this.editor.navigateTo(position.row, this.editor.getSession().getLine(position.row).length)
          break
        case 'jumptomatching':
          e.preventDefault()
          this.editor.navigateUp()
          break
        case 'removetolineend':
          e.preventDefault()
          let range = this.editor.getSelectionRange()
          let session = this.editor.getSession()
          if (range.isEmpty()) {
            range.setEnd(range.start.row, session.getLine(range.start.row).length)
            this.killedBuffer = session.getTextRange(range)
            if (this.killedBuffer.length > 0) {
              console.log('remove to lineend')
              session.remove(range)
            } else {
              if (session.getLength() === range.start.row) {
                return
              }
              range.setStart(range.start.row, range.end.col)
              range.setEnd(range.start.row + 1, 0)
              this.killedBuffer = '\n'
              session.remove(range)
            }
          } else {
            this.killedBuffer = session.getTextRange(range)
            session.remove(range)
          }
      }
    }
    this.afterExecHandler = (e) => {
      switch (e.command.name) {
        case 'find':
          Array.prototype.forEach.call(ReactDOM.findDOMNode(this).querySelectorAll('.ace_search_field, .ace_searchbtn, .ace_replacebtn, .ace_searchbtn_close'), (el) => {
            el.removeEventListener('blur', this.blurHandler)
            el.addEventListener('blur', this.blurHandler)
          })
          break
      }
    }

    this.state = {
    }

    this.silentChange = false
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.readOnly !== this.props.readOnly) {
      this.editor.setReadOnly(!!nextProps.readOnly)
    }
  }

  componentDidMount () {
    let { mode, value } = this.props
    let el = ReactDOM.findDOMNode(this)
    let editor = this.editor = ace.edit(el)
    editor.$blockScrolling = Infinity
    editor.renderer.setShowGutter(true)
    editor.setTheme('ace/theme/xcode')
    editor.moveCursorTo(0, 0)
    editor.setReadOnly(!!this.props.readOnly)
    editor.setFontSize('14')

    editor.on('blur', this.blurHandler)

    editor.commands.addCommand({
      name: 'Emacs cursor up',
      bindKey: {mac: 'Ctrl-P'},
      exec: function (editor) {
        editor.navigateUp(1)
        if (editor.getCursorPosition().row < editor.getFirstVisibleRow()) editor.scrollToLine(editor.getCursorPosition().row, false, false)
      },
      readOnly: true
    })
    editor.commands.addCommand({
      name: 'Emacs kill buffer',
      bindKey: {mac: 'Ctrl-Y'},
      exec: function (editor) {
        editor.insert(this.killedBuffer)
      }.bind(this),
      readOnly: true
    })

    editor.commands.on('exec', this.execHandler)
    editor.commands.on('afterExec', this.afterExecHandler)

    var session = editor.getSession()
    mode = _.find(modes, {name: mode})
    let syntaxMode = mode != null
      ? mode.mode
      : 'text'
    session.setMode('ace/mode/' + syntaxMode)

    session.setUseSoftTabs(this.state.indentType === 'space')
    session.setTabSize(!isNaN(this.state.indentSize) ? parseInt(this.state.indentSize, 10) : 4)
    session.setOption('useWorker', false)
    session.setUseWrapMode(true)
    session.setValue(_.isString(value) ? value : '')

    session.on('change', this.changeHandler)
  }

  componentWillUnmount () {
    this.editor.getSession().removeListener('change', this.changeHandler)
    this.editor.removeListener('blur', this.blurHandler)
    this.editor.commands.removeListener('exec', this.execHandler)
    this.editor.commands.removeListener('afterExec', this.afterExecHandler)
  }

  componentDidUpdate (prevProps, prevState) {
    var session = this.editor.getSession()

    if (prevProps.mode !== this.props.mode) {
      let mode = _.find(modes, {name: this.props.mode})
      let syntaxMode = mode != null
        ? mode.mode
        : 'text'
      session.setMode('ace/mode' + syntaxMode)
    }
  }

  handleConfigApply (e, config) {
    // this.setState({
    //   fontSize: config['editor-font-size'],
    //   fontFamily: config['editor-font-family'],
    //   indentType: config['editor-indent-type'],
    //   indentSize: config['editor-indent-size'],
    //   themeSyntax: config['theme-syntax']
    // }, function () {
    //   var editor = this.editor
    //   editor.setTheme('ace/theme/' + this.state.themeSyntax)

    //   var session = editor.getSession()
    //   session.setUseSoftTabs(this.state.indentType === 'space')
    //   session.setTabSize(!isNaN(this.state.indentSize) ? parseInt(this.state.indentSize, 10) : 4)
    // })
  }

  handleChange (e) {
    if (this.props.onChange) {
      this.value = this.editor.getValue()
      this.props.onChange(e)
    }
  }

  getFirstVisibleRow () {
    return this.editor.getFirstVisibleRow()
  }

  getCursorPosition () {
    return this.editor.getCursorPosition()
  }

  moveCursorTo (row, col) {
    this.editor.moveCursorTo(row, col)
  }

  scrollToLine (num) {
    this.editor.scrollToLine(num, false, false)
  }

  focus () {
    this.editor.focus()
  }

  blur () {
    this.editor.blur()
  }

  reload () {
    let session = this.editor.getSession()
    session.removeListener('change', this.changeHandler)
    session.setValue(this.props.value)
    session.getUndoManager().reset()
    session.on('change', this.changeHandler)
  }

  render () {
    let { className } = this.props

    return (
      <div
        className={className == null
          ? 'CodeEditor'
          : `CodeEditor ${className}`
        }
        style={{
          fontSize: '14px',
          fontFamily: 'monospace'
        }}
      />
    )
  }
}

CodeEditor.propTypes = {
  value: PropTypes.string,
  mode: PropTypes.string,
  className: PropTypes.string,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  readOnly: PropTypes.bool
}

CodeEditor.defaultProps = {
  readOnly: false
}

export default CodeEditor