Custom property with CKEditor 5 in Drupal 10

76 Views Asked by At

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.

0

There are 0 best solutions below