Scroll bar jumps element editing off the screen

[thedarkamendez]

Description

When modifying block quotes, and editing the document by following the instructions in the reproduction steps, the editor scroll ups to the top 25% of the document and moves whatever you were editing before off the screen. Take a look at the video to see the reproduction of the bug:
https://github.com/user-attachments/assets/ba076549-9122-46f6-a729-93c5122d325f

Here are the steps to reproduce:

1. Go to https://platejs.org/editors
2. Scroll down to 'A Notion-like AI template'
3. Then scroll down to the block quote at the bottom of that editor.
4. In the middle of the sentence, hit enter once, then move the cursor back up to the point where you hit enter before and hit enter again.
5. You should see the editor scroll to the top 25% of the document leaving the content you were editing off the screen.

Note: simply hitting enter twice does not reproduce the issue. You have to go to the middle of a sentence, call this Point A, then hit enter. Then go back up to Point A and hit enter again.

Additional Note: I was able to reproduce this bug on both Linux and Mac but haven't tried Windows.
Additional Note: I noticed that this issue occurs when the editor is bounded by a div that is smaller than the height of the contents of the editor. So as long as we have something like:

// bounded editor (constraint on the height of the viewport of the editor)
<div className='w-full h-[calc(100vh-40px)] overflow-hidden'>
    <PLATE EDITOR HERE/>
</div>

// unbounded editor (no constraint on height of the viewport of editor)
<div className='w-full h-full overflow-hidden'>
    <PLATE EDITOR HERE/>
</div>

Reproduction URL

https://platejs.org/editors

Reproduction steps

1. Go to https://platejs.org/editors
3. Scroll down to 'A Notion-like AI template'
4. Then scroll down to the block quote at the bottom of that editor.
5. In the middle of the sentence, hit enter once, then move the cursor back up to the point where you hit enter before and hit enter again.
6. You should see the editor scroll to the top 25% of the document leaving the content you were editing off the screen.

**Note**: simply hitting enter twice does not reproduce the issue. You have to go to the middle of a sentence, call this Point A, then hit enter. Then go back up to Point A and hit enter again.

Plate version

46.0.0 to current

Slate React version

0.112.0+

Screenshots

Logs

Browsers

Chrome

[dosubot]

Hi @thedarkamendez! I'm Dosu and I’m helping the plate team.

This scroll jump bug in bounded editors is not documented as a known issue in Plate, but similar scroll problems have been reported, especially in Chrome, and may be rooted in Slate's editable component (related issue). Plate recommends using useEditorScrollRef() or useEditorContainerRef() on your scroll container to help manage scroll behavior (docs). For more control, you can configure the BlockSelectionPlugin with areaOptions—set your scroll container's id and position: relative, then pass those to boundaries and container (docs).

If you still see the bug after these changes, it’s likely a deeper issue in Slate’s selection/scroll logic. You can track progress or add details in the Slate issue.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[thedarkamendez]

Here is another (more functional) demo that is editing text inside a block quote which is causing the editor to jump around a lot every time we create a new line or even delete the content: https://github.com/user-attachments/assets/37a77572-300b-4cb0-8e86-95137be41b31

[dosubot]

Thanks for sharing the new demo—it confirms the scroll jump is reproducible and not isolated to your earlier steps. This behavior comes from how Plate manages scroll-to-selection: the scroll logic is generic and not tailored to block quotes, so when editing inside a bounded container, the default scroll-into-view can cause abrupt jumps, especially during line creation or deletion. There isn’t a block-quote-specific workaround, but you can sometimes tune the experience by making sure you use useEditorScrollRef or useEditorContainerRef on your scroll container, and by experimenting with scrollOptions (like scrollMode) in your Plate setup. The root cause is in the general scroll/selection logic, which is managed by Slate and Plate’s DOM plugin, not by block type—so a full fix may require changes upstream in Slate. If you notice any patterns in the new demo that seem different from the original bug, let me know—those details could help narrow things down. For more on how scroll is managed, see Plate's scroll management logic.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[Damon0820]

I encountered a similar issue. I noticed a pattern — whenever I press Shift + Enter, the scrollbar scrolls up by a certain amount. The same behavior can be reproduced in the 'A Notion-like AI template' playground （https://platejs.org/editors）.

[TrySpace]

I have the same issue and on mobile it's even more apparent