Issue #3347721 by Wim Leers, dabley, lauriii, smustgrave, witeksocha, Reinmar,...

Issue #3347721 by Wim Leers, dabley, lauriii, smustgrave, witeksocha, Reinmar, thatipudir: [Style] Warn the user about styles for unsupported elements

core/modules/ckeditor5/src/Plugin/Validation/Constraint/StyleSensibleElementConstraint.php

@@ -39,4 +39,11 @@ class StyleSensibleElementConstraint extends Constraint {
    */
   public $conflictingDisabledPluginMessage = 'A style must only specify classes not supported by other plugins. The <code>@classes</code> classes on <code>@tag</code> are supported by the %plugin plugin. Remove this style and enable that plugin instead.';
 
+  /**
+   * When a Style is defined for a plugin that does not yet support Style.
+   *
+   * @var string
+   */
+  public $unsupportedTagMessage = 'The <code>@tag</code> tag is not yet supported by the Style plugin.';
+
 }

core/modules/ckeditor5/src/Plugin/Validation/Constraint/StyleSensibleElementConstraintValidator.php

@@ -26,6 +26,41 @@ class StyleSensibleElementConstraintValidator extends ConstraintValidator implem
   use PluginManagerDependentValidatorTrait;
   use TextEditorObjectDependentValidatorTrait;
 
+  /**
+   * Tags whose plugins are known to not yet integrate with the Style plugin.
+   *
+   * To prevent the user from configuring the Style plugin and reasonably
+   * expecting it to work correctly for tags of plugins that are known to
+   * yet integrate with the Style plugin, generate a validation error for these.
+   */
+  protected const KNOWN_UNSUPPORTED_TAGS = [
+    // @see https://www.drupal.org/project/drupal/issues/3117172
+    '<drupal-media>',
+    // @see https://github.com/ckeditor/ckeditor5/issues/13778
+    '<img>',
+    // @see https://github.com/ckeditor/ckeditor5/blob/39ad30090ead9dd2d54c3ac53d7f446ade9fd8ce/packages/ckeditor5-html-support/src/schemadefinitions.ts#L12-L50
+    '<keygen>',
+    '<applet>',
+    '<basefont>',
+    '<isindex>',
+    '<hr>',
+    '<br>',
+    '<area>',
+    '<command>',
+    '<map>',
+    '<wbr>',
+    '<colgroup>',
+    '<col>',
+    '<datalist>',
+    '<track>',
+    '<source>',
+    '<option>',
+    '<param>',
+    '<optgroup>',
+    '<link>',
+    '<noscript>',
+  ];
+
   /**
    * {@inheritdoc}
    *
@@ -83,6 +118,16 @@ public function validate($element, Constraint $constraint) {
         ->setParameter('%plugin', $this->findStyleConflictingPluginLabel($style_element))
         ->addViolation();
     }
+
+    // Finally, while the configuration is technically valid if this point was
+    // reached, there are some known compatibility issues. Inform the user that
+    // for that reason, this configuration must be considered invalid.
+    $unsupported = $style_element->intersect(HTMLRestrictions::fromString(implode(' ', static::KNOWN_UNSUPPORTED_TAGS)));
+    if (!$unsupported->allowsNothing()) {
+      $this->context->buildViolation($constraint->unsupportedTagMessage)
+        ->setParameter('@tag', sprintf("<%s>", $tag))
+        ->addViolation();
+    }
   }
 
   /**

core/modules/ckeditor5/tests/src/Kernel/ValidatorsTest.php

@@ -457,6 +457,40 @@ public function provider(): array {
         'settings.plugins.ckeditor5_style.styles.0.element' => 'A style must only specify classes not supported by other plugins. The <code>text-align-justify</code> classes on <code>&lt;p&gt;</code> are already supported by the enabled <em class="placeholder">Alignment</em> plugin.',
       ],
     ];
+    $data['INVALID: Style plugin configured to add class to plugin-supported tag known to not work with Style … yet'] = [
+      'settings' => [
+        'toolbar' => [
+          'items' => [
+            'drupalInsertImage',
+            'style',
+          ],
+        ],
+        'plugins' => [
+          'ckeditor5_imageResize' => [
+            'allow_resize' => FALSE,
+          ],
+          'ckeditor5_style' => [
+            'styles' => [
+              // @see https://github.com/ckeditor/ckeditor5/issues/13778
+              [
+                'label' => 'Featured image',
+                'element' => '<img class="featured">',
+              ],
+              // @see https://www.drupal.org/project/drupal/issues/3398223
+              // @see https://github.com/ckeditor/ckeditor5/blob/39ad30090ead9dd2d54c3ac53d7f446ade9fd8ce/packages/ckeditor5-html-support/src/schemadefinitions.ts#L12-L50
+              [
+                'label' => 'Fancy linebreak',
+                'element' => '<br class="fancy">',
+              ],
+            ],
+          ],
+        ],
+      ],
+      'violations' => [
+        'settings.plugins.ckeditor5_style.styles.0.element' => 'The <code>&lt;img&gt;</code> tag is not yet supported by the Style plugin.',
+        'settings.plugins.ckeditor5_style.styles.1.element' => 'The <code>&lt;br&gt;</code> tag is not yet supported by the Style plugin.',
+      ],
+    ];
     $data['INVALID: Style plugin has multiple styles with same label'] = [
       'settings' => [
         'toolbar' => [