Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix tippy -> floatingui #483

Closed
wants to merge 27 commits into from
Closed

fix tippy -> floatingui #483

wants to merge 27 commits into from

Conversation

YousefED
Copy link
Collaborator

continue of #306

(currently branched of playground, might not be ideal)

Copy link

vercel bot commented Dec 19, 2023

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

Name Status Preview Updated (UTC)
blocknote ❌ Failed (Inspect) Jan 5, 2024 4:09pm
blocknote-website ❌ Failed (Inspect) Jan 5, 2024 4:09pm

Copy link
Collaborator

@matthewlipski matthewlipski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! I think the default offsets for Floating UI are a bit smaller than Tippy, so might be worth adjusting those if we don't want to update all the screenshots. Aside from that, left a few other comments. Also ig the Table Handles are still TODO

@@ -32,6 +33,14 @@ export const ImageToolbarPositioner = <

const referencePos = useRef<DOMRect>();

const { refs, update, context, floatingStyles } = useFloating({
open: show,
placement: "left",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be "bottom"

},
],
};
// TODO: anything from below needed?
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just to ensure the side menu doesn't change position if it overflows. In Floating UI I think the way to do this is to just omit flip() from the middleware.

},
[referencePos.current] // eslint-disable-line
);
// const { ref, updateMaxHeight } = usePreventMenuOverflow(); // TODO, needed?
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is indeed still needed - it's basically a fallback for handling overflow. Normally, if there's no space to render the menu in the default "bottom" position, it will get flipped to the top. But if the viewport itself is too small to see the whole menu, this hook constrains the height of the menu to fit in the viewport.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants