Collision detection for Selector dropdowns

[steven-tey]

Currently, the Color and Node Selectors is unable to detect when it's near the bottom of the screen and has to be opened the other way round:

Using something like a Radix Popover could fix this:

CleanShot.2023-06-29.at.08.25.00.mp4

We'll also want to make sure to limit the height of the dropdown and add overflow-scroll depending on the screen height.

[abhijain1705]

absolutely agree, that last dropdown its dfficult to scroll webpage and read menu

would be helpful if we set fixed height and overflow: auto

Novel.Notion-style.WYSIWYG.editor.with.AI-powered.autocompletions.-.Google.Chrome.2023-06-29.22-24-42.mp4

can I work on this?

[abhijain1705]

is that repo is still active?

[steven-tey]

@abhijain1705 don't think a fixed height is the solution here, since you wouldn't know what position the bubble menu is initiated in the DOM and it might still collide with the screen boundaries

is that repo is still active?

Which repo are you referring to?

[abhijain1705]

then what can be best the solution here?
can we get current position of whole edit menu?

[steven-tey]

Converting the selector menu into a Radix popover primitive should fix this – though it might collide with some of the native Tiptap event listeners somehow

[abhijain1705]

it's like redeveloping the menu using Radix popover
correct me if I am wrong

[steven-tey]

Exactly!

[abhijain1705]

can I contribute to this?

[abhijain1705]

hey @steven-tey you might busy previously
can I contribute to this?

[steven-tey]

@abhijain1705 yes, of course! :)

[abhijain1705]

thanks