change event and re-render on state change #76
Description
Periodically I update some state which causes the CKEditor to re-render. If I'm typing into the editor at the same time the state update happens, I loose text and the cursor jumps to the beginning of the text.
I have a change to the example.js (below) that causes the issue. Just run the example and start typing in the CKEditor.
Is this an issue or is it just the way I have it coded?
const React = require('react');
const ReactDOM = require('react-dom');
import CKEditor from "../src";
class Example extends React.Component {
constructor(props){
super(props);
//State initialization
this.state = {
content: "Hello World",
periodic: 'b'
};
this.setContent = this.setContent.bind(this)
this.onChange = this.onChange.bind(this);
setInterval(() => this.cycleUpdate(), 1000);
}
cycleUpdate() {
this.setState({
periodic: this.state.periodic + 'a'
});
}
//------ Test for race condition ------ //
setContent(){
console.log("Setting content");
this.setState({
content: "Hello World " + Math.random()
})
}
onChange(evt){
this.setState({
content: evt.editor.getData()
});
console.log("onChange fired with event info: ",evt, "and data: ",evt.editor.getData());
}
onBlur(evt){
console.log("onBlur fired with event info: ",evt);
}
afterPaste(evt){
console.log("afterPaste fired with event info: ",evt);
}
render() {
return (
<div>
<button onClick={() => this.setContent()} children='Set content' />
<CKEditor
content={this.state.content}
events={{
blur: this.onBlur,
afterPaste: this.afterPaste,
change: this.onChange
}}
/>
</div>
);
}
}
ReactDOM.render(
<Example />,
document.getElementById('example')
);