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

230 lines
7.6 KiB
React
Raw Normal View History

2016-06-27 22:03:22 +02:00
import React, { PropTypes } from 'react';
import EditorAccessibility from '../components/EditorAccessibility';
2016-06-24 00:29:55 +02:00
import CodeMirror from 'codemirror';
2016-09-07 21:05:25 +02:00
import beautifyJS from 'js-beautify';
const beautifyCSS = beautifyJS.css;
const beautifyHTML = beautifyJS.html;
2016-06-24 00:29:55 +02:00
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
2016-06-24 00:29:55 +02:00
import 'codemirror/addon/selection/active-line';
2016-07-12 23:38:24 +02: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 22:58:59 +02:00
import 'codemirror/addon/search/jump-to-line';
2016-07-12 23:38:24 +02: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-09-07 22:33:01 +02:00
import InlineSVG from 'react-inlinesvg';
const downArrowUrl = require('../../../images/down-arrow.svg');
import classNames from 'classnames';
2016-06-24 00:29:55 +02:00
2016-10-19 19:29:02 +02:00
import { debounce } from 'lodash';
import Timer from '../components/Timer';
2016-06-24 00:29:55 +02:00
class Editor extends React.Component {
2016-09-07 22:41:56 +02:00
constructor(props) {
super(props);
this.tidyCode = this.tidyCode.bind(this);
}
2016-06-24 00:29:55 +02:00
componentDidMount() {
this.beep = new Audio(beepUrl);
this.widgets = [];
2016-06-24 00:29:55 +02:00
this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
2016-09-20 17:51:09 +02:00
theme: `p5-${this.props.theme}`,
value: this.props.file.content,
2016-06-24 00:29:55 +02:00
lineNumbers: true,
styleActiveLine: true,
2016-07-13 17:59:47 +02:00
inputStyle: 'contenteditable',
2016-07-12 21:58:11 +02:00
mode: 'javascript',
2016-10-05 18:26:49 +02:00
lineWrapping: false,
fixedGutter: false,
2016-07-12 23:38:24 +02:00
gutters: ['CodeMirror-lint-markers'],
2016-08-05 22:58:59 +02:00
keyMap: 'sublime',
lint: {
2016-10-19 19:29:02 +02:00
onUpdateLinting: debounce((annotations) => {
2016-10-18 04:58:30 +02:00
this.props.clearLintMessage();
annotations.forEach((x) => {
if (x.from.line > -1) {
this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message);
2016-08-06 05:08:44 +02:00
}
});
2016-10-18 04:58:30 +02:00
if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
this.beep.play();
}
2016-10-19 19:29:02 +02:00
}, 2000)
2016-08-05 22:58:59 +02:00
}
2016-06-24 00:29:55 +02:00
});
2016-10-19 19:29:02 +02:00
this._cm.on('change', debounce(() => {
this.props.setUnsavedChanges(true);
this.props.updateFileContent(this.props.file.name, this._cm.getValue());
if (this.props.autorefresh && this.props.isPlaying) {
this.props.startRefreshSketch();
}
2016-10-19 19:29:02 +02:00
}, 400));
2016-08-05 22:58:59 +02:00
this._cm.on('keyup', () => {
2016-08-25 18:32:06 +02:00
const temp = `line ${parseInt((this._cm.getCursor().line) + 1, 10)}`;
document.getElementById('current-line').innerHTML = temp;
2016-08-05 22:58:59 +02:00
});
this._cm.on('keydown', (_cm, e) => {
2016-10-20 00:35:59 +02:00
// 9 === Tab
if (e.keyCode === 9 && e.shiftKey) {
2016-09-07 22:41:56 +02:00
this.tidyCode();
}
});
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
this._cm.setOption('indentWithTabs', this.props.isTabIndent);
this._cm.setOption('tabSize', this.props.indentationAmount);
2016-06-24 00:29:55 +02: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-11-08 19:30:41 +01:00
if (!prevProps.unsavedChanges) {
setTimeout(() => this.props.setUnsavedChanges(false), 400);
}
2016-06-24 00:29:55 +02:00
}
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);
}
if (this.props.file.name !== prevProps.name) {
2016-10-19 19:03:19 +02:00
if (this.props.file.name.match(/.+\.js$/i)) {
this._cm.setOption('mode', 'javascript');
2016-10-19 19:03:19 +02:00
} else if (this.props.file.name.match(/.+\.css$/i)) {
this._cm.setOption('mode', 'css');
2016-10-19 19:03:19 +02:00
} else if (this.props.file.name.match(/.+\.html$/i)) {
this._cm.setOption('mode', 'htmlmixed');
2016-10-22 21:23:37 +02:00
} else if (this.props.file.name.match(/.+\.json$/i)) {
this._cm.setOption('mode', 'application/json');
} else {
this._cm.setOption('mode', 'text/plain');
}
}
2016-09-20 17:51:09 +02:00
if (this.props.theme !== prevProps.theme) {
this._cm.setOption('theme', `p5-${this.props.theme}`);
}
2016-06-24 00:29:55 +02:00
}
componentWillUnmount() {
this._cm = null;
}
2016-09-07 22:41:56 +02:00
tidyCode() {
const beautifyOptions = {
indent_size: this.props.indentationAmount,
indent_with_tabs: this.props.isTabIndent
};
const mode = this._cm.getOption('mode');
if (mode === 'javascript') {
this._cm.doc.setValue(beautifyJS(this._cm.doc.getValue(), beautifyOptions));
} else if (mode === 'css') {
this._cm.doc.setValue(beautifyCSS(this._cm.doc.getValue(), beautifyOptions));
} else if (mode === 'htmlmixed') {
this._cm.doc.setValue(beautifyHTML(this._cm.doc.getValue(), beautifyOptions));
}
}
2016-06-24 00:29:55 +02:00
_cm: CodeMirror.Editor
render() {
2016-09-07 22:33:01 +02:00
const editorSectionClass = classNames({
editor: true,
'editor--options': this.props.editorOptionsVisible
});
2016-08-05 22:58:59 +02:00
return (
<section
title="code editor"
role="main"
2016-09-07 22:33:01 +02:00
className={editorSectionClass}
>
<div className="editor__file-name">
<span>{this.props.file.name}
{this.props.unsavedChanges ? '*' : null}</span>
<Timer
projectSavedTime={this.props.projectSavedTime}
/>
</div>
2016-09-07 22:33:01 +02:00
<button
className="editor__options-button"
2016-09-28 18:09:42 +02:00
aria-label="editor options"
2016-09-08 04:49:29 +02:00
tabIndex="0"
2016-10-19 19:03:19 +02:00
ref="optionsButton"
onClick={() => {
this.refs.optionsButton.focus();
2016-09-08 04:49:29 +02:00
this.props.showEditorOptions();
}}
2016-09-07 22:41:56 +02:00
onBlur={() => setTimeout(this.props.closeEditorOptions, 200)}
2016-09-07 22:33:01 +02:00
>
<InlineSVG src={downArrowUrl} />
</button>
2016-09-28 18:09:42 +02:00
<ul className="editor__options" title="editor options">
2016-09-07 22:33:01 +02:00
<li>
2016-09-07 22:41:56 +02:00
<a onClick={this.tidyCode}>Tidy</a>
2016-09-07 22:33:01 +02:00
</li>
<li>
2016-09-07 23:47:22 +02:00
<a onClick={this.props.showKeyboardShortcutModal}>Keyboard Shortcuts</a>
2016-09-07 22:33:01 +02:00
</li>
</ul>
2016-08-12 20:19:23 +02:00
<div ref="container" className="editor-holder" tabIndex="0">
</div>
<EditorAccessibility
lintMessages={this.props.lintMessages}
2016-08-12 20:23:34 +02:00
lineNumber={this.props.lineNumber}
/>
2016-08-12 20:19:23 +02:00
</section>
2016-08-05 22:58:59 +02:00
);
2016-06-24 00:29:55 +02:00
}
}
2016-06-27 22:03:22 +02:00
Editor.propTypes = {
2016-08-11 20:09:59 +02:00
lintWarning: PropTypes.bool.isRequired,
2016-08-12 20:23:34 +02:00
lineNumber: PropTypes.string.isRequired,
2016-08-11 19:24:02 +02:00
lintMessages: PropTypes.array.isRequired,
updateLintMessage: PropTypes.func.isRequired,
clearLintMessage: PropTypes.func.isRequired,
updateLineNumber: PropTypes.func.isRequired,
2016-07-11 04:52:48 +02:00
indentationAmount: PropTypes.number.isRequired,
2016-07-12 05:40:30 +02: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-09-07 22:33:01 +02:00
}),
editorOptionsVisible: PropTypes.bool.isRequired,
showEditorOptions: PropTypes.func.isRequired,
2016-09-07 23:47:22 +02:00
closeEditorOptions: PropTypes.func.isRequired,
showKeyboardShortcutModal: PropTypes.func.isRequired,
2016-09-20 17:51:09 +02:00
setUnsavedChanges: PropTypes.func.isRequired,
startRefreshSketch: PropTypes.func.isRequired,
autorefresh: PropTypes.bool.isRequired,
isPlaying: PropTypes.bool.isRequired,
theme: PropTypes.string.isRequired,
unsavedChanges: PropTypes.bool.isRequired,
projectSavedTime: PropTypes.string.isRequired
2016-06-27 22:03:22 +02:00
};
2016-06-24 00:29:55 +02:00
export default Editor;