How can I make editor's input to scroll down automatically on new line input? Like in example 6 at https://jpuri.github.io/react-draft-wysiwyg/#/demo. Now scroll stays on top and text cursor hides when goes below bottom border.
2 Answers
I'm struggling with this problem too, at the moment. This is what I achieved right now
const scrollDiv = document.querySelector('.my_editor_class')
scrollDiv.scrollTop = scrollDiv.scrollHeight
With this you can make the scroll bar follow the text-cursor as you input the new line. But keep in mind the fact that if the text-cursor is not in the last visible area of the editor, and hit the Enter button, the scroll bar will scroll to the end... very bad user experience.
What you can do is create an algorithm to adjust position depending on the position your text cursor focus. At least, that's what came to my mind. Waiting for suggestions :)
See also this github issue
div.DraftEditor-root {
border: 1px solid #C0C0C0;
height: 200px;
width: auto;
overflow-y: auto;
}
div.DraftEditor-editorContainer,
div.public-DraftEditor-content {
height: 100%;
}
you can find the detailed answer here https://dev.to/tumee/how-to-style-draft-js-editor-3da2
Related