BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

Published 20 hours ago • verified publisher icon TypeCellOS

fix: position of side menu controllers in `rtl`

Open zaaakher opened this issue 1 year ago • 6 comments

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

Before

blocknote_rtl_before

After

blocknote_rtl_after

zaaakher avatar Jul 14 '24 03:07 zaaakher

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[bot] avatar Jul 14 '24 03:07 vercel[bot]

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

A member of the Team first needs to authorize it.

vercel[bot] avatar Jul 14 '24 03:07 vercel[bot]

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 avatar Jul 17 '24 09:07 YousefED

@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 https://github.com/TypeCellOS/BlockNote/blob/b20292a3bf7de955010900c7bc7e9e7244d6a30f/packages/react/src/hooks/useUIElementPositioning.ts#L51

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

blocknote_rtl_floating

zaaakher avatar Jul 17 '24 16:07 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 avatar Jul 17 '24 17:07 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 https://github.com/floating-ui/floating-ui/pull/2982#issuecomment-2234669030 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. 😅

zaaakher avatar Jul 17 '24 23:07 zaaakher