scorelab / Codelabz

Codelabz
Apache License 2.0
144 stars 410 forks source link

[ Fix : Inconsistent Page Scrolling Behavior When Typing in Quill Editor ] #1171

Closed rohitPandey469 closed 5 months ago

rohitPandey469 commented 7 months ago

Describe the bug When typing in the Quill editor component, the page scrolls to the top, and then without scrolling if again typed something then it scrolls back down to the bottom then again top . So, its like when the user kept on typing without scrolling or anything the screen goes UP and DOWN and finally stays at the top. Might it be because of updating the firebase doc each time the text gets updated in the editor so we can counter it by debounce or throttle the YJS document. And I have discussed about implementing something similar in issue #1131.

To Reproduce Steps to reproduce the behavior:

  1. Create a new tutorial.
  2. Start typing in the editor.
  3. Observe the page scrolling to the top.
  4. Well it's happening whenever you type something so to see it type until it scrolls to the bottom or lot's of text.

Expected behavior Typing in the Quill editor should not cause the page to scroll unexpectedly. The editor should maintain the scroll position wherever we are typing and don't get scrolled on it's own.

Video

https://github.com/scorelab/Codelabz/assets/123815256/42894bcf-0f0c-4cca-bc72-cb22f2e44b5a

When I type something it scrolls to the top and here I kept on typing without scrolling and it goes like to the top and then bottom and then stays at top.

Desktop (please complete the following information):

Additional context The issue could be related to doc update on each text update so we can use npm packages to debounce the yjs or manually do it. Or some unintentional re-renders because of useEffect.

github-actions[bot] commented 6 months ago

This issue is stale because it has been open for 30 days with no activity.

github-actions[bot] commented 5 months ago

This issue was closed because it has been inactive for 14 days since being marked as stale.