UX: Floating link editor: better positioning

[AlessioGr]

Old:

Arc.2023-03-20.at.04.08.57.mp4

New:

Arc.2023-03-20.at.04.10.24.mp4

The new floating link editor has the following benefits:

• Less distractions when writing, as it moves around in a more predictable way - always under the link. It doesn't move around when clicking on different positions in the link as seen in the old one. I found that to be pretty annoying and distracting
• The old one sometimes overlaps the link & positions itself incorrectly - as seen in the video. Very annoying! This does not happen with the new one anymore
• Even for longer selections, the floating link editor now positions itself correctly, directly under the link
• Simpler code & logic => better performance

This code also changes

let top = targetRect.top - floatingElemRect.height - verticalGap;

to

let top = targetRect.top - verticalGap;

in the setFloatingElemPosition.ts as that extra minus caused incorrect and non-predictable positioning. Instead of overriding the file, I created a new one, to avoid breaking anything which uses that.

I think the reason this was glitchy is that floatingElemRect.height does not have a height for the first click, but it does have a height for consecutive clicks, resulting in positioning inconsistency.

Having two almost identical setFloatingElemPosition files might be weird architecturally, so feel free to change this around if you have a better solution!

[vercel]

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

Name	Status	Preview	Comments	Updated
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 20, 2023 at 3:14AM (UTC)
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 20, 2023 at 3:14AM (UTC)

[thegreatercurve]

LGTM. Thanks for your contributions in help to fix the link popover @AlessioGr!

Does this fix #4155 as well?

[AlessioGr]

LGTM. Thanks for your contributions in help to fix the link popover @AlessioGr!

Does this fix #4155 as well?

I don't think it fixes that. The code I changed here doesn't even run when #4155 occurs