CKEditor 5 balloons invisible when CKEditor 5 is used inside a modal

Hi, I'm also experiencing this bug with paragraphs popup: the "add link" z-index needs to be greater than 1260.

Modern CSS can easily query forwards and backwards. When the initial, unobtrusive solution was

.ui-dialog ~ .ck-body-wrapper {
    --ck-z-modal: 1261;
}

than the opposite direction is also possible, with exaclty the same CSS specifity

.ck-body-wrapper :has(~ .ui-dialog) {
    --ck-z-modal: 1261;
}

All relevant browsers except Firefox support :has, and Firefox should support it within first half of 2023

PS: My merge request still suffers from the problem that mherchel mentioned in #9

I want to add that I'm facing this issue as well in another scenario.

I'm trying do add a link to a CKEditor that is inside a Layout Builder Modal

Clarifying issue title.

The patch in #9 works and displays the pop-up, but it does not allow typing in the input box.

I could type in the input box fine testing this out, perhaps you could provide steps to reproduce that @abhisekmazumdar?

@mherchel for #9 I could not reproduce in my scenario but perhaps could consider applying the z-index within :focus-within in some way here rather than a likely complicated CKE5/JS solution?

I can confirm the patch in #9 🐛 CKEditor 5 balloons invisible when CKEditor 5 is used inside a modal Needs work works for me and typing is possible. This patch also solves the following issue for me: https://www.drupal.org/project/drupal/issues/3351603 🐛 CKEditor 5 link broken in Dialog if another CKEditor exists Needs work

Patch in #9 is working for us.

MR !4288 introduced in #16 works. Thank you very much. Didn't rty #9.

Patch #16 works for me. Now the link pop-up is showing over a modal layout paragraph.

Latest MR is working for me.