fix: Scrolling responsiveness & UI element overflow

[matthewlipski]

Right now, every time we scroll, each uiElement is re-rendered. In general, I do think we want to leave the responsibility of figuring out when to render/hide uiElements completely up to BlockNote, Tippy has it's own listeners to figure out when it should update its position. Trying to re-render the whole component on scroll instead of letting Tippy sort it out itself leads to some issues, namely overflow handling and bad responsiveness.

https://discord.com/channels/928190961455087667/1015169282444894219/1120228729600348181
https://discord.com/channels/928190961455087667/1015169282444894219/1120355999828680795

[vercel]

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

Name	Status	Preview	Updated (UTC)
blocknote-website	✅ Ready (Inspect)	Visit Preview	Jul 4, 2023 3:09pm

[YousefED]

Trying to understand why this works;

The theory is that Tippy calls getReferenceRect() at the "right" moment, and that previously the data that we return to getReferenceRect can be outdated?

To understand it:

• what are the scenarios where the data passed was outdated?
• at which moments does tippy call getReferenceRect that fixes the issues?

Are we only talking about onScroll? and does Tippy attach it's own listeners to window?

[matthewlipski]

Trying to understand why this works;

The theory is that Tippy calls getReferenceRect() at the "right" moment, and that previously the data that we return to getReferenceRect can be outdated?

To understand it:

• what are the scenarios where the data passed was outdated?
• at which moments does tippy call getReferenceRect that fixes the issues?

Are we only talking about onScroll? and does Tippy attach it's own listeners to window?

I think the issue wasn't necessarily due to outdated data, moreso that the entire component was being re-rendered on scroll. This would explain why you couldn't scroll down to see it if it was overflowing (since each scroll event would render a new component) and ofc why it wasn't as responsive.

I'm not 100% sure how Tippy's getReferenceClientRect works, but it must have its own listeners as it can figure out when to update the popup's position on its own, you just have to provide the function which gets the current reference element position. According to Tippy docs, this should happen whenever the reference element moves, including on scroll.

[YousefED]

do we still need prevDynamicParams even if the getBoundingclientRect is now always available?

[matthewlipski]

Yeah we do, at least for the side menu and slash menus, since they need dynamic params to render as they fade out. Otherwise the side menu throws an error while the drag handle menu is open, and the slash menu renders with no items. Maybe these could be cached like the menu position is, though I feel like that's a bit beyond the scope of this PR.