p5.js-web-editor/client/modules/IDE/components/Editor.js

132 lines
4.5 KiB
JavaScript
Raw Normal View History

2016-06-27 20:03:22 +00:00
import React, { PropTypes } from 'react';
import EditorAccessibility from '../components/EditorAccessibility';
2016-06-23 22:29:55 +00:00
import CodeMirror from 'codemirror';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
2016-06-23 22:29:55 +00:00
import 'codemirror/addon/selection/active-line';
2016-07-12 21:38:24 +00:00
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/javascript-lint';
import 'codemirror/addon/lint/css-lint';
import 'codemirror/addon/lint/html-lint';
import 'codemirror/addon/comment/comment';
import 'codemirror/keymap/sublime';
2016-08-05 20:58:59 +00:00
import 'codemirror/addon/search/jump-to-line';
2016-07-12 21:38:24 +00:00
import { JSHINT } from 'jshint';
window.JSHINT = JSHINT;
import { CSSLint } from 'csslint';
window.CSSLint = CSSLint;
import { HTMLHint } from 'htmlhint';
window.HTMLHint = HTMLHint;
const beepUrl = require('../../../sounds/audioAlert.mp3');
2016-06-23 22:29:55 +00:00
2016-07-14 01:50:59 +00:00
import { debounce } from 'throttle-debounce';
2016-06-23 22:29:55 +00:00
class Editor extends React.Component {
componentDidMount() {
this.beep = new Audio(beepUrl);
2016-06-23 22:29:55 +00:00
this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
theme: 'p5-widget',
value: this.props.file.content,
2016-06-23 22:29:55 +00:00
lineNumbers: true,
styleActiveLine: true,
2016-07-13 15:59:47 +00:00
inputStyle: 'contenteditable',
2016-07-12 19:58:11 +00:00
mode: 'javascript',
2016-07-12 21:38:24 +00:00
lineWrapping: true,
gutters: ['CodeMirror-lint-markers'],
2016-08-05 20:58:59 +00:00
keyMap: 'sublime',
lint: {
2016-08-08 17:49:45 +00:00
onUpdateLinting: debounce(2000, (annotations) => {
2016-08-11 17:24:02 +00:00
this.props.clearLintMessage();
2016-08-06 03:08:44 +00:00
annotations.forEach((x) => {
if (x.from.line > -1) {
2016-08-11 17:24:02 +00:00
this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message);
2016-08-06 03:08:44 +00:00
}
});
2016-08-11 18:09:59 +00:00
if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
2016-08-06 03:08:44 +00:00
this.beep.play();
}
2016-08-08 17:49:45 +00:00
})
2016-08-05 20:58:59 +00:00
}
2016-06-23 22:29:55 +00:00
});
2016-07-14 01:50:59 +00:00
this._cm.on('change', debounce(200, () => {
this.props.updateFileContent(this.props.file.name, this._cm.getValue());
2016-07-14 01:50:59 +00:00
}));
2016-08-05 20:58:59 +00:00
this._cm.on('keyup', () => {
2016-08-11 17:24:02 +00:00
this.props.updateLineNumber(parseInt((this._cm.getCursor().line) + 1, 10));
2016-08-05 20:58:59 +00:00
});
2016-07-14 01:50:59 +00:00
// this._cm.on('change', () => { // eslint-disable-line
// // this.props.updateFileContent('sketch.js', this._cm.getValue());
// throttle(1000, () => console.log('debounce is working!'));
// this.props.updateFileContent(this.props.file.name, this._cm.getValue());
// });
2016-06-23 22:29:55 +00:00
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
2016-07-11 03:11:06 +00:00
this._cm.setOption('indentWithTabs', this.props.isTabIndent);
2016-07-11 13:00:44 +00:00
this._cm.setOption('tabSize', this.props.indentationAmount);
2016-06-23 22:29:55 +00:00
}
componentDidUpdate(prevProps) {
if (this.props.file.content !== prevProps.file.content &&
this.props.file.content !== this._cm.getValue()) {
this._cm.setValue(this.props.file.content); // eslint-disable-line no-underscore-dangle
2016-06-23 22:29:55 +00:00
}
if (this.props.fontSize !== prevProps.fontSize) {
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
}
2016-07-06 15:27:39 +00:00
if (this.props.indentationAmount !== prevProps.indentationAmount) {
this._cm.setOption('tabSize', this.props.indentationAmount);
}
2016-07-11 03:11:06 +00:00
if (this.props.isTabIndent !== prevProps.isTabIndent) {
this._cm.setOption('indentWithTabs', this.props.isTabIndent);
}
if (this.props.file.name !== prevProps.name) {
if (this.props.file.name.match(/.+\.js$/)) {
this._cm.setOption('mode', 'javascript');
} else if (this.props.file.name.match(/.+\.css$/)) {
this._cm.setOption('mode', 'css');
} else if (this.props.file.name.match(/.+\.html$/)) {
this._cm.setOption('mode', 'htmlmixed');
}
}
2016-06-23 22:29:55 +00:00
}
componentWillUnmount() {
this._cm = null;
}
_cm: CodeMirror.Editor
render() {
2016-08-05 20:58:59 +00:00
return (
2016-08-12 18:19:23 +00:00
<section title="code editor" role="main">
<div ref="container" className="editor-holder" tabIndex="0">
</div>
<EditorAccessibility
lintMessages={this.props.lintMessages}
2016-08-12 18:23:34 +00:00
lineNumber={this.props.lineNumber}
/>
2016-08-12 18:19:23 +00:00
</section>
2016-08-05 20:58:59 +00:00
);
2016-06-23 22:29:55 +00:00
}
}
2016-06-27 20:03:22 +00:00
Editor.propTypes = {
2016-08-11 18:09:59 +00:00
lintWarning: PropTypes.bool.isRequired,
2016-08-12 18:23:34 +00:00
lineNumber: PropTypes.string.isRequired,
2016-08-11 17:24:02 +00:00
lintMessages: PropTypes.array.isRequired,
updateLintMessage: PropTypes.func.isRequired,
clearLintMessage: PropTypes.func.isRequired,
updateLineNumber: PropTypes.func.isRequired,
2016-07-11 02:52:48 +00:00
indentationAmount: PropTypes.number.isRequired,
2016-07-12 03:40:30 +00:00
isTabIndent: PropTypes.bool.isRequired,
updateFileContent: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired,
file: PropTypes.shape({
name: PropTypes.string.isRequired,
content: PropTypes.string.isRequired
2016-07-12 03:40:30 +00:00
})
2016-06-27 20:03:22 +00:00
};
2016-06-23 22:29:55 +00:00
export default Editor;