Ensure that CKEditor 5 toolbar always remains visible in dialog *and* renders below dialog title bar (if it exists)

Anyone have any ideas on this one yet? The bar is super unpredictable if you click around in and out of the editor in certain ways, the box appears.

Yeah that is some odd behavior.

I guess the behavior makes sense after reading _checkIfShouldBeSticky(). The editor needs focus, be scrolled beyond the view port, and the gotcha is that that calculation is triggered by the window scroll bar, not the dialog scroll bar.

I took a hard look at adding dialog support to StickyPanelView, but it seems tricky. The editor hasn't been attached when StickyPanelView runs. The text area is scrollable initially and once the editor is attached it makes the dialog scrollable. It's also weird trying to loop through the parents to determine if it's inside a scrollable div.

Can we just add our dialog support to the ckeditor5 module?

Custom commands...

I think this can be accomplished with just CSS. For example, this takes care of it in Claro:

.ui-dialog .ck-editor__top {
  position: sticky;
  top: -1rem;
}

I haven't checked other themes, but there's a chance the top: will need to be different as it will look best if it matches the padding of the dialog content area.

I think it would be an odd behavior to ignore the dialog scrollbar and only use the window scrollbar.

I'm not sure if #12 is a response to my proposed CSS solution, but it doesn't result in any ignoring of the dialog scrollbar.

Oh, well dang. Huh…

¯\_(ツ)_/¯

Nice!

love this

So … can we get #11 in patch form so I can RTBC this so a frontend framework manager can verify this?

IMHO test coverage is overkill when no logic is changed and 2 lines of declarative code (aka CSS) are added 👍 So removing the tag that I added in #2.

Sure thing. Thank you @bnjmnm! 🚀

oh hmm, actually something funky's going on with the focus now. Also, when did the editor area get its own scrollbar? That seems like a different approach to solve this too. Maybe we should not do a sticky toolbar at all and put a min-height on the editor area?

@Tim,

I have also experienced the issue with the focus within a Layout Builder modal.

It happens exactly as in your GIF sample.

The issue seems to be triggered because of the element with class `.ck-sticky-panel__content` that gets a new class `.ck-sticky-panel__content_sticky` when you focus on editor.

The problem is class `.ck-sticky-panel__content_sticky` carries `position: fixed; top: 0;`.

My quick solution for this is, on top of Greg's solution, applying this thing:

.ck-sticky-panel__content_sticky {
  position: absolute;
}

It looks like it's just being addressed upstream. 🤞🏼

It looks like it's been addressed upstream and has made its way into core.