Problem/Motivation
CKEditor 5 uses tooltips named balloons to provide the configurable functionalities integrated with the editorial experience. For instance with adding a link, a sort of popup named balloon appear to let you configure the link.
This feature though is added of "canvas" in a div with the class ck-body-wrapper:
That result in the tooltip being missdisplayed (not visible at all) in CKEditor 5 within modals. Hence, the functionality not usable at all. This one, and all relying on those tooltips.
This is true for :
- CKEditor 5 used in textarea configured on views since views uses modals #2741187: Allow usage of WYSIWYG in views text area fields
- for people using Layout Paragraphs to build content
- for any textarea field in a form opened in modal mode
- for any other contrib or core module that would use textareas in modal and that I am not currently aware of
Steps to reproduce
You could apply / try patch here for instance, or use the layout paragraph module.
Proposed resolution
The modal is opened with a given z-index. For example in Seven it is z-index: 1260.
I suggest to apply the following CSS to the .ck-body-wrapper class :
position: fixed;
z-index: 1300;
However, with this trick, the input field still do not get the focus, which I don't know how to handle at the moment.