p5.js-web-editor/shared/components/Editor/Editor.jsx

43 lines
1.1 KiB
React
Raw Normal View History

2016-05-03 22:13:04 +02:00
import React from 'react';
import CodeMirror from 'codemirror';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/selection/active-line'
2016-05-03 22:13:04 +02:00
2016-05-05 23:48:26 +02:00
class Editor extends React.Component {
2016-06-20 21:23:42 +02:00
_cm: CodeMirror.Editor
2016-05-05 23:48:26 +02:00
componentDidMount() {
2016-05-03 22:13:04 +02:00
this._cm = CodeMirror(this.refs.container, {
theme: 'p5-widget',
2016-05-06 01:01:31 +02:00
value: this.props.content,
2016-05-03 22:13:04 +02:00
lineNumbers: true,
styleActiveLine: true,
2016-05-03 22:13:04 +02:00
mode: 'javascript'
});
2016-05-05 23:48:26 +02:00
this._cm.on('change', () => {
this.props.updateFile("sketch.js", this._cm.getValue());
});
2016-06-20 20:58:15 +02:00
this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
2016-05-05 23:48:26 +02:00
}
componentDidUpdate(prevProps) {
2016-05-06 01:01:31 +02:00
if (this.props.content !== prevProps.content &&
this.props.content !== this._cm.getValue()) {
this._cm.setValue(this.props.content);
2016-05-05 23:48:26 +02:00
}
2016-06-20 20:58:15 +02:00
if (this.props.fontSize !== prevProps.fontSize) {
this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
}
2016-05-05 23:48:26 +02:00
}
componentWillUnmount() {
2016-05-03 22:13:04 +02:00
this._cm = null;
2016-05-05 23:48:26 +02:00
}
render() {
2016-05-03 22:13:04 +02:00
return <div ref="container" className="editor-holder"></div>;
}
2016-05-05 23:48:26 +02:00
}
2016-06-20 19:00:25 +02:00
export default Editor;