Problem/Motivation
Drupal's CKE5 integration for Drupal Media entities provide an API to declare extra element styles that can be added to a <drupal-media> element. For example, data attributes such as data-copyright:
mymodule_media_credits:
ckeditor5:
plugins:
- drupalMedia.DrupalElementStyle
config:
drupalElementStyles:
copyright:
- name: 'none'
title: 'Hide copyright'
isDefault: true
modelElements: [ 'drupalMedia' ]
icon: ''
- name: 'copyright'
title: 'Show copyright'
attributeName: 'data-copyright'
attributeValue: '1'
icon: ''
modelElements: ['drupalMedia']
This, coupled with adding toolbar items via drupalMedia, allows to easily add buttons to the balloon editor that change attributes on the drupal-media element. It is a great addition.
A problem is that, when the newer attributes are changed, a rerender of the media entity is oftentimes wanted or even needed to show the new state.
An example is core's media view_mode handling: when the media view mode is changed, the media is re-rendered. This is commonly used, for example, to switch between aspect ratios (1:1 to 16:9, etc), and is natural that a re-render is needed to keep the WYSIWYG experience.
Unfortunately, the drupalElementStyles lack a way for the developer to express that a rerender is needed for any new attribute, as the attributes are hardcoded on drupalmediaediting.js:
this.converterAttributes = [
'drupalMediaEntityUuid',
'drupalElementStyleViewMode',
'drupalMediaEntityType',
'drupalMediaAlt',
]
This was handled partially on
Allow other CKEditor 5 plugins to rerender drupal-media when their attribute changes →
, but the developer will still need to create a plugin in order to push the new attributes manually:
constructor(editor) {
super(editor);
// Manually access the plugin and alter the variable...
const mediaEditing = editor.plugins.get('DrupalMediaEditing');
mediaEditing.converterAttributes.push('drupalElementStyleMediaEmbedCode')
}
Oftentimes, this is the only change a developer will need to do (the rest will go on the yml file), so we end up having to create almost empty CKE5 plugins just for pushing new values to the original converterAttributes array.
Steps to reproduce
- Create a custom drupalElementStyle on a CKE5 plugin, see this guide for more info and help.
- Use the new drupalElementStyle on a way that will benefit from a re-render. For example, use it to add a CSS class that adds some styling to the media element.
- The media element won't be re-rendered, so there is no visual feedback of the changes applied.
Proposed resolution
Extend the drupalElementStyle API to provide a rerender (or similar) key:
mymodule_media_credits:
ckeditor5:
plugins:
- drupalMedia.DrupalElementStyle
config:
drupalElementStyles:
copyright:
- name: 'copyright'
title: 'Show copyright'
attributeName: 'data-copyright'
attributeValue: '1'
icon: ''
modelElements: ['drupalMedia']
rerender: true <---------------- ALLOW THE DEVELOPER TO INDICATE THAT THIS ATTRIBUTE VALUE WILL NBENEFIT FROM A RERENDER
Use the info from the existing plugins to locate the drupalElementStyles groupings that meet the following criteria:
- Affect the
drupalMedia model
- At least one of their values trigger a rerender
Once located, pass the attribute names alongside the others in order to trigger a rerender on every re-rendarable attribute change.
this.converterAttributes = [
'drupalMediaEntityUuid',
'drupalElementStyleViewMode',
'drupalMediaEntityType',
'drupalMediaAlt',
...contributedConverterAttributes
]
Remaining tasks
User interface changes
API changes
Data model changes
Release notes snippet