.ck-balloon-panel (link balloon, media balloon …) not visible for CKE5 instances in a Drupal dialog

While attempting to build out a test and reproduction branch, I found that the link input field is actually generated, but it's behind the dialog. setting the element `.ck-balloon-panel` to a large z-index brought the element back into view.

Setting to needs review to trigger tests

Build failure in #3

If you were trying to trigger the tests you can click Add test/ retest below the patch to manually trigger.

added updated patch and fixed CCF #3

Same here, the problem also occurs when using CKEditor5 inside a paragraph overlay using layout_paragraphs module.

The same environment with the same settings inside a normal "article" (without additional modules) is working.

A client just reported this problem to us as well. Has anyone had any success with a patch?

I just added a little css to my CKEditor5 stylesheet which solved it for me.

.ck.ck-balloon-panel {
  z-index: 1300 !important;
}

I ran into the same thing and #9 helped me.

#7 mentions Paragraphs. In my case I was editing a node and not using Paragraphs.

1. Can you please upload a failing test-only patch + passing test+fix patch?
2. Any chance 🐛 [CKEditor5] Missing dependency on drupal.ajax Fixed already fixed this? 😅
3. What's the actual bugfix in the patch? I only see changes in the dialog?
4. The test does not seem to test what the issue title says?

#9 did the trick. It resolved an issue with Linkit and Media. Thanks.

Hi,

I have quite the same issue, add link does not show the balloon, but media dialog replaces the the current dialog. Here is the setup :

A custom CKE5 plugin call the node add form to create a node within a CKE5 field :

As soon as I tried to use media plugin to insert a media, the media dialog replace the current dialog (which is the node creation form), this I am not able to insert the media since the form is closed.

I tried both CSS and the dialog dependency fix but I think the issue is more like the plugin does not see the "child" CKE5 in the form but only the "parent" one in the layout builder.

I am not sure if there are other exemples with multiple layers of CKE5 editors ?

Regards,

Confirming #9 worked, I used asset injector to apply CSS to the Claro theme. Not ideal but it did the job.

For me, this was only an issue in paragraphs and in my case layout paragraphs.

Similar to #14. I ended up inserting some CSS via a custom module that seemed to work fine. Quick and simple.

I found that inserting links into e.g. paragraph library items was fine, however inserting them into a rich text paragraph inside layout paragraphs did not display the popup.

The patch in this issue: https://www.drupal.org/project/drupal/issues/3328425#comment-14845336 🐛 CKEditor 5 balloons invisible when CKEditor 5 is used inside a modal Needs work
Works for me.

Confirming #14 and #15: same scenario (ckeditor5 with layout paragraphs); patch in #9 works.

In my case: I subthemed Claro and added the z-index style rule.

We ended up using the patch here: https://www.drupal.org/project/drupal/issues/3328425#comment-14845336 🐛 CKEditor 5 balloons invisible when CKEditor 5 is used inside a modal Needs work

Comment 9 helped me, I decided to make a patch for those who will be looking for a quick fix.

Sorry for the previous comment, the patch is not quite correct for the core. This one should work.

Great to see so many confirmations that #9 worked!

But … #9 is a comment, not a MR. And #9 is actually the same as #6 in terms of actual changes. This will not get fixed until there's a MR … and I see some names in here that I know could help make this happen! 🤓

This issue needs an MR with a test. #6 contained an imperfect test (see my review in #11) but it's a starting point nonetheless.

Created MR for the aforementioned requirement for 11.x

Thanks for reroll but was previously tagged for issue summary and tests which still appear to be needed.

Tooltips were appearing beneath the balloons:

...so I added an additional override for them. Also added a comment.

I can confirm the MR from #26 is working fro me. I have rerolled it as a patch for D10.2

Reroll for 10.3.x

I have chosen to use the patch from the merge request here: https://www.drupal.org/project/drupal/issues/3328425 🐛 CKEditor 5 balloons invisible when CKEditor 5 is used inside a modal Needs work

Setting the z-index too high will make the balloon overlap any dialog that is opened from the balloon (e.g. when using the linkit_media_library module).

Attempt to Reproduce CKEditor 5 Modal Issue in Drupal 10

Objective

The goal was to reproduce an issue where CKEditor 5 does not work correctly when opened in a modal dialog within a Drupal 9 or Drupal 10 environment. Specifically, we wanted to verify whether the link button in CKEditor 5 would malfunction inside a modal while working fine in a standard form.

Environment
Drupal Version: Drupal 10
Module: CKEditor 5
Testing Module: CKEditor5 Test Module (core testing module)

Step 1: Set Up a Fresh Drupal Installation
Installed Drupal 10 on a local environment.
Configured the standard profile during installation.

Step 2: Enable CKEditor 5 Module
Navigated to the Extend page in Drupal’s admin panel.

Searched for "CKEditor 5" and enabled the module.

Alternatively, we could have used Drush:

drush en ckeditor5 -y

Step 3: Modify the settings.php File
Added the following line to the settings.php file to enable scanning for test modules:

$settings['extension_discovery_scan_tests'] = TRUE;

Step 4: Enable CKEditor 5 Test Module
i enabled the CKEditor 5 test module to simplify testing.

The module was enabled via the Extend page:

Searched for "CKEditor5 Test" and enabled the module.
Or via Drush:

drush en ckeditor5_test -y

Step 5: Modify CKEditor5DialogTestController.php
We modified the CKEditor5DialogTestController.php to include CKEditor 5 in a form as well as in a modal dialog.

The updated code for CKEditor5DialogTestController.php is as follows:

<?php

declare(strict_types = 1);

namespace Drupal\ckeditor5_test\Controller;

use Drupal\Component\Serialization\Json;
use Drupal\Core\Url;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * Provides controller for testing CKEditor in off-canvas dialogs.
 */
class CKEditor5DialogTestController extends FormBase {

  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'ckeditor5_dialog_test_form';
  }

  /**
   * Returns a page with CKEditor and a link to open a node add form in a modal dialog.
   *
   * @return array
   *   A render array.
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    // Add a CKEditor field to the form.
    $form['editor'] = [
      '#type' => 'text_format',
      '#title' => $this->t('Main CKEditor'),
      '#format' => 'ckeditor5',
      '#default_value' => '',
    ];

    // Add a link to open a modal dialog with another CKEditor field.
    $form['link'] = $this->testDialog();

    // Submit button.
    $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Submit'),
    ];

    return $form;
  }

  /**
   * Returns a link that can open a node add form in a modal dialog.
   *
   * @return array
   *   A render array.
   */
  public function testDialog() {
    // Create a link that triggers the modal.
    $build['link'] = [
      '#type' => 'link',
      '#title' => 'Add Node',
      '#url' => Url::fromRoute('node.add', ['node_type' => 'page']),
      '#attributes' => [
        'class' => ['use-ajax'],
        'data-dialog-type' => 'dialog',
        'data-dialog-options' => Json::encode([
          'width' => 700,
          'modal' => TRUE,
          'autoResize' => TRUE,
        ]),
      ],
    ];

    // Attach necessary AJAX and modal libraries.
    $build['#attached']['library'][] = 'core/drupal.dialog.ajax';

    return $build;
  }

  /**
   * Form submission handler.
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    drupal_set_message($this->t('Form submitted with CKEditor content!'));
  }

}

Step 6: Update the Route for the Controller
We ensured the route YAML file was updated to reflect the correct controller and form.

The route file (ckeditor5_test.routing.yml) had the following configuration:

ckeditor5_test.dialog:
path: '/ckeditor5_test/dialog'
defaults:
_form: '\Drupal\ckeditor5_test\Controller\CKEditor5DialogTestController'
_title: 'CKEditor 5 Dialog Test'
requirements:
_permission: 'access content'

Step 7: Test the CKEditor 5 Functionality
Access the Test Page:

Visited the route /ckeditor5_test/dialog in the browser to load the form with CKEditor 5 and the modal link.
Test CKEditor in the Main Form:

Verified that CKEditor 5 was working properly in the form.
Used the link button in CKEditor and found no issues.

Test CKEditor in the Modal:

Clicked on the "Add Node" link to open a node add form in the modal dialog.
Verified that CKEditor 5 was initialized in the modal as expected.
Tested the link button and other CKEditor functionalities, and found that they all worked correctly.

Step 8: Conclusion
Despite following the steps and conditions that were believed to reproduce the CKEditor 5 issue in modal dialogs, no issues were observed. The CKEditor 5 instance worked properly both in the main form and in the modal dialog, including the link button functionality.

The issue was not reproducible in our Drupal 10 setup.

MR appears to have failures and was previously tagged for tests.

Hi, I updated the CKEditor5DialogTest to ensure the CKEditor 5 balloon panel is properly positioned above the modal. Kindly please review the changes and let me know your suggestions.
Thanks!

Added a couple of comments, is the !important necessary with the selectors as they are?