2016-06-27 22:03:22 +02:00
|
|
|
import React, { PropTypes } from 'react';
|
2016-06-24 00:29:55 +02:00
|
|
|
import CodeMirror from 'codemirror';
|
|
|
|
import 'codemirror/mode/javascript/javascript';
|
|
|
|
import 'codemirror/addon/selection/active-line';
|
|
|
|
|
|
|
|
class Editor extends React.Component {
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
|
|
|
|
theme: 'p5-widget',
|
|
|
|
value: this.props.content,
|
|
|
|
lineNumbers: true,
|
|
|
|
styleActiveLine: true,
|
|
|
|
mode: 'javascript'
|
|
|
|
});
|
|
|
|
this._cm.on('change', () => { // eslint-disable-line
|
|
|
|
this.props.updateFile('sketch.js', this._cm.getValue());
|
|
|
|
});
|
|
|
|
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
|
2016-07-11 05:11:06 +02:00
|
|
|
this._cm.setOption('indentWithTabs', this.props.isTabIndent);
|
2016-07-11 15:00:44 +02:00
|
|
|
this._cm.setOption('tabSize', this.props.indentationAmount);
|
2016-06-24 00:29:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
if (this.props.content !== prevProps.content &&
|
|
|
|
this.props.content !== this._cm.getValue()) {
|
|
|
|
this._cm.setValue(this.props.content); // eslint-disable-line no-underscore-dangle
|
|
|
|
}
|
|
|
|
if (this.props.fontSize !== prevProps.fontSize) {
|
|
|
|
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
|
|
|
|
}
|
2016-07-06 17:27:39 +02:00
|
|
|
if (this.props.indentationAmount !== prevProps.indentationAmount) {
|
|
|
|
this._cm.setOption('tabSize', this.props.indentationAmount);
|
|
|
|
}
|
2016-07-11 05:11:06 +02:00
|
|
|
if (this.props.isTabIndent !== prevProps.isTabIndent) {
|
|
|
|
this._cm.setOption('indentWithTabs', this.props.isTabIndent);
|
|
|
|
}
|
2016-06-24 00:29:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this._cm = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
_cm: CodeMirror.Editor
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return <div ref="container" className="editor-holder"></div>;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-06-27 22:03:22 +02:00
|
|
|
Editor.propTypes = {
|
|
|
|
content: PropTypes.string.isRequired,
|
|
|
|
updateFile: PropTypes.func.isRequired,
|
2016-07-06 17:27:39 +02:00
|
|
|
fontSize: PropTypes.number.isRequired,
|
2016-07-11 04:52:48 +02:00
|
|
|
indentationAmount: PropTypes.number.isRequired,
|
|
|
|
isTabIndent: PropTypes.bool.isRequired
|
2016-06-27 22:03:22 +02:00
|
|
|
};
|
|
|
|
|
2016-06-24 00:29:55 +02:00
|
|
|
export default Editor;
|