{"size": 1631, "ext": "js", "max_stars_repo_path": "extension/app/views/IDE/Editor.js", "max_stars_repo_name": "redhawkIT/security-extension", "max_stars_repo_stars_event_min_datetime": "2021-12-03T02:51:37.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-03T02:51:37.000Z", "max_issues_repo_path": "extension/app/views/IDE/Editor.js", "max_issues_repo_name": "euiyulsong/Hack-This", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "extension/app/views/IDE/Editor.js", "max_forks_repo_name": "euiyulsong/Hack-This", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.8888888889, "max_line_length": 75, "alphanum_fraction": 0.6235438381}
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
//  Redux Actions
import { editorInput } from '../../ducks/editor'
//  Styles
import AceEditor from 'react-ace'
//  Import elements for react-ace (do not change or use require())
import 'brace'
import 'brace/mode/javascript'
import 'brace/theme/github'
import 'brace/theme/monokai'

/*
IDE > EDITOR PANE
The core IDE for the user
*/
@connect(
  state => ({
    tab: state.tab,
    input: state.editor.input,
    packages: state.editor.packages,
    config: state.config.editor
  }),
  dispatch => ({ actions: bindActionCreators({ editorInput }, dispatch) })
)
class Editor extends Component {
  static propTypes = {
    input: PropTypes.string.isRequired,
    packages: PropTypes.array.isRequired,
    config: PropTypes.object.isRequired
  }
  static defaultProps = {
    input: '',
    packages: [],
    config: {}
  }
  /*
  TODO: Event listeners for save/autosave
  - add onFocus and onUnfocus event listeners
  - Store the focus status in component state
  - If focused, use setTimeout(cb(), 5000) to save every few secs
  - Make saving an onClick event?
  */
  render (
    { tab, input, packages, config, actions } = this.props
  ) {
    return (
      <AceEditor
        name='editor'
        mode='javascript'
        theme='tomorrow'
        {...config}
        value={input}
        // width='400px'
        // height='395px'
        onChange={(input) => actions.editorInput(input)}
      />
    )
  }
}
export default Editor
