Refactor the SvgImageWidget class to work with Drupal 10.2+

Changes:

• Have SvgImageWidget extend ImageWidget instead of FileWidget reducing code duplication manyfold.
• Simplify the svg_image_get_image_file_dimensions() function a whole lot, it should not need to worry about non-svg images.
• Add a FileIsImageOrSvg constraint, so that the FileIsImage validation can be kept even if the graphics toolkit (gd in most cases) does not think that svgs are images.

Closes #3413668

src/Plugin/Field/FieldWidget/SvgImageWidget.php

@@ -2,13 +2,9 @@
 
 namespace Drupal\svg_image\Plugin\Field\FieldWidget;
 
-use Drupal\Core\Field\FieldDefinitionInterface;
 use Drupal\Core\Field\FieldItemListInterface;
-use Drupal\Component\Utility\NestedArray;
 use Drupal\Core\Form\FormStateInterface;
-use Drupal\file\Entity\File;
-use Drupal\file\Plugin\Field\FieldWidget\FileWidget;
-use Symfony\Component\DependencyInjection\ContainerInterface;
+use Drupal\image\Plugin\Field\FieldWidget\ImageWidget;
 
 /**
  * Override plugin of the 'image_image' widget.
@@ -24,199 +20,44 @@ use Symfony\Component\DependencyInjection\ContainerInterface;
  *   }
  * )
  */
-class SvgImageWidget extends FileWidget {
-
-  /**
-   * Container.
-   *
-   * @var \Symfony\Component\DependencyInjection\ContainerInterface
-   */
-  private $container;
-
-  /**
-   * Entity repository service instance.
-   *
-   * @var \Drupal\Core\Entity\EntityRepository
-   */
-  protected $entityRepository;
-
-  /**
-   * Renderer instance.
-   *
-   * @var \Drupal\Core\Render\Renderer
-   */
-  protected $renderer;
-
-  /**
-   * EntityType manager.
-   *
-   * @var \Drupal\Core\Entity\EntityTypeManagerInterface
-   */
-  protected $entityTypeManager;
-
-  /**
-   * Image style storage.
-   *
-   * @var \Drupal\Core\Entity\EntityStorageInterface
-   */
-  protected $imageStyleStorage;
-
-  /**
-   * The image factory service.
-   *
-   * @var \Drupal\Core\Image\ImageFactory
-   */
-  protected $imageFactory;
-
-  /**
-   * {@inheritdoc}
-   */
-  public function __construct($pluginId, $pluginDefinition, FieldDefinitionInterface $fieldDefinition, array $settings, array $thirdPartySettings, ContainerInterface $container) {
-    parent::__construct($pluginId, $pluginDefinition, $fieldDefinition, $settings, $thirdPartySettings, $container->get('element_info'));
-
-    $this->container = $container;
-    $this->entityRepository = $container->get('entity.repository');
-    $this->renderer = $container->get('renderer');
-    $this->entityTypeManager = $container->get('entity_type.manager');
-    $this->imageStyleStorage = $this->entityTypeManager->getStorage('image_style');
-    $this->imageFactory = $container->get('image.factory');
-  }
+class SvgImageWidget extends ImageWidget {
 
   /**
    * {@inheritdoc}
    */
-  public static function create(ContainerInterface $container, array $configuration, $pluginId, $pluginDefinition) {
-    return new static(
-      $pluginId,
-      $pluginDefinition,
-      $configuration['field_definition'],
-      $configuration['settings'],
-      $configuration['third_party_settings'],
-      $container
-    );
-  }
+  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
+    $element = parent::formElement($items, $delta, $element, $form, $form_state);
 
-  /**
-   * {@inheritdoc}
-   */
-  public static function defaultSettings() {
-    return [
-      'progress_indicator' => 'throbber',
-      'preview_image_style' => 'thumbnail',
-    ] + parent::defaultSettings();
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function settingsForm(array $form, FormStateInterface $formState) {
-    $element = parent::settingsForm($form, $formState);
-
-    $element['preview_image_style'] = [
-      '#title' => $this->t('Preview image style'),
-      '#type' => 'select',
-      '#options' => image_style_options(FALSE),
-      '#empty_option' => '<' . $this->t('no preview') . '>',
-      '#default_value' => $this->getSetting('preview_image_style'),
-      '#description' => $this->t('The preview image will be shown while editing the content.'),
-      '#weight' => 15,
-    ];
-
-    return $element;
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function settingsSummary() {
-    $summary = parent::settingsSummary();
-
-    $imageStyles = image_style_options(FALSE);
-    // Unset possible 'No defined styles' option.
-    unset($imageStyles['']);
-    // Styles could be lost because of enabled/disabled modules that defines
-    // their styles in code.
-    $imageStyleSetting = $this->getSetting('preview_image_style');
-    if (isset($imageStyles[$imageStyleSetting])) {
-      $previewImageStyle = $this->t('Preview image style: @style', ['@style' => $imageStyles[$imageStyleSetting]]);
+    // Replace the FileIsImage validator with FileIsImageOrSvg which does the
+    // same, but will allow SVG files.
+    if (isset($element['#upload_validators']['FileIsImage'])) {
+      unset($element['#upload_validators']['FileIsImage']);
+      $element['#upload_validators']['FileIsImageOrSvg'] = [];
     }
     else {
-      $previewImageStyle = $this->t('No preview');
+      unset($element['#upload_validators']['file_validate_is_image']);
+      $element['#upload_validators']['svg_image_validate_is_image_or_svg'] = [];
     }
 
-    array_unshift($summary, $previewImageStyle);
-
-    return $summary;
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  protected function formMultipleElements(FieldItemListInterface $items, array &$form, FormStateInterface $formState) {
-    $elements = parent::formMultipleElements($items, $form, $formState);
+    // If it exists in the field settings, return 'svg' to the list of allowed
+    // extensions, regardless of the imageformatter's (image toolkit's) support.
+    // as parent would have removed it.
+    $field_settings = $this->getFieldSettings();
 
-    $cardinality = $this->fieldDefinition->getFieldStorageDefinition()->getCardinality();
-    $fileUploadHelp = [
-      '#theme' => 'file_upload_help',
-      '#description' => '',
-      '#upload_validators' => $elements[0]['#upload_validators'],
-      '#cardinality' => $cardinality,
-    ];
-    if ($cardinality == 1) {
-      // If there's only one field, return it as delta 0.
-      if (empty($elements[0]['#default_value']['fids'])) {
-        $fileUploadHelp['#description'] = $this->getFilteredDescription();
-        $elements[0]['#description'] = $this->renderer->renderPlain($fileUploadHelp);
-      }
+    if (isset($element['#upload_validators']['FileExtension'])) {
+      $extensions = &$element['#upload_validators']['FileExtension']['extensions'];
     }
     else {
-      $elements['#file_upload_description'] = $fileUploadHelp;
+      $extensions = &$element['#upload_validators']['file_validate_extensions'][0];
     }
 
-    return $elements;
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $formState) {
-    $element = parent::formElement($items, $delta, $element, $form, $formState);
-
-    $fieldSettings = $this->getFieldSettings();
-
-    // Add upload resolution validation.
-    if ($fieldSettings['max_resolution'] || $fieldSettings['min_resolution']) {
-      $element['#upload_validators']['file_validate_image_resolution'] = [$fieldSettings['max_resolution'], $fieldSettings['min_resolution']];
-    }
-
-    // If not using custom extension validation, ensure this is an image.
-    $supportedExtensions = $this->imageFactory->getSupportedExtensions();
-    $supportedExtensions[] = 'svg';
-    $extensions = $element['#upload_validators']['file_validate_extensions'][0] ?? implode(' ', $supportedExtensions);
-
-    $extensions = array_intersect(explode(' ', $extensions), $supportedExtensions);
-    $element['#upload_validators']['file_validate_extensions'][0] = implode(' ', $extensions);
-
-    // Add mobile device image capture acceptance.
-    $element['#accept'] = 'image/*';
-
-    // Add properties needed by process() method.
-    $element['#preview_image_style'] = $this->getSetting('preview_image_style');
-    $element['#title_field'] = $fieldSettings['title_field'];
-    $element['#title_field_required'] = $fieldSettings['title_field_required'];
-    $element['#alt_field'] = $fieldSettings['alt_field'];
-    $element['#alt_field_required'] = $fieldSettings['alt_field_required'];
+    $wanted = explode(' ', $field_settings['file_extensions']);
+    $current = explode(' ', $extensions);
 
-    // Default image.
-    $defaultImage = $fieldSettings['default_image'];
-    if (empty($defaultImage['uuid'])) {
-      $defaultImage = $this->fieldDefinition->getFieldStorageDefinition()->getSetting('default_image');
+    if (in_array('svg', $wanted) && !in_array('svg', $current)) {
+      $current[] = 'svg';
+      $extensions = implode(' ', $current);
     }
-    // Convert the stored UUID into a file ID.
-    if (!empty($defaultImage['uuid']) && $entity = $this->entityRepository->loadEntityByUuid('file', $defaultImage['uuid'])) {
-      $defaultImage['fid'] = $entity->id();
-    }
-    $element['#default_image'] = !empty($defaultImage['fid']) ? $defaultImage : [];
 
     return $element;
   }
@@ -224,168 +65,26 @@ class SvgImageWidget extends FileWidget {
   /**
    * {@inheritdoc}
    */
-  public static function process($element, FormStateInterface $formState, $form) {
-    $item = $element['#value'];
-    $item['fids'] = $element['fids']['#value'];
-
-    $element['#theme'] = 'image_widget';
+  public static function process($element, FormStateInterface $form_state, $form) {
+    $element = parent::process($element, $form_state, $form);
 
-    // Add the image preview.
-    if (!empty($element['#files']) && $element['#preview_image_style']) {
+    // Parent produced some result (a preview image, either from the default
+    // or from a file in this field), but an svg can't be rendered using image
+    // styles so replace the theme of the preview element with a regular image
+    // element.
+    if (isset($element['preview'])) {
       $file = reset($element['#files']);
 
-      $variables = svg_image_get_image_file_dimensions($file);
-
-      $variables['style_name'] = $element['#preview_image_style'];
-      $variables['uri'] = $file->getFileUri();
-
-      // Add a custom preview for SVG file.
       if (svg_image_is_file_svg($file)) {
-        $element['preview'] = [
-          '#weight' => -10,
-          '#theme' => 'image',
-          '#width' => $variables['width'],
-          '#height' => $variables['height'],
-          '#uri' => $variables['uri'],
-        ];
-      }
-      else {
-        $element['preview'] = [
-          '#weight' => -10,
-          '#theme' => 'image_style',
-          '#width' => $variables['width'],
-          '#height' => $variables['height'],
-          '#style_name' => $variables['style_name'],
-          '#uri' => $variables['uri'],
-        ];
-      }
-
-      // Store the dimensions in the form so the file doesn't have to be
-      // accessed again. This is important for remote files.
-      $element['width'] = [
-        '#type' => 'hidden',
-        '#value' => $variables['width'],
-      ];
-      $element['height'] = [
-        '#type' => 'hidden',
-        '#value' => $variables['height'],
-      ];
-    }
-    elseif (!empty($element['#default_image'])) {
-      $defaultImage = $element['#default_image'];
-      $file = File::load($defaultImage['fid']);
-      if (!empty($file)) {
-        $element['preview'] = [
-          '#weight' => -10,
-          '#theme' => 'image_style',
-          '#width' => $defaultImage['width'],
-          '#height' => $defaultImage['height'],
-          '#style_name' => $element['#preview_image_style'],
-          '#uri' => $file->getFileUri(),
-        ];
-      }
-    }
-
-    // Add the additional alt and title fields.
-    $element['alt'] = [
-      '#title' => t('Alternative text'),
-      '#type' => 'textfield',
-      '#default_value' => isset($item['alt']) ? $item['alt'] : '',
-      '#description' => t('This text will be used by screen readers, search engines, or when the image cannot be loaded.'),
-      // @see https://www.drupal.org/node/465106#alt-text
-      '#maxlength' => 512,
-      '#weight' => -12,
-      '#access' => (bool) $item['fids'] && $element['#alt_field'],
-      '#required' => $element['#alt_field_required'],
-      '#element_validate' => $element['#alt_field_required'] == 1 ? [[get_called_class(), 'validateRequiredFields']] : [],
-    ];
-    $element['title'] = [
-      '#type' => 'textfield',
-      '#title' => t('Title'),
-      '#default_value' => isset($item['title']) ? $item['title'] : '',
-      '#description' => t('The title is used as a tool tip when the user hovers the mouse over the image.'),
-      '#maxlength' => 1024,
-      '#weight' => -11,
-      '#access' => (bool) $item['fids'] && $element['#title_field'],
-      '#required' => $element['#title_field_required'],
-      '#element_validate' => $element['#title_field_required'] == 1 ? [[get_called_class(), 'validateRequiredFields']] : [],
-    ];
-
-    return parent::process($element, $formState, $form);
-  }
-
-  /**
-   * Validate callback for alt and title field, if the user wants them required.
-   *
-   * This is separated in a validate function instead of a #required flag to
-   * avoid being validated on the process callback.
-   */
-  public static function validateRequiredFields($element, FormStateInterface $formState) {
-    // Only do validation if the function is triggered from other places than
-    // the image process form.
-    $triggering_element = $formState->getTriggeringElement();
-    if (!empty($triggering_element['#submit']) && in_array('file_managed_file_submit', $triggering_element['#submit'], TRUE)) {
-      $formState->setLimitValidationErrors([]);
-    }
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function calculateDependencies() {
-    $dependencies = parent::calculateDependencies();
-    $styleId = $this->getSetting('preview_image_style');
-
-    if ($styleId) {
-      /** @var \Drupal\image\ImageStyleStorage $imageStyleStorage */
-
-      $style = $this->imageStyleStorage->load($styleId);
-      if ($style) {
-        // If this widget uses a valid image style to display the preview of
-        // the uploaded image, add that image style configuration entity
-        // as dependency of this widget.
-        $dependencies[$style->getConfigDependencyKey()][] = $style->getConfigDependencyName();
-      }
-    }
-
-    return $dependencies;
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function onDependencyRemoval(array $dependencies) {
-    $changed = parent::onDependencyRemoval($dependencies);
-    $styleId = $this->getSetting('preview_image_style');
-
-    /** @var \Drupal\image\ImageStyleInterface $style */
-    if ($styleId) {
-      $style = $this->imageStyleStorage->load($styleId);
-      if ($style) {
-        if (!empty($dependencies[$style->getConfigDependencyKey()][$style->getConfigDependencyName()])) {
-          /** @var \Drupal\image\ImageStyleStorageInterface $storage */
-          $storage = $this->entityTypeManager->getStorage($style->getEntityTypeId());
+        $dimensions = svg_image_get_image_file_dimensions($file);
 
-          $replacementId = $storage->getReplacementId($styleId);
-          // If a valid replacement has been provided in the storage, replace
-          // the preview image style with the replacement.
-          if ($replacementId && $this->imageStyleStorage->load($replacementId)) {
-            $this->setSetting('preview_image_style', $replacementId);
-          }
-
-          // If there's no replacement or the replacement is invalid, disable
-          // the image preview.
-          else {
-            $this->setSetting('preview_image_style', '');
-          }
-
-          // Signal that the formatter plugin settings were updated.
-          $changed = TRUE;
-        }
+        $element['preview']['#theme'] = 'image';
+        $element['preview']['#width'] = $dimensions['width'];
+        $element['preview']['#height'] = $dimensions['height'];
       }
     }
 
-    return $changed;
+    return $element;
   }
 
 }