React-Draft-Wysiwyg: Autoscroll on new line

Question

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.

score 0 · Answer 1 · answered Oct 21 '21 at 12:50

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

score 0 · Answer 2 · edited May 25 '23 at 20:41

0

Just move your dynamic import to outside of all your components.

edited May 25 '23 at 20:41

starball

20,030
7
43
238

answered May 25 '23 at 19:00

Kassio Gluten

11
1

Answer needs supporting information Your answer could be improved with additional supporting information. Please [edit](https://stackoverflow.com/posts/76335478/edit) to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](https://stackoverflow.com/help/how-to-answer). – moken May 26 '23 at 12:41

score -1 · Answer 3 · answered Sep 21 '20 at 15:59

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

React-Draft-Wysiwyg: Autoscroll on new line

3 Answers3