I created a custom button for image media in ckeditor5. This button does almost the same thing as the align-center button. It allows me to say that my image must be centered horizontally... and vertically.
My button works almost correctly. When I click on it the <drupal-media>
tag saves <drupal-media data-centered="center">
as expected.
My problem is that when I click on it, I can't unselect the option which remains permanentonce clicked !
Here is the code for my MY_MODULE.ckeditor5.yml file
media_centered:
provider: media
ckeditor5:
plugins:
- drupalMedia.DrupalElementStyle
config:
drupalElementStyles:
centered:
- name: "center"
title: "Centered Image"
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm0-2h16V6H4zm5-3h6q.425 0 .713-.288T16 14v-4q0-.425-.288-.712T15 9H9q-.425 0-.712.288T8 10v4q0 .425.288.713T9 15m-5 3V6z"/></svg>'
attributeName: "data-centered"
attributeValue: "center"
modelElements: ["drupalMedia"]
drupalMedia:
toolbar:
- "drupalElementStyle:centered:center"
drupal:
label: Media centered
library: ckeditor5/internal.drupal.ckeditor5.mediaAlign
elements:
- <drupal-media data-centered>
conditions:
filter: filter_align
plugins: [media_media]
Please tell me if my code is correct (Drupal documentation sucks) and how to deselect my custom option.