How to stop DraftJS cursor jumping to beginning of text?

Author: Sandeep3005Created May 9, 2017Updated Nov 23, 2022

Code involved using DraftJS and Meteor Js application Task - Make a live preview where text from DraftJS will get saved to DB and from DB it get displayed on another component.

But problem is once data comes from DB and I try to edit DraftJS cursor moved to the beginning.

Code is

import {Editor, EditorState, ContentState} from 'draft-js';
import React, { Component } from 'react';
import { TestDB } from '../api/yaml-component.js';
import { createContainer } from 'meteor/react-meteor-data';
import PropTypes from 'prop-types';

class EditorComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
    	editorState : EditorState.createEmpty(),
    };
  }

  componentWillReceiveProps(nextProps) {
    console.log('Receiving Props');
    if (!nextProps) return;
    console.log(nextProps);
    let j = nextProps.testDB[0];
    let c = ContentState.createFromText(j.text);
    this.setState({
      editorState: EditorState.createWithContent(c),
    })
  }

  insertToDB(finalComponentStructure) {
    if (!finalComponentStructure) return;
    finalComponentStructure.author = 'Sandeep3005';
    Meteor.call('testDB.insert', finalComponentStructure);
  }


  _handleChange(editorState) {
    console.log('Inside handle change');
    let contentState = editorState.getCurrentContent();
    this.insertToDB({text: contentState.getPlainText()});
    this.setState({editorState});
  }

  render() {
    return (
      <div>
        <Editor
          placeholder="Insert YAML Here"
          editorState={this.state.editorState}
          onChange={this._handleChange.bind(this)}
        />
      </div>
    );
  }
}

    
    EditorComponent.propTypes = {
     staff: PropTypes.array.isRequired,
    };
    
    export default createContainer(() => {
      return {
        staff: Staff.find({}).fetch(),
      };
    }, EditorComponent);

Any helpful comment in right direction will be useful

Also find out that issue occurs if we right below code in handleChange method

let { editorState : olderState} = this.state; if(olderState == editorState ) return; this.setState({editorState Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js? Using DraftJs v 0.10

Source: facebookarchive/draft-js

View original on GitHub View discussion on GitHub