Issue #3310328 by Dave Reid, immaculatexavier, idiaz.roncero: Only allow SVGs...

Issue #3310328 by Dave Reid, immaculatexavier, idiaz.roncero: Only allow SVGs for button icons when CKEditor5 is installed.

config/schema/embed.schema.yml

@@ -31,13 +31,13 @@ embed.button.*:
       label: 'Image icon data'
       mapping:
         uri:
-          type: string
+          type: uri
           label: 'Image file URI'
         data:
           type: string
           label: 'Base-64 encoded image contents'
     icon_uuid:
-      type: string
+      type: uuid
       label: 'Deprecated icon image file entity UUID'
 
 embed.embed_type_settings.*:

embed.install

@@ -5,10 +5,46 @@
  * Install, update and uninstall functions for the embed module.
  */
 
+/**
+ * Implements hook_requirements().
+ */
+function embed_requirements($phase): array {
+  $requirements = [];
+
+  if ($phase === 'runtime') {
+    // Since CKEditor5 is installed, perform a check for any icons that are not SVG files.
+    if (\Drupal::moduleHandler()->moduleExists('ckeditor5')) {
+      $button_icons_not_svg = [];
+      /** @var \Drupal\embed\Entity\EmbedButton[] $buttons */
+      $buttons = \Drupal::entityTypeManager()->getStorage('embed_button')->loadMultiple();
+      foreach ($buttons as $button) {
+        $icon = $button->getIconUrl();
+        if (\Drupal::service('file.mime_type.guesser')->guessMimeType($icon) !== 'image/svg+xml') {
+          $label = $button->label() . ': ' . $icon;
+          $button_icons_not_svg[] = $button->toLink($label, 'edit-form');
+        }
+      }
+      if (!empty($button_icons_not_svg)) {
+        $requirements['embed_buttons_ckeditor5'] = [
+          'title' => t('Embed button CKEditor5 compatiblity'),
+          'value' => t('The following embed button(s) are not using SVG icons and will not be compatible with CKEditor5'),
+          'description' => [
+            '#theme' => 'item_list',
+            '#items' => $button_icons_not_svg,
+          ],
+          'severity' => REQUIREMENT_ERROR,
+        ];
+      }
+    }
+  }
+
+  return $requirements;
+}
+
 /**
  * Moved to embed_post_update_convert_encoded_icon_data().
  */
-function embed_update_8101() {
+function embed_update_8101(): void {
   // This update function has been moved to
   // embed_post_update_convert_encoded_icon_data().
 }

src/EmbedButtonListBuilder.php

@@ -37,6 +37,8 @@ class EmbedButtonListBuilder extends ConfigEntityListBuilder {
         '#theme' => 'image',
         '#uri' => $icon_url,
         '#alt' => $this->t('Icon for the @label button.', ['@label' => $entity->label()]),
+        '#height' => 32,
+        '#width' => 32,
       ];
     }
     else {

src/Form/EmbedButtonForm.php

@@ -5,10 +5,10 @@ namespace Drupal\embed\Form;
 use Drupal\Component\Plugin\Exception\PluginNotFoundException;
 use Drupal\Core\Ajax\AjaxResponse;
 use Drupal\Core\Ajax\ReplaceCommand;
-use Drupal\Core\Config\ConfigFactoryInterface;
 use Drupal\Core\Entity\EntityForm;
 use Drupal\Core\Entity\EntityTypeInterface;
 use Drupal\Core\Entity\EntityTypeManagerInterface;
+use Drupal\Core\Extension\ModuleHandlerInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\embed\EmbedType\EmbedTypeManager;
 use Drupal\embed\Entity\EmbedButton;
@@ -19,13 +19,6 @@ use Symfony\Component\DependencyInjection\ContainerInterface;
  */
 class EmbedButtonForm extends EntityForm {
 
-  /**
-   * The entity type manager service.
-   *
-   * @var \Drupal\Core\Entity\EntityTypeManagerInterface
-   */
-  protected $entityTypeManager;
-
   /**
    * The embed type plugin manager.
    *
@@ -36,17 +29,17 @@ class EmbedButtonForm extends EntityForm {
   /**
    * Constructs a new EmbedButtonForm.
    *
+   * @param \Drupal\Core\Extension\ModuleHandlerInterface $module_handler
+   *   The module handler.
    * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entity_type_manager
    *   The entity type manager service.
    * @param \Drupal\embed\EmbedType\EmbedTypeManager $embed_type_manager
    *   The embed type plugin manager.
-   * @param \Drupal\Core\Config\ConfigFactoryInterface $config_factory
-   *   The config factory.
    */
-  public function __construct(EntityTypeManagerInterface $entity_type_manager, EmbedTypeManager $embed_type_manager, ConfigFactoryInterface $config_factory) {
-    $this->entityTypeManager = $entity_type_manager;
+  public function __construct(ModuleHandlerInterface $module_handler, EntityTypeManagerInterface $entity_type_manager, EmbedTypeManager $embed_type_manager) {
+    $this->setModuleHandler($module_handler);
+    $this->setEntityTypeManager($entity_type_manager);
     $this->embedTypeManager = $embed_type_manager;
-    $this->configFactory = $config_factory;
   }
 
   /**
@@ -54,9 +47,9 @@ class EmbedButtonForm extends EntityForm {
    */
   public static function create(ContainerInterface $container) {
     return new static(
+      $container->get('module_handler'),
       $container->get('entity_type.manager'),
-      $container->get('plugin.manager.embed.type'),
-      $container->get('config.factory')
+      $container->get('plugin.manager.embed.type')
     );
   }
 
@@ -141,7 +134,7 @@ class EmbedButtonForm extends EntityForm {
       $form['icon_reset'] = [
         '#type' => 'checkbox',
         '#title' => $this->t('Reset to default icon'),
-        '#access' => $button->getIconUrl() !== $button->getTypePlugin()->getDefaultIconUrl(),
+        '#access' => !empty($button->icon),
       ];
 
       $form['icon_preview'] = [
@@ -152,10 +145,18 @@ class EmbedButtonForm extends EntityForm {
         '#theme' => 'image',
         '#uri' => $button->getIconUrl(),
         '#alt' => $this->t('Preview of @label button icon', ['@label' => $button->label()]),
+        '#height' => 32,
+        '#width' => 32,
       ];
 
-      // Show an even nicer preview with CKEditor being used.
-      if ($this->moduleHandler->moduleExists('ckeditor')) {
+      if ($this->moduleHandler->moduleExists('ckeditor5')) {
+        // CKEditor5 only supports SVG icons.
+        $form['icon_file']['#upload_validators'] = [
+          'file_validate_extensions' => ['svg'],
+        ];
+      }
+      elseif ($this->moduleHandler->moduleExists('ckeditor')) {
+        // Show an even nicer preview with CKEditor being used.
         $form['icon_preview']['image']['#prefix'] = '<div data-toolbar="active" role="form" class="ckeditor-toolbar ckeditor-toolbar-active clearfix"><ul class="ckeditor-active-toolbar-configuration" role="presentation" aria-label="CKEditor toolbar and button configuration."><li class="ckeditor-row" role="group" aria-labelledby="ckeditor-active-toolbar"><ul class="ckeditor-toolbar-groups clearfix js-sortable"><li class="ckeditor-toolbar-group" role="presentation" data-drupal-ckeditor-type="group" data-drupal-ckeditor-toolbar-group-name="Embed button icon preview" tabindex="0"><h3 class="ckeditor-toolbar-group-name" id="ckeditor-toolbar-group-aria-label-for-formatting">Embed button icon preview</h3><ul class="ckeditor-buttons ckeditor-toolbar-group-buttons js-sortable" role="toolbar" data-drupal-ckeditor-button-sorting="target" aria-labelledby="ckeditor-toolbar-group-aria-label-for-formatting"><li data-drupal-ckeditor-button-name="Bold" class="ckeditor-button"><a href="#" role="button" title="' . $button->label() . '" aria-label="' . $button->label() . '"><span class="cke_button_icon">';
         $form['icon_preview']['image']['#suffix'] = '</span></a></li></ul></li></ul></div>';
         $form['icon_preview']['#attached']['library'][] = 'ckeditor/drupal.ckeditor.admin';
@@ -212,7 +213,7 @@ class EmbedButtonForm extends EntityForm {
       $button->set('icon', EmbedButton::convertImageToEncodedData($file->getFileUri()));
     }
     elseif ($form_state->getValue('icon_reset')) {
-      $button->set('icon', NULL);
+      $button->set('icon', []);
     }
 
     $status = $button->save();