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
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:
- 3465020-ckeditor-5-overrides
changes, plain diff MR !14908
Comments
Comment #2
quietone commentedComment #5
dieterholvoet commentedComment #7
smustgrave commentedMay seem like overkill but think we need test coverage because of the sensitivity around ckeditor
Comment #9
scott_euser commentedThanks for this fix! I added test coverage in
Comment #10
nitinkumar_7 commentedtested 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
Comment #11
smustgrave commentedThanks @scott_euser feedback appears to be addressed
Comment #12
longwaveReclassifying 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!