How to stop DraftJS cursor jumping to beginning of text?
See original GitHub issueCode 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
Issue Analytics
- State:
- Created 6 years ago
- Reactions:11
- Comments:43 (2 by maintainers)
Top Results From Across the Web
How to stop DraftJS cursor jumping to beginning of text?
But problem is once data comes from DB and I try to edit DraftJS cursor moved to the beginning. Code is import {Editor,...
Read more >How to stop DraftJS cursor jumping to beginning of text?-Reactjs
Instead, it will just create a new empty selection in the first block of your new ContentState . To overcome this, you will...
Read more >When draft is auto-saved for the first time, cursor jumps/moves ...
Actual Results: cursor jumped to beginning of draft email. ... cursor jumps/moves to beginning of body text (first line, 1st character, position) ...
Read more >Build rich text editors in React using Draft.js and react-draft ...
EditorState provides a snapshot of the EditorState . This includes the undo/redo history, contents, and cursor. Let's add some code to display a ......
Read more >Cursor Location - Actions - Help & Questions - Drafts Community
If you want an action try “TAD-Jump to Start of Draft”. This works - I get it now about the code -. I'll...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This worked for me…
The root cause of my issue appears to have stemmed from how I was resetting the DraftJs content. I’m using DraftJS for a chat application. The first chat message was fine and didn’t exhibit the cursor jumping to the beginning but there was a high probability that any subsequent messages would have the cursor jump.
Before, I would reset the DraftJS content with the following:
What fixed it for me was moving to the following:
I found through some searching that if you need to clear the DraftJs content, it is recommended to perform a ‘createFromText’ rather than a ‘createEmpty’. The ‘createEmpty’ should only be used on initialization.
So my initial chat message uses the ‘createEmpty’ but all subsequent messages use the ‘createFromText’ to clear the content and reset the focus. Hope this helps.