r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

add debounce to editor input

Browse source
This commit is contained in:
catarak 2016-07-13 21:50:59 -04:00
parent c29f5aee68
commit d9a11cea4c
2 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client/modules/IDE/components/Editor.js
View file

@ -15,6 +15,8 @@ window.CSSLint = CSSLint;
import { HTMLHint } from 'htmlhint';
window.HTMLHint = HTMLHint;
import { debounce } from 'throttle-debounce';
class Editor extends React.Component {
componentDidMount() {
@ -28,10 +30,14 @@ class Editor extends React.Component {
gutters: ['CodeMirror-lint-markers'],
lint: true
});
this._cm.on('change', () => { // eslint-disable-line
// this.props.updateFileContent('sketch.js', this._cm.getValue());
this._cm.on('change', debounce(200, () => {
this.props.updateFileContent(this.props.file.name, this._cm.getValue());
});
}));
// 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());
// });
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
this._cm.setOption('indentWithTabs', this.props.isTabIndent);
this._cm.setOption('tabSize', this.props.indentationAmount);

3
package.json
View file

@ -87,6 +87,7 @@
"redux-form": "^5.2.5",
"redux-thunk": "^2.1.0",
"shortid": "^2.2.6",
"srcdoc-polyfill": "^0.2.0"
"srcdoc-polyfill": "^0.2.0",
"throttle-debounce": "^1.0.1"
}
}