TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.

https://www.blocknotejs.org/

Mozilla Public License 2.0

6.46k stars 440 forks source link

fix: UI element position on scroll #769

Closed matthewlipski closed 4 months ago

matthewlipski commented 4 months ago

This PR fixes UI elements like the formatting toolbar and side menu only scrolling with the editor when the whole page is being scrolled. Now, the elements scroll with the editor regardless of which containing element is being scrolled. Additionally, the side menu is now hidden on click after being frozen, to more closely replicate Notion's UX.

Closes #748

vercel[bot] commented 4 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Jun 4, 2024 5:00pm
blocknote-website	✅ Ready (Inspect)	Visit Preview	Jun 4, 2024 5:00pm

bensku commented 4 months ago

Not sure if I'm doing something wrong, but I can't get the side menu to open again in preview of this PR after I've closed it. Clicking or hovering over where it should be doesn't seem to work.

748 seems to be fixed, though.

matthewlipski commented 4 months ago

Thanks for testing @bensku !

Confirmed there's some bug here:

Fixed! Also I checked Notion and looks like their UX in general hides the side menu whenever the slash menu is open. We had this before only when using the add block button, but not when opening the slash menu using the "/" key, which made our own UX was kind of inconsistent. I made it so that opening the slash menu initially hides the side menu but moving the mouse shows it again (now the same for both pressing "/" key and add block button)

I think we can into making BlockNote's behaviour the same as Notions for this case (i.e. the side menu stays hidden while the slash menu is open), but that's a separate issue.