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