Problem/Motivation

CKEditor plugins can define ways of opening a modal and the settings passed to them on init. For example:

ckeditor5:
    plugins: []
    config:
      drupalMedia:
        openDialog:
          func:
            name: Drupal.ckeditor5.openDialog
            invoke: false
        dialogSettings:
          classes:
            ui-dialog: media-library-widget-modal
          height: 75%

In cases like this though, autoResize and width are ignored:

        dialogSettings:
          height: 750
          width: 900
          autoResize: false
          dialogClass: ai-ckeditor-modal
          title: AI Assistant

In my case, I wanted the modal to open at 900px wide, regardless - but found that the modal always had width auto set.

That is due to how Drupal.ckeditor5 parses the settings. At the end, both autoResize and width are hardcoded, preventing developers from implementing custom values for them:

    openDialog(url, saveCallback, dialogSettings) {
      // Add a consistent dialog class.
      const classes = dialogSettings.dialogClass
        ? dialogSettings.dialogClass.split(' ')
        : [];
      classes.push('ui-dialog--narrow');
      dialogSettings.dialogClass = classes.join(' ');
      dialogSettings.autoResize =
        window.matchMedia('(min-width: 600px)').matches;
      dialogSettings.width = 'auto';

      const ckeditorAjaxDialog = Drupal.ajax({....

Proposed resolution

Allow developers to override width and autoResize if they want to, with something like:

      dialogSettings.dialogClass = classes.join(' ');

      if (typeof dialogSettings.autoResize !== 'undefined') {
        if (typeof dialogSettings.autoResize === 'string') {
          dialogSettings.autoResize = window.matchMedia('(' + dialogSettings.autoResize + ')').matches;
        }
      }

      dialogSettings.width = dialogSettings.width ?
        dialogSettings.width :
        dialogSettings.width = 'auto';

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

Issue fork drupal-3465020

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

kevinquillen created an issue. See original summary.

quietone’s picture

Version: 11.0.x-dev » 11.x-dev

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

dieterholvoet made their first commit to this issue’s fork.

dieterholvoet’s picture

Status: Active » Needs review

smustgrave’s picture

Status: Needs review » Needs work
Issue tags: +Needs tests

May seem like overkill but think we need test coverage because of the sensitivity around ckeditor

scott_euser made their first commit to this issue’s fork.

scott_euser’s picture

Status: Needs work » Needs review

Thanks for this fix! I added test coverage in

nitinkumar_7’s picture

tested MR and verified that:

Custom width values are applied correctly instead of always defaulting to auto.
autoResize can be explicitly configured by the plugin while preserving the existing default behavior when it is not provided.
Existing dialogs that do not define these settings continue to behave as before.

This makes the dialog API more flexible for CKEditor

smustgrave’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs tests

Thanks @scott_euser feedback appears to be addressed

longwave’s picture

Version: main » 11.x-dev
Category: Feature request » Bug report
Status: Reviewed & tested by the community » Fixed

Reclassifying this as a bug, this feels like something that should work but doesn't.

Backported to 11.x but not 11.4.x as this is a minor behaviour change, if someone already had this config in place and it wasn't working due to the overwrite.

Committed and pushed 9152c94f46a to main and 90b4a070332 to 11.x. Thanks!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

  • longwave committed 90b4a070 on 11.x
    fix: #3465020 CKEditor 5 overrides dialogSettings objects provided by...

  • longwave committed 9152c94f on main
    fix: #3465020 CKEditor 5 overrides dialogSettings objects provided by...