Issue #3084340 by oknate: drupalmedia plugin.js doesn't delete attributes from...

Issue #3084340 by oknate: drupalmedia plugin.js doesn't delete attributes from drupal-media element when unset

core/modules/media/js/plugins/drupalmedia/plugin.es6.js

@@ -261,6 +261,14 @@
               .getParent()
               .addClass(`align-${this.data.attributes['data-align']}`);
           }
+          // Remove old attributes.
+          if (this.oldData) {
+            Object.keys(this.oldData.attributes).forEach(attrName => {
+              this.element.removeAttribute(attrName);
+            });
+          }
+
+          this.element.setAttributes(this.data.attributes);
 
           // Track the previous state to allow checking if preview needs
           // server side update.

core/modules/media/js/plugins/drupalmedia/plugin.js

@@ -157,6 +157,8 @@
           this._tearDownDynamicEditables();
         },
         data: function data(event) {
+          var _this = this;
+
           if (this.oldData) {
             if (!this.data.hasCaption && this.oldData.hasCaption) {
               delete this.data.attributes['data-caption'];
@@ -188,6 +190,14 @@
             this.element.getParent().addClass('align-' + this.data.attributes['data-align']);
           }
 
+          if (this.oldData) {
+            Object.keys(this.oldData.attributes).forEach(function (attrName) {
+              _this.element.removeAttribute(attrName);
+            });
+          }
+
+          this.element.setAttributes(this.data.attributes);
+
           this.oldData = CKEDITOR.tools.clone(this.data);
         },
         downcast: function downcast() {
@@ -200,7 +210,7 @@
           return downcastElement;
         },
         _setUpDynamicEditables: function _setUpDynamicEditables() {
-          var _this = this;
+          var _this2 = this;
 
           if (this.initEditable('caption', this.definition.editables.caption)) {
             var captionEditable = this.editables.caption;
@@ -208,9 +218,9 @@
             captionEditable.setAttribute('data-placeholder', Drupal.t('Enter caption here'));
 
             this.captionObserver = new MutationObserver(function () {
-              var mediaAttributes = CKEDITOR.tools.clone(_this.data.attributes);
+              var mediaAttributes = CKEDITOR.tools.clone(_this2.data.attributes);
               mediaAttributes['data-caption'] = captionEditable.getData();
-              _this.setData('attributes', mediaAttributes);
+              _this2.setData('attributes', mediaAttributes);
             });
             this.captionObserver.observe(captionEditable.$, {
               characterData: true,
@@ -307,7 +317,7 @@
           return JSON.stringify(dataToHash);
         },
         _loadPreview: function _loadPreview(callback) {
-          var _this2 = this;
+          var _this3 = this;
 
           jQuery.get({
             url: Drupal.url('media/' + editor.config.drupal.format + '/preview'),
@@ -316,11 +326,11 @@
             },
             dataType: 'html',
             success: function success(previewHtml) {
-              _this2.element.setHtml(previewHtml);
-              callback(_this2);
+              _this3.element.setHtml(previewHtml);
+              callback(_this3);
             },
             error: function error() {
-              _this2.element.setHtml(Drupal.theme('mediaEmbedError'));
+              _this3.element.setHtml(Drupal.theme('mediaEmbedError'));
             }
           });
         }

core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php

@@ -1080,7 +1080,10 @@ public function testAlignment() {
     // Assert that neither the widget nor the caption figure have alignment
     // classes.
     $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.caption-drupal-media:not([class*="align-"])', 2000));
-    $assert_session->elementExists('css', '.cke_widget_drupalmedia:not([class*="align-"])');
+    // Assert drupal-media element no longer has data-align attribute.
+    $this->assertNotEmpty($assert_session->waitForElementVisible('css', 'drupal-media .caption-drupal-media:not(.align-center)', 2000));
+    $drupal_media = $assert_session->elementExists('css', 'drupal-media');
+    $this->assertFalse($drupal_media->hasAttribute('data-align'));
     // Assert that the resultant downcast <drupal-media> tag has no data-align
     // attribute.
     $this->pressEditorButton('source');