CKEditor 5 overrides dialogSettings objects provided by CKEditor plugins

Created on 31 July 2024, about 2 months ago

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

Feature request
Status

Active

Version

11.0 🔥

Component
CKEditor 5 

Last updated about 13 hours ago

Created by

🇺🇸United States kevinquillen

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024