react-ckeditor icon indicating copy to clipboard operation
react-ckeditor copied to clipboard

change event and re-render on state change

Open dougnorton opened this issue 5 years ago • 3 comments

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')
);

dougnorton avatar Oct 10 '19 20:10 dougnorton

Having a similar issue, if i type the character i entered disappears and it goes to the start of the editor. Any idea? If i use 1.0.5 instead of @latest and use the onChange event it works though.

pmonty avatar Dec 18 '19 02:12 pmonty

+1 I experienced this bug on receiving WebSocket MessageEvent !

offaxis avatar Apr 23 '20 14:04 offaxis

+1

sagarguhe avatar Oct 08 '21 11:10 sagarguhe