Issue #1875874 by Wim Leers, frega: Minor clean-up for Edit (more generic WYSIWYG editor integration facilities, prevent Drupal behaviors on transport forms)

core/modules/edit/css/edit.css

@@ -321,10 +321,10 @@
   margin-left: 5px;
 }
 
-.edit-toolgroup.wysiwyg-tabs {
+.edit-toolgroup.wysiwyg-floated {
   float: right;
 }
-.edit-toolgroup.wysiwyg {
+.edit-toolgroup.wysiwyg-main {
   clear: left;
   width: 100%;
   padding-left: 0;

core/modules/edit/js/edit.js

@@ -1,6 +1,6 @@
 /**
  * @file
- * Behaviors for Edit, including the one that initializes Edit's EditAppView.
+ * Attaches behavior for the Edit module.
  */
 (function ($, _, Backbone, Drupal, drupalSettings) {
 

core/modules/edit/js/theme.js

@@ -79,6 +79,7 @@ Drupal.theme.editToolbarContainer = function(settings) {
  *
  * @param settings
  *   An object with the following keys:
+ *   - id: (optional) the id of the toolgroup
  *   - classes: the class of the toolgroup.
  *   - buttons: @see Drupal.theme.prototype.editButtons().
  * @return
@@ -87,7 +88,11 @@ Drupal.theme.editToolbarContainer = function(settings) {
 Drupal.theme.editToolgroup = function(settings) {
   var classes = 'edit-toolgroup edit-animate-slow edit-animate-invisible edit-animate-delay-veryfast';
   var html = '';
-  html += '<div class="' + classes + ' ' + settings.classes + '">';
+  html += '<div class="' + classes + ' ' + settings.classes + '"';
+  if (settings.id) {
+    html += ' id="' + settings.id + '"';
+  }
+  html += '>';
   html += Drupal.theme('editButtons', { buttons: settings.buttons });
   html += '</div>';
   return html;

core/modules/edit/js/util.js

@@ -117,12 +117,21 @@ Drupal.edit.util.form = {
       url: $submit.closest('form').attr('action'),
       setClick: true,
       event: 'click.edit',
-      progress: { type:'throbber' },
+      progress: { type: null },
       submit: { nocssjs : options.nocssjs }
     };
     var base = $submit.attr('id');
 
     Drupal.ajax[base] = new Drupal.ajax(base, $submit[0], element_settings);
+    // Reimplement the success handler to ensure Drupal.attachBehaviors() does
+    // not get called on the form.
+    Drupal.ajax[base].success = function (response, status) {
+      for (var i in response) {
+        if (response.hasOwnProperty(i) && response[i].command && this.commands[response[i].command]) {
+          this.commands[response[i].command](this, response[i], status);
+        }
+      }
+    };
 
     return base;
   },

core/modules/edit/js/views/toolbar-view.js

@@ -58,8 +58,7 @@ Drupal.edit.views.ToolbarView = Backbone.View.extend({
     this._loaderVisibleStart = 0;
 
     // Generate a DOM-compatible ID for the toolbar DOM element.
-    var propertyID = Drupal.edit.util.calcPropertyID(this.entity, this.predicate);
+    this._id = Drupal.edit.util.calcPropertyID(this.entity, this.predicate).replace(/\//g, '_');
-    this._id = 'edit-toolbar-for-' + propertyID.replace(/\//g, '_');
   },
 
   /**
@@ -345,19 +344,21 @@ Drupal.edit.views.ToolbarView = Backbone.View.extend({
     this.$el
       .find('.edit-toolbar')
       .append(Drupal.theme('editToolgroup', {
-        classes: 'wysiwyg-tabs',
+        id: this.getFloatedWysiwygToolgroupId(),
+        classes: 'wysiwyg-floated',
         buttons: []
       }))
       .append(Drupal.theme('editToolgroup', {
-        classes: 'wysiwyg',
+        id: this.getMainWysiwygToolgroupId(),
+        classes: 'wysiwyg-main',
         buttons: []
       }));
 
     // Animate the toolgroups into visibility.
     var that = this;
     setTimeout(function () {
-      that.show('wysiwyg-tabs');
+      that.show('wysiwyg-floated');
-      that.show('wysiwyg');
+      that.show('wysiwyg-main');
     }, 0);
   },
 
@@ -410,15 +411,39 @@ Drupal.edit.views.ToolbarView = Backbone.View.extend({
   },
 
   /**
-   * Calculates the ID for this toolbar container.
+   * Retrieves the ID for this toolbar's container.
    *
    * Only used to make sane hovering behavior possible.
    *
    * @return string
-   *   A string that can be used as the ID for this toolbar container.
+   *   A string that can be used as the ID for this toolbar's container.
    */
-  getId: function() {
+  getId: function () {
-    return this._id;
+    return 'edit-toolbar-for-' + this._id;
+  },
+
+  /**
+   * Retrieves the ID for this toolbar's floating WYSIWYG toolgroup.
+   *
+   * Used to provide an abstraction for any WYSIWYG editor to plug in.
+   *
+   * @return string
+   *   A string that can be used as the ID.
+   */
+  getFloatedWysiwygToolgroupId: function () {
+    return 'edit-wysiwyg-floated-toolgroup-for-' + this._id;
+  },
+
+  /**
+   * Retrieves the ID for this toolbar's main WYSIWYG toolgroup.
+   *
+   * Used to provide an abstraction for any WYSIWYG editor to plug in.
+   *
+   * @return string
+   *   A string that can be used as the ID.
+   */
+  getMainWysiwygToolgroupId: function () {
+    return 'edit-wysiwyg-main-toolgroup-for-' + this._id;
   },
 
   /**