Issue #2710427 by smustgrave, longwave, akhoury, alexpott, ChaseOnTheWeb,...

Issue #2710427 by smustgrave, longwave, akhoury, alexpott, ChaseOnTheWeb, Spokje, Wim Leers, aby v a, frob, alison, catch, smulvih2, pameeela, ranjith_kumar_k_u, vsujeetkumar, becassin: Broken "Allowed Tags" updating: after all values for an attribute are allowed, it should not be overridden to allow only certain attribute values

(cherry picked from commit 52cc95b1)

core/modules/filter/filter.filter_html.admin.es6.js

@@ -202,8 +202,13 @@
               //   https://www.drupal.org/node/2567801 lands.
               filterRule.restrictedTags.allowed.attributes =
                 featureRule.required.attributes.slice(0);
-              filterRule.restrictedTags.allowed.classes =
-                featureRule.required.classes.slice(0);
+              if (
+                userAllowedTags[tag] !== undefined &&
+                userAllowedTags[tag].restrictedTags.allowed.classes[0] !== ''
+              ) {
+                filterRule.restrictedTags.allowed.classes =
+                  featureRule.required.classes.slice(0);
+              }
               editorRequiredTags[tag] = filterRule;
             }
             // The tag is already allowed, add any additionally allowed
@@ -214,10 +219,15 @@
                 ...filterRule.restrictedTags.allowed.attributes,
                 ...featureRule.required.attributes,
               ];
-              filterRule.restrictedTags.allowed.classes = [
-                ...filterRule.restrictedTags.allowed.classes,
-                ...featureRule.required.classes,
-              ];
+              if (
+                userAllowedTags[tag] !== undefined &&
+                userAllowedTags[tag].restrictedTags.allowed.classes[0] !== ''
+              ) {
+                filterRule.restrictedTags.allowed.classes = [
+                  ...filterRule.restrictedTags.allowed.classes,
+                  ...featureRule.required.classes,
+                ];
+              }
             }
           }
         }
@@ -343,6 +353,7 @@
     _generateSetting(tags) {
       return Object.keys(tags).reduce((setting, tag) => {
         const rule = tags[tag];
+        const allowedClasses = rule.restrictedTags.allowed.classes;
 
         if (setting.length) {
           setting += ' ';
@@ -357,10 +368,10 @@
         //   values. The filter_html filter always disallows the "style"
         //   attribute, so we only need to support "class" attribute value
         //   restrictions. Fix once https://www.drupal.org/node/2567801 lands.
-        if (rule.restrictedTags.allowed.classes.length) {
-          setting += ` class="${rule.restrictedTags.allowed.classes.join(
-            ' ',
-          )}"`;
+        if (allowedClasses.length === 1 && allowedClasses[0] === '') {
+          setting += ' class';
+        } else if (allowedClasses.length) {
+          setting += ` class="${allowedClasses.join(' ')}"`;
         }
 
         setting += '>';

core/modules/filter/filter.filter_html.admin.js

@@ -117,12 +117,19 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
               filterRule = new Drupal.FilterHTMLRule();
               filterRule.restrictedTags.tags = [tag];
               filterRule.restrictedTags.allowed.attributes = featureRule.required.attributes.slice(0);
-              filterRule.restrictedTags.allowed.classes = featureRule.required.classes.slice(0);
+
+              if (userAllowedTags[tag] !== undefined && userAllowedTags[tag].restrictedTags.allowed.classes[0] !== '') {
+                filterRule.restrictedTags.allowed.classes = featureRule.required.classes.slice(0);
+              }
+
               editorRequiredTags[tag] = filterRule;
             } else {
               filterRule = editorRequiredTags[tag];
               filterRule.restrictedTags.allowed.attributes = [].concat(_toConsumableArray(filterRule.restrictedTags.allowed.attributes), _toConsumableArray(featureRule.required.attributes));
-              filterRule.restrictedTags.allowed.classes = [].concat(_toConsumableArray(filterRule.restrictedTags.allowed.classes), _toConsumableArray(featureRule.required.classes));
+
+              if (userAllowedTags[tag] !== undefined && userAllowedTags[tag].restrictedTags.allowed.classes[0] !== '') {
+                filterRule.restrictedTags.allowed.classes = [].concat(_toConsumableArray(filterRule.restrictedTags.allowed.classes), _toConsumableArray(featureRule.required.classes));
+              }
             }
           }
         }
@@ -189,6 +196,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     _generateSetting: function _generateSetting(tags) {
       return Object.keys(tags).reduce(function (setting, tag) {
         var rule = tags[tag];
+        var allowedClasses = rule.restrictedTags.allowed.classes;
 
         if (setting.length) {
           setting += ' ';
@@ -200,8 +208,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
           setting += " ".concat(rule.restrictedTags.allowed.attributes.join(' '));
         }
 
-        if (rule.restrictedTags.allowed.classes.length) {
-          setting += " class=\"".concat(rule.restrictedTags.allowed.classes.join(' '), "\"");
+        if (allowedClasses.length === 1 && allowedClasses[0] === '') {
+          setting += ' class';
+        } else if (allowedClasses.length) {
+          setting += " class=\"".concat(allowedClasses.join(' '), "\"");
         }
 
         setting += '>';

core/modules/filter/tests/src/FunctionalJavascript/FilterHtmlTest.php

@@ -2,6 +2,7 @@
 
 namespace Drupal\Tests\filter\FunctionalJavascript;
 
+use Drupal\editor\Entity\Editor;
 use Drupal\filter\Entity\FilterFormat;
 use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
 
@@ -49,4 +50,45 @@ public function testTableTags() {
     $this->assertJsCondition($js_condition);
   }
 
+  /**
+   * Tests that CSS classes defined in the Styles Dropdown section don't
+   * restrict elements in the Allowed Tags configuration that allow all classes.
+   *
+   * @group legacy
+   */
+  public function testStylesToAllowedTagsSync() {
+    \Drupal::service('module_installer')->install(['ckeditor']);
+    FilterFormat::create([
+      'format' => 'some_html',
+      'name' => 'Some HTML',
+      'filters' => [
+        'filter_html' => [
+          'status' => 1,
+          'settings' => [
+            'allowed_html' => '<span class>',
+          ],
+        ],
+      ],
+    ])->save();
+
+    Editor::create([
+      'format' => 'some_html',
+      'editor' => 'ckeditor',
+      'settings' => [
+        'plugins' => [
+          'stylescombo' => [
+            'styles' => 'span.hello-world|Hello World',
+          ],
+        ],
+      ],
+    ])->save();
+
+    $this->drupalLogin($this->drupalCreateUser(['administer filters']));
+    $this->drupalGet('admin/config/content/formats/manage/some_html');
+
+    $js_condition = "jQuery('#edit-filters-filter-html-settings-allowed-html').val() === \"<span class> <strong> <em> <a href> <ul> <li> <ol> <blockquote> <img src alt data-entity-type data-entity-uuid>\"";
+
+    $this->assertJsCondition($js_condition);
+  }
+
 }