92 lines
2.2 KiB
JavaScript
92 lines
2.2 KiB
JavaScript
|
var React = require('react'),
|
||
|
|
debug = require('debug')('freecc:comp:editor'),
|
||
|
|
jshint = require('jshint').JSHINT,
|
||
|
|
Tailspin = require('tailspin');
|
||
|
|
|
||
|
|
var Editor = React.createClass({
|
||
|
|
|
||
|
|
propTypes: {
|
||
|
|
onValueChange: React.PropTypes.func,
|
||
|
|
value: React.PropTypes.string
|
||
|
|
},
|
||
|
|
|
||
|
|
getDefaultProps: function() {
|
||
|
|
return {
|
||
|
|
value: 'console.log(\'freeCodeCamp is awesome\')'
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
getInitialState: function() {
|
||
|
|
return {
|
||
|
|
value: this.props.value
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function() {
|
||
|
|
var options = {
|
||
|
|
autoCloseBrackets: true,
|
||
|
|
gutters: ['CodeMirror-lint-markers'],
|
||
|
|
lint: true,
|
||
|
|
linter: jshint,
|
||
|
|
lineNumbers: true,
|
||
|
|
lineWrapping: true,
|
||
|
|
mode: 'javascript',
|
||
|
|
matchBrackets: true,
|
||
|
|
runnable: true,
|
||
|
|
scrollbarStyle: 'null',
|
||
|
|
theme: 'monokai',
|
||
|
|
textAreaClassName: 'hide-textarea',
|
||
|
|
value: this.state.value,
|
||
|
|
onChange: e => {
|
||
|
|
this.setState({ value: e.target.value});
|
||
|
|
if (typeof this.props.onValueChange === 'function') {
|
||
|
|
this.props.onValueChange(e.target.value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var config = {
|
||
|
|
setSize: ['100%', 'auto'],
|
||
|
|
extraKeys: {
|
||
|
|
Tab: function(cm) {
|
||
|
|
debug('tab pressed');
|
||
|
|
if (cm.somethingSelected()) {
|
||
|
|
cm.indentSelection('add');
|
||
|
|
} else {
|
||
|
|
var spaces = new Array(cm.getOption('indentUnit') + 1).join(' ');
|
||
|
|
cm.replaceSelection(spaces);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'Shift-Tab': function(cm) {
|
||
|
|
debug('shift-tab pressed');
|
||
|
|
if (cm.somethingSelected()) {
|
||
|
|
cm.indentSelection('subtract');
|
||
|
|
} else {
|
||
|
|
var spaces = new Array(cm.getOption('indentUnit') + 1).join(' ');
|
||
|
|
cm.replaceSelection(spaces);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'Ctrl-Enter': function() {
|
||
|
|
debug('C-enter pressed');
|
||
|
|
// execute bonfire action
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div id='mainEditorPanel'>
|
||
|
|
<form className='code'>
|
||
|
|
<div className='form-group codeMirrorView'>
|
||
|
|
<Tailspin
|
||
|
|
{ ...options }
|
||
|
|
config={ config }/>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = Editor;
|