Dynamically instantiated CKEditor 5 instance's toolbar occludes Drupal's toolbar if it has focus and the form is part of paragraph

Odd, this was reported and fixed a very long time ago, in #3259380: CKEditor 5's toolbar occludes Drupal's toolbar if and only if CKEditor 5 has focus → ! What version of Drupal core are you using?

Another related issue: 🐛 Ensure that CKEditor 5 toolbar always remains visible in dialog *and* renders below dialog title bar (if it exists) Closed: outdated .

hi! I am using Drupal core 9.5.5

The issue you are linking to is indeed fixed, and if I use a content type that has for example the body field, that is on the page when the page loads, the issue does not happen.

This ticket is however about the cases there a field with ckeditor5 is not initially there when the page loads, because it is in a paragraph form field which is initially collapsed. When the paragraph "subform" is opened, then ckeditor appears, and my suspicion is that the fix added as part of #3259380 is unable to fix the issue in this different context.

Aha! Clarified scope, now it makes sense: it's a new edge case. Thanks 😊

Hi! So I reproduced this issue in Drupal 9.5.10, and in Drupal 10.1, under slightly different circumstances -- but I think the key detail is still valid: CKEditor isn't there when the page initially loads.

FYI: These steps are based on when I reproduced the issue in a plain DrupalPod workspace with Drupal 10.1 and the Umami install profile.

1. On a Drupal 9.5.10 or Drupal 10.1 site -- ...
2. Go to Text formats and editors: /en/admin/config/content/formats
3. Drag "Plain text" to the top of the list, so it'll be the default/active text format when you create a new node.
4. Create a new Basic page.
5. On the body field, switch the text format to "Basic HTML"
6. Put a ton of content in the body field, so the CKEditor field is taller than the viewport.
7. Behold: CKEditor toolbar is "on top of" the admin menu.

Attached: Screenshots of this behavior, in Drupal 10.1 and Drupal 9.5.10.
→ →

-------

@vermario Do you have the admin_toolbar module enabled? -- to be clear, I reproduced the issue we're talking about here with and without the admin_toolbar module. BUT, when CKEditor 5 is present when the page initially loads, I have another issue (maybe unrelated!!): The CKEditor 5 sticky toolbar obscures admin_toolbar drop-down menus ( example → ). Again, I really, really don't know if it's the same issue, but, just wondering if you happen to have that issue, too (if you have admin_toolbar).

I can confirm that changing the Text Format via the dropdown makes the ckeditor5 toolbar on 10.2.2. I'm attaching a gif of the behavior.

I've also shown in that gif that resizing the page or toggling the menu to the sidebar fixes the issue, so I tried to debug a little but the js is beyond me. The best I could understand is that the "drupalViewportOffsetChange" event is triggered by both of those things (resizing, swapping the admin toolbar orientation), but it must not be triggered when you swap editors. I also found that the top of the CKEditor toolbar is set using "editor.ui.viewportOffset" which is supposed to be at 79 but ends up being at 0 when you swap editors. So maybe something isn't being initialized correctly during editor swap?