fix: UI element position on scroll

[matthewlipski]

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]

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]

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.

[YousefED]

Thanks for testing @bensku !

Confirmed there's some bug here:

[matthewlipski]

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.