fix: position of side menu controllers in rtl

[zaaakher]

This PR simply makes the side menu buttons to be in the correct position when layout is RTL.

Before

After

[vercel]

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

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Jul 14, 2024 4:02am

[vercel]

@zaaakher is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[YousefED]

Thanks for your PR @zaaakher.

I'm curious about the root cause of this. If you set dir="rtl" on the html or container, I would expet Floating UI to automatically flip directions.

According to the docs: (https://floating-ui.com/docs/usefloating#placement)

The -start and -end alignments are
logical
and will adapt to the writing direction (e.g. RTL) as expected.

Could it be the root cause of this issue is somewhere else?

[YousefED]

(see comment above)

[zaaakher]

@YousefED you're right, it should ideally adapt to RTL without explicit dir prop or any prop-drilling.

After a little digging, it seems that the floatingStyles coming from the useFloating hook is the one preventing -start from being dynamic with the layout direction.

When I comment out this line

BlockNote/packages/react/src/hooks/useUIElementPositioning.ts

Line 51 in b20292a

...floatingStyles,

The -start positioning works fine (but the fixed/absolute positioning breaks)

[zaaakher]

Digging into the source-code of floating-ui, I think this is the root cause of the issue:
https://github.com/floating-ui/floating-ui/blob/cea9065811ff347cfe388720b3cc91165c8cebe7/packages/react-dom/src/useFloating.ts#L159

I think it should be inset-inline-start

[zaaakher]

It seems that floatingStyles.transform is the one positioning it and not left/insetInlineStart as I thought.

Based on the response from floating-ui here floating-ui/floating-ui#2982 (comment) it seems the expected automatic direction flip based on dir layout isn't yet supported natively in floating-ui.

Other than the minor prop-drilling suggested in this PR, I can't honestly think of an alternative way to do it. 😅