fix(lexical-playground): two issues with scrolling-related scenarios

[LuciNyan]

Description

Adjusted the container when using createPortal so that the component and contentEditable are under the same parent element(anchor element) with position: relative (which also needs to be the scrolled element). The advantage of this is that we don't need to manually adjust the positioning when scrolling occurs.

Added the generic method setFloatingElemPosition to calculate positioning.

A more detailed description is here #2725.

The changes include:

• CodeActionPlugin
• FloatingLinkEditorPlugin
• FloatingTextFormatToolbarPlugin
• TableActionMenuPlugin

2022-07-28.14.21.35.mov

2022-08-06.15.53.11.mov

Close: #2725

[vercel]

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

Name	Status	Preview	Updated
lexical	✅ Ready (Inspect)	Visit Preview	Aug 13, 2022 at 3:42AM (UTC)
lexical-playground	✅ Ready (Inspect)	Visit Preview	Aug 13, 2022 at 3:42AM (UTC)

[zurfyx]

I like your proposal! There's a few ways of solving the toolbar visibility problem. Admittedly, it's easier on full-page documents since the bar on top is a heavily tested pattern and can be implemented easily. For reference, we use a flex layout on our internal playground:

My greatest concern about your proposal is that we'll lose coverage on the reconciler bit that computes the scroll position. Currently, this playground is the only one that handles scroll at a window level and having a scrollable means that we wouldn't test that bit anymore (perhaps in no big deal?). For reference: https://github.com/facebook/lexical/blob/main/packages/lexical/src/LexicalUtils.ts#L1131

I wonder what other folks think about this: @fantactuka @thegreatercurve @acywatson @tylerjbainbridge

[acywatson]

I like your proposal! There's a few ways of solving the toolbar visibility problem. Admittedly, it's easier on full-page documents since the bar on top is a heavily tested pattern and can be implemented easily. For reference, we use a flex layout on our internal playground:

My greatest concern about your proposal is that we'll lose coverage on the reconciler bit that computes the scroll position. Currently, this playground is the only one that handles scroll at a window level and having a scrollable means that we wouldn't test that bit anymore (perhaps in no big deal?). For reference: https://github.com/facebook/lexical/blob/main/packages/lexical/src/LexicalUtils.ts#L1131

I wonder what other folks think about this: @fantactuka @thegreatercurve @acywatson @tylerjbainbridge

So you're point is that we would lose test coverage for the window-level scroll scenario, but I don't understand how that's related to the reconciler. Are you saying that we're indirectly testing Selection reconciliation through this scenario?

Generally, I'm ok with this approach. I think it makes sense for the way the editor works in the playground. I want to better understand the point @zurfyx is making though - I guess I could see long-form editors using window scroll + floating toolbars.

[LuciNyan]

Hi @acywatson. It have been rebased.