comparison core/modules/ckeditor/js/views/ControllerView.es6.js @ 4:a9cd425dd02b

Update, including to Drupal core 8.6.10

 /**
  * @file
  * A Backbone View acting as a controller for CKEditor toolbar configuration.
  */
 
-(function ($, Drupal, Backbone, CKEDITOR, _) {
-  Drupal.ckeditor.ControllerView = Backbone.View.extend(/** @lends Drupal.ckeditor.ControllerView# */{
-
-    /**
-     * @type {object}
-     */
-    events: {},
-
-    /**
-     * Backbone View acting as a controller for CKEditor toolbar configuration.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    initialize() {
-      this.getCKEditorFeatures(this.model.get('hiddenEditorConfig'), this.disableFeaturesDisallowedByFilters.bind(this));
-
-      // Push the active editor configuration to the textarea.
-      this.model.listenTo(this.model, 'change:activeEditorConfig', this.model.sync);
-      this.listenTo(this.model, 'change:isDirty', this.parseEditorDOM);
-    },
-
-    /**
-     * Converts the active toolbar DOM structure to an object representation.
-     *
-     * @param {Drupal.ckeditor.ConfigurationModel} model
-     *   The state model for the CKEditor configuration.
-     * @param {bool} isDirty
-     *   Tracks whether the active toolbar DOM structure has been changed.
-     *   isDirty is toggled back to false in this method.
-     * @param {object} options
-     *   An object that includes:
-     * @param {bool} [options.broadcast]
-     *   A flag that controls whether a CKEditorToolbarChanged event should be
-     *   fired for configuration changes.
-     *
-     * @fires event:CKEditorToolbarChanged
-     */
-    parseEditorDOM(model, isDirty, options) {
-      if (isDirty) {
-        const currentConfig = this.model.get('activeEditorConfig');
-
-        // Process the rows.
-        const rows = [];
-        this.$el
-          .find('.ckeditor-active-toolbar-configuration')
-          .children('.ckeditor-row').each(function () {
-            const groups = [];
-            // Process the button groups.
-            $(this).find('.ckeditor-toolbar-group').each(function () {
-              const $group = $(this);
-              const $buttons = $group.find('.ckeditor-button');
-              if ($buttons.length) {
-                const group = {
-                  name: $group.attr('data-drupal-ckeditor-toolbar-group-name'),
-                  items: [],
-                };
-                $group.find('.ckeditor-button, .ckeditor-multiple-button').each(function () {
-                  group.items.push($(this).attr('data-drupal-ckeditor-button-name'));
+(function($, Drupal, Backbone, CKEDITOR, _) {
+  Drupal.ckeditor.ControllerView = Backbone.View.extend(
+    /** @lends Drupal.ckeditor.ControllerView# */ {
+      /**
+       * @type {object}
+       */
+      events: {},
+
+      /**
+       * Backbone View acting as a controller for CKEditor toolbar configuration.
+       *
+       * @constructs
+       *
+       * @augments Backbone.View
+       */
+      initialize() {
+        this.getCKEditorFeatures(
+          this.model.get('hiddenEditorConfig'),
+          this.disableFeaturesDisallowedByFilters.bind(this),
+        );
+
+        // Push the active editor configuration to the textarea.
+        this.model.listenTo(
+          this.model,
+          'change:activeEditorConfig',
+          this.model.sync,
+        );
+        this.listenTo(this.model, 'change:isDirty', this.parseEditorDOM);
+      },
+
+      /**
+       * Converts the active toolbar DOM structure to an object representation.
+       *
+       * @param {Drupal.ckeditor.ConfigurationModel} model
+       *   The state model for the CKEditor configuration.
+       * @param {bool} isDirty
+       *   Tracks whether the active toolbar DOM structure has been changed.
+       *   isDirty is toggled back to false in this method.
+       * @param {object} options
+       *   An object that includes:
+       * @param {bool} [options.broadcast]
+       *   A flag that controls whether a CKEditorToolbarChanged event should be
+       *   fired for configuration changes.
+       *
+       * @fires event:CKEditorToolbarChanged
+       */
+      parseEditorDOM(model, isDirty, options) {
+        if (isDirty) {
+          const currentConfig = this.model.get('activeEditorConfig');
+
+          // Process the rows.
+          const rows = [];
+          this.$el
+            .find('.ckeditor-active-toolbar-configuration')
+            .children('.ckeditor-row')
+            .each(function() {
+              const groups = [];
+              // Process the button groups.
+              $(this)
+                .find('.ckeditor-toolbar-group')
+                .each(function() {
+                  const $group = $(this);
+                  const $buttons = $group.find('.ckeditor-button');
+                  if ($buttons.length) {
+                    const group = {
+                      name: $group.attr(
+                        'data-drupal-ckeditor-toolbar-group-name',
+                      ),
+                      items: [],
+                    };
+                    $group
+                      .find('.ckeditor-button, .ckeditor-multiple-button')
+                      .each(function() {
+                        group.items.push(
+                          $(this).attr('data-drupal-ckeditor-button-name'),
+                        );
+                      });
+                    groups.push(group);
+                  }
                 });
-                groups.push(group);
+              if (groups.length) {
+                rows.push(groups);
               }
             });
-            if (groups.length) {
-              rows.push(groups);
+          this.model.set('activeEditorConfig', rows);
+          // Mark the model as clean. Whether or not the sync to the textfield
+          // occurs depends on the activeEditorConfig attribute firing a change
+          // event. The DOM has at least been processed and posted, so as far as
+          // the model is concerned, it is clean.
+          this.model.set('isDirty', false);
+
+          // Determine whether we should trigger an event.
+          if (options.broadcast !== false) {
+            const prev = this.getButtonList(currentConfig);
+            const next = this.getButtonList(rows);
+            if (prev.length !== next.length) {
+              this.$el
+                .find('.ckeditor-toolbar-active')
+                .trigger('CKEditorToolbarChanged', [
+                  prev.length < next.length ? 'added' : 'removed',
+                  _.difference(
+                    _.union(prev, next),
+                    _.intersection(prev, next),
+                  )[0],
+                ]);
             }
+          }
+        }
+      },
+
+      /**
+       * Asynchronously retrieve the metadata for all available CKEditor features.
+       *
+       * In order to get a list of all features needed by CKEditor, we create a
+       * hidden CKEditor instance, then check the CKEditor's "allowedContent"
+       * filter settings. Because creating an instance is expensive, a callback
+       * must be provided that will receive a hash of {@link Drupal.EditorFeature}
+       * features keyed by feature (button) name.
+       *
+       * @param {object} CKEditorConfig
+       *   An object that represents the configuration settings for a CKEditor
+       *   editor component.
+       * @param {function} callback
+       *   A function to invoke when the instanceReady event is fired by the
+       *   CKEditor object.
+       */
+      getCKEditorFeatures(CKEditorConfig, callback) {
+        const getProperties = function(CKEPropertiesList) {
+          return _.isObject(CKEPropertiesList) ? _.keys(CKEPropertiesList) : [];
+        };
+
+        const convertCKERulesToEditorFeature = function(
+          feature,
+          CKEFeatureRules,
+        ) {
+          for (let i = 0; i < CKEFeatureRules.length; i++) {
+            const CKERule = CKEFeatureRules[i];
+            const rule = new Drupal.EditorFeatureHTMLRule();
+
+            // Tags.
+            const tags = getProperties(CKERule.elements);
+            rule.required.tags = CKERule.propertiesOnly ? [] : tags;
+            rule.allowed.tags = tags;
+            // Attributes.
+            rule.required.attributes = getProperties(
+              CKERule.requiredAttributes,
+            );
+            rule.allowed.attributes = getProperties(CKERule.attributes);
+            // Styles.
+            rule.required.styles = getProperties(CKERule.requiredStyles);
+            rule.allowed.styles = getProperties(CKERule.styles);
+            // Classes.
+            rule.required.classes = getProperties(CKERule.requiredClasses);
+            rule.allowed.classes = getProperties(CKERule.classes);
+            // Raw.
+            rule.raw = CKERule;
+
+            feature.addHTMLRule(rule);
+          }
+        };
+
+        // Create hidden CKEditor with all features enabled, retrieve metadata.
+        // @see \Drupal\ckeditor\Plugin\Editor\CKEditor::buildConfigurationForm().
+        const hiddenCKEditorID = 'ckeditor-hidden';
+        if (CKEDITOR.instances[hiddenCKEditorID]) {
+          CKEDITOR.instances[hiddenCKEditorID].destroy(true);
+        }
+        // Load external plugins, if any.
+        const hiddenEditorConfig = this.model.get('hiddenEditorConfig');
+        if (hiddenEditorConfig.drupalExternalPlugins) {
+          const externalPlugins = hiddenEditorConfig.drupalExternalPlugins;
+          Object.keys(externalPlugins || {}).forEach(pluginName => {
+            CKEDITOR.plugins.addExternal(
+              pluginName,
+              externalPlugins[pluginName],
+              '',
+            );
           });
-        this.model.set('activeEditorConfig', rows);
-        // Mark the model as clean. Whether or not the sync to the textfield
-        // occurs depends on the activeEditorConfig attribute firing a change
-        // event. The DOM has at least been processed and posted, so as far as
-        // the model is concerned, it is clean.
-        this.model.set('isDirty', false);
-
-        // Determine whether we should trigger an event.
-        if (options.broadcast !== false) {
-          const prev = this.getButtonList(currentConfig);
-          const next = this.getButtonList(rows);
-          if (prev.length !== next.length) {
+        }
+        CKEDITOR.inline($(`#${hiddenCKEditorID}`).get(0), CKEditorConfig);
+
+        // Once the instance is ready, retrieve the allowedContent filter rules
+        // and convert them to Drupal.EditorFeature objects.
+        CKEDITOR.once('instanceReady', e => {
+          if (e.editor.name === hiddenCKEditorID) {
+            // First collect all CKEditor allowedContent rules.
+            const CKEFeatureRulesMap = {};
+            const rules = e.editor.filter.allowedContent;
+            let rule;
+            let name;
+            for (let i = 0; i < rules.length; i++) {
+              rule = rules[i];
+              name = rule.featureName || ':(';
+              if (!CKEFeatureRulesMap[name]) {
+                CKEFeatureRulesMap[name] = [];
+              }
+              CKEFeatureRulesMap[name].push(rule);
+            }
+
+            // Now convert these to Drupal.EditorFeature objects. And track which
+            // buttons are mapped to which features.
+            // @see getFeatureForButton()
+            const features = {};
+            const buttonsToFeatures = {};
+            Object.keys(CKEFeatureRulesMap).forEach(featureName => {
+              const feature = new Drupal.EditorFeature(featureName);
+              convertCKERulesToEditorFeature(
+                feature,
+                CKEFeatureRulesMap[featureName],
+              );
+              features[featureName] = feature;
+              const command = e.editor.getCommand(featureName);
+              if (command) {
+                buttonsToFeatures[command.uiItems[0].name] = featureName;
+              }
+            });
+
+            callback(features, buttonsToFeatures);
+          }
+        });
+      },
+
+      /**
+       * Retrieves the feature for a given button from featuresMetadata. Returns
+       * false if the given button is in fact a divider.
+       *
+       * @param {string} button
+       *   The name of a CKEditor button.
+       *
+       * @return {object}
+       *   The feature metadata object for a button.
+       */
+      getFeatureForButton(button) {
+        // Return false if the button being added is a divider.
+        if (button === '-') {
+          return false;
+        }
+
+        // Get a Drupal.editorFeature object that contains all metadata for
+        // the feature that was just added or removed. Not every feature has
+        // such metadata.
+        let featureName = this.model.get('buttonsToFeatures')[
+          button.toLowerCase()
+        ];
+        // Features without an associated command do not have a 'feature name' by
+        // default, so we use the lowercased button name instead.
+        if (!featureName) {
+          featureName = button.toLowerCase();
+        }
+        const featuresMetadata = this.model.get('featuresMetadata');
+        if (!featuresMetadata[featureName]) {
+          featuresMetadata[featureName] = new Drupal.EditorFeature(featureName);
+          this.model.set('featuresMetadata', featuresMetadata);
+        }
+        return featuresMetadata[featureName];
+      },
+
+      /**
+       * Checks buttons against filter settings; disables disallowed buttons.
+       *
+       * @param {object} features
+       *   A map of {@link Drupal.EditorFeature} objects.
+       * @param {object} buttonsToFeatures
+       *   Object containing the button-to-feature mapping.
+       *
+       * @see Drupal.ckeditor.ControllerView#getFeatureForButton
+       */
+      disableFeaturesDisallowedByFilters(features, buttonsToFeatures) {
+        this.model.set('featuresMetadata', features);
+        // Store the button-to-feature mapping. Needs to happen only once, because
+        // the same buttons continue to have the same features; only the rules for
+        // specific features may change.
+        // @see getFeatureForButton()
+        this.model.set('buttonsToFeatures', buttonsToFeatures);
+
+        // Ensure that toolbar configuration changes are broadcast.
+        this.broadcastConfigurationChanges(this.$el);
+
+        // Initialization: not all of the default toolbar buttons may be allowed
+        // by the current filter settings. Remove any of the default toolbar
+        // buttons that require more permissive filter settings. The remaining
+        // default toolbar buttons are marked as "added".
+        let existingButtons = [];
+        // Loop through each button group after flattening the groups from the
+        // toolbar row arrays.
+        const buttonGroups = _.flatten(this.model.get('activeEditorConfig'));
+        for (let i = 0; i < buttonGroups.length; i++) {
+          // Pull the button names from each toolbar button group.
+          const buttons = buttonGroups[i].items;
+          for (let k = 0; k < buttons.length; k++) {
+            existingButtons.push(buttons[k]);
+          }
+        }
+        // Remove duplicate buttons.
+        existingButtons = _.unique(existingButtons);
+        // Prepare the active toolbar and available-button toolbars.
+        for (let n = 0; n < existingButtons.length; n++) {
+          const button = existingButtons[n];
+          const feature = this.getFeatureForButton(button);
+          // Skip dividers.
+          if (feature === false) {
+            continue;
+          }
+
+          if (Drupal.editorConfiguration.featureIsAllowedByFilters(feature)) {
+            // Existing toolbar buttons are in fact "added features".
             this.$el
               .find('.ckeditor-toolbar-active')
-              .trigger('CKEditorToolbarChanged', [
-                (prev.length < next.length) ? 'added' : 'removed',
-                _.difference(_.union(prev, next), _.intersection(prev, next))[0],
-              ]);
-          }
-        }
-      }
-    },
-
-    /**
-     * Asynchronously retrieve the metadata for all available CKEditor features.
-     *
-     * In order to get a list of all features needed by CKEditor, we create a
-     * hidden CKEditor instance, then check the CKEditor's "allowedContent"
-     * filter settings. Because creating an instance is expensive, a callback
-     * must be provided that will receive a hash of {@link Drupal.EditorFeature}
-     * features keyed by feature (button) name.
-     *
-     * @param {object} CKEditorConfig
-     *   An object that represents the configuration settings for a CKEditor
-     *   editor component.
-     * @param {function} callback
-     *   A function to invoke when the instanceReady event is fired by the
-     *   CKEditor object.
-     */
-    getCKEditorFeatures(CKEditorConfig, callback) {
-      const getProperties = function (CKEPropertiesList) {
-        return (_.isObject(CKEPropertiesList)) ? _.keys(CKEPropertiesList) : [];
-      };
-
-      const convertCKERulesToEditorFeature = function (feature, CKEFeatureRules) {
-        for (let i = 0; i < CKEFeatureRules.length; i++) {
-          const CKERule = CKEFeatureRules[i];
-          const rule = new Drupal.EditorFeatureHTMLRule();
-
-          // Tags.
-          const tags = getProperties(CKERule.elements);
-          rule.required.tags = (CKERule.propertiesOnly) ? [] : tags;
-          rule.allowed.tags = tags;
-          // Attributes.
-          rule.required.attributes = getProperties(CKERule.requiredAttributes);
-          rule.allowed.attributes = getProperties(CKERule.attributes);
-          // Styles.
-          rule.required.styles = getProperties(CKERule.requiredStyles);
-          rule.allowed.styles = getProperties(CKERule.styles);
-          // Classes.
-          rule.required.classes = getProperties(CKERule.requiredClasses);
-          rule.allowed.classes = getProperties(CKERule.classes);
-          // Raw.
-          rule.raw = CKERule;
-
-          feature.addHTMLRule(rule);
-        }
-      };
-
-      // Create hidden CKEditor with all features enabled, retrieve metadata.
-      // @see \Drupal\ckeditor\Plugin\Editor\CKEditor::buildConfigurationForm().
-      const hiddenCKEditorID = 'ckeditor-hidden';
-      if (CKEDITOR.instances[hiddenCKEditorID]) {
-        CKEDITOR.instances[hiddenCKEditorID].destroy(true);
-      }
-      // Load external plugins, if any.
-      const hiddenEditorConfig = this.model.get('hiddenEditorConfig');
-      if (hiddenEditorConfig.drupalExternalPlugins) {
-        const externalPlugins = hiddenEditorConfig.drupalExternalPlugins;
-        Object.keys(externalPlugins || {}).forEach((pluginName) => {
-          CKEDITOR.plugins.addExternal(pluginName, externalPlugins[pluginName], '');
-        });
-      }
-      CKEDITOR.inline($(`#${hiddenCKEditorID}`).get(0), CKEditorConfig);
-
-      // Once the instance is ready, retrieve the allowedContent filter rules
-      // and convert them to Drupal.EditorFeature objects.
-      CKEDITOR.once('instanceReady', (e) => {
-        if (e.editor.name === hiddenCKEditorID) {
-          // First collect all CKEditor allowedContent rules.
-          const CKEFeatureRulesMap = {};
-          const rules = e.editor.filter.allowedContent;
-          let rule;
-          let name;
-          for (let i = 0; i < rules.length; i++) {
-            rule = rules[i];
-            name = rule.featureName || ':(';
-            if (!CKEFeatureRulesMap[name]) {
-              CKEFeatureRulesMap[name] = [];
-            }
-            CKEFeatureRulesMap[name].push(rule);
-          }
-
-          // Now convert these to Drupal.EditorFeature objects. And track which
-          // buttons are mapped to which features.
-          // @see getFeatureForButton()
-          const features = {};
-          const buttonsToFeatures = {};
-          Object.keys(CKEFeatureRulesMap).forEach((featureName) => {
-            const feature = new Drupal.EditorFeature(featureName);
-            convertCKERulesToEditorFeature(feature, CKEFeatureRulesMap[featureName]);
-            features[featureName] = feature;
-            const command = e.editor.getCommand(featureName);
-            if (command) {
-              buttonsToFeatures[command.uiItems[0].name] = featureName;
-            }
-          });
-
-          callback(features, buttonsToFeatures);
-        }
-      });
-    },
-
-    /**
-     * Retrieves the feature for a given button from featuresMetadata. Returns
-     * false if the given button is in fact a divider.
-     *
-     * @param {string} button
-     *   The name of a CKEditor button.
-     *
-     * @return {object}
-     *   The feature metadata object for a button.
-     */
-    getFeatureForButton(button) {
-      // Return false if the button being added is a divider.
-      if (button === '-') {
-        return false;
-      }
-
-      // Get a Drupal.editorFeature object that contains all metadata for
-      // the feature that was just added or removed. Not every feature has
-      // such metadata.
-      let featureName = this.model.get('buttonsToFeatures')[button.toLowerCase()];
-      // Features without an associated command do not have a 'feature name' by
-      // default, so we use the lowercased button name instead.
-      if (!featureName) {
-        featureName = button.toLowerCase();
-      }
-      const featuresMetadata = this.model.get('featuresMetadata');
-      if (!featuresMetadata[featureName]) {
-        featuresMetadata[featureName] = new Drupal.EditorFeature(featureName);
-        this.model.set('featuresMetadata', featuresMetadata);
-      }
-      return featuresMetadata[featureName];
-    },
-
-    /**
-     * Checks buttons against filter settings; disables disallowed buttons.
-     *
-     * @param {object} features
-     *   A map of {@link Drupal.EditorFeature} objects.
-     * @param {object} buttonsToFeatures
-     *   Object containing the button-to-feature mapping.
-     *
-     * @see Drupal.ckeditor.ControllerView#getFeatureForButton
-     */
-    disableFeaturesDisallowedByFilters(features, buttonsToFeatures) {
-      this.model.set('featuresMetadata', features);
-      // Store the button-to-feature mapping. Needs to happen only once, because
-      // the same buttons continue to have the same features; only the rules for
-      // specific features may change.
-      // @see getFeatureForButton()
-      this.model.set('buttonsToFeatures', buttonsToFeatures);
-
-      // Ensure that toolbar configuration changes are broadcast.
-      this.broadcastConfigurationChanges(this.$el);
-
-      // Initialization: not all of the default toolbar buttons may be allowed
-      // by the current filter settings. Remove any of the default toolbar
-      // buttons that require more permissive filter settings. The remaining
-      // default toolbar buttons are marked as "added".
-      let existingButtons = [];
-      // Loop through each button group after flattening the groups from the
-      // toolbar row arrays.
-      const buttonGroups = _.flatten(this.model.get('activeEditorConfig'));
-      for (let i = 0; i < buttonGroups.length; i++) {
-        // Pull the button names from each toolbar button group.
-        const buttons = buttonGroups[i].items;
-        for (let k = 0; k < buttons.length; k++) {
-          existingButtons.push(buttons[k]);
-        }
-      }
-      // Remove duplicate buttons.
-      existingButtons = _.unique(existingButtons);
-      // Prepare the active toolbar and available-button toolbars.
-      for (let n = 0; n < existingButtons.length; n++) {
-        const button = existingButtons[n];
-        const feature = this.getFeatureForButton(button);
-        // Skip dividers.
-        if (feature === false) {
-          continue;
-        }
-
-        if (Drupal.editorConfiguration.featureIsAllowedByFilters(feature)) {
-          // Existing toolbar buttons are in fact "added features".
-          this.$el.find('.ckeditor-toolbar-active').trigger('CKEditorToolbarChanged', ['added', existingButtons[n]]);
-        }
-        else {
-          // Move the button element from the active the active toolbar to the
-          // list of available buttons.
-          $(`.ckeditor-toolbar-active li[data-drupal-ckeditor-button-name="${button}"]`)
-            .detach()
-            .appendTo('.ckeditor-toolbar-disabled > .ckeditor-toolbar-available > ul');
-          // Update the toolbar value field.
-          this.model.set({ isDirty: true }, { broadcast: false });
-        }
-      }
-    },
-
-    /**
-     * Sets up broadcasting of CKEditor toolbar configuration changes.
-     *
-     * @param {jQuery} $ckeditorToolbar
-     *   The active toolbar DOM element wrapped in jQuery.
-     */
-    broadcastConfigurationChanges($ckeditorToolbar) {
-      const view = this;
-      const hiddenEditorConfig = this.model.get('hiddenEditorConfig');
-      const getFeatureForButton = this.getFeatureForButton.bind(this);
-      const getCKEditorFeatures = this.getCKEditorFeatures.bind(this);
-      $ckeditorToolbar
-        .find('.ckeditor-toolbar-active')
-        // Listen for CKEditor toolbar configuration changes. When a button is
-        // added/removed, call an appropriate Drupal.editorConfiguration method.
-        .on('CKEditorToolbarChanged.ckeditorAdmin', (event, action, button) => {
-          const feature = getFeatureForButton(button);
-
-          // Early-return if the button being added is a divider.
-          if (feature === false) {
-            return;
-          }
-
-          // Trigger a standardized text editor configuration event to indicate
-          // whether a feature was added or removed, so that filters can react.
-          const configEvent = (action === 'added') ? 'addedFeature' : 'removedFeature';
-          Drupal.editorConfiguration[configEvent](feature);
-        })
-        // Listen for CKEditor plugin settings changes. When a plugin setting is
-        // changed, rebuild the CKEditor features metadata.
-        .on('CKEditorPluginSettingsChanged.ckeditorAdmin', (event, settingsChanges) => {
-          // Update hidden CKEditor configuration.
-          Object.keys(settingsChanges || {}).forEach((key) => {
-            hiddenEditorConfig[key] = settingsChanges[key];
-          });
-
-          // Retrieve features for the updated hidden CKEditor configuration.
-          getCKEditorFeatures(hiddenEditorConfig, (features) => {
-            // Trigger a standardized text editor configuration event for each
-            // feature that was modified by the configuration changes.
-            const featuresMetadata = view.model.get('featuresMetadata');
-            Object.keys(features || {}).forEach((name) => {
-              const feature = features[name];
-              if (featuresMetadata.hasOwnProperty(name) && !_.isEqual(featuresMetadata[name], feature)) {
-                Drupal.editorConfiguration.modifiedFeature(feature);
+              .trigger('CKEditorToolbarChanged', ['added', existingButtons[n]]);
+          } else {
+            // Move the button element from the active the active toolbar to the
+            // list of available buttons.
+            $(
+              `.ckeditor-toolbar-active li[data-drupal-ckeditor-button-name="${button}"]`,
+            )
+              .detach()
+              .appendTo(
+                '.ckeditor-toolbar-disabled > .ckeditor-toolbar-available > ul',
+              );
+            // Update the toolbar value field.
+            this.model.set({ isDirty: true }, { broadcast: false });
+          }
+        }
+      },
+
+      /**
+       * Sets up broadcasting of CKEditor toolbar configuration changes.
+       *
+       * @param {jQuery} $ckeditorToolbar
+       *   The active toolbar DOM element wrapped in jQuery.
+       */
+      broadcastConfigurationChanges($ckeditorToolbar) {
+        const view = this;
+        const hiddenEditorConfig = this.model.get('hiddenEditorConfig');
+        const getFeatureForButton = this.getFeatureForButton.bind(this);
+        const getCKEditorFeatures = this.getCKEditorFeatures.bind(this);
+        $ckeditorToolbar
+          .find('.ckeditor-toolbar-active')
+          // Listen for CKEditor toolbar configuration changes. When a button is
+          // added/removed, call an appropriate Drupal.editorConfiguration method.
+          .on(
+            'CKEditorToolbarChanged.ckeditorAdmin',
+            (event, action, button) => {
+              const feature = getFeatureForButton(button);
+
+              // Early-return if the button being added is a divider.
+              if (feature === false) {
+                return;
               }
-            });
-            // Update the CKEditor features metadata.
-            view.model.set('featuresMetadata', features);
+
+              // Trigger a standardized text editor configuration event to indicate
+              // whether a feature was added or removed, so that filters can react.
+              const configEvent =
+                action === 'added' ? 'addedFeature' : 'removedFeature';
+              Drupal.editorConfiguration[configEvent](feature);
+            },
+          )
+          // Listen for CKEditor plugin settings changes. When a plugin setting is
+          // changed, rebuild the CKEditor features metadata.
+          .on(
+            'CKEditorPluginSettingsChanged.ckeditorAdmin',
+            (event, settingsChanges) => {
+              // Update hidden CKEditor configuration.
+              Object.keys(settingsChanges || {}).forEach(key => {
+                hiddenEditorConfig[key] = settingsChanges[key];
+              });
+
+              // Retrieve features for the updated hidden CKEditor configuration.
+              getCKEditorFeatures(hiddenEditorConfig, features => {
+                // Trigger a standardized text editor configuration event for each
+                // feature that was modified by the configuration changes.
+                const featuresMetadata = view.model.get('featuresMetadata');
+                Object.keys(features || {}).forEach(name => {
+                  const feature = features[name];
+                  if (
+                    featuresMetadata.hasOwnProperty(name) &&
+                    !_.isEqual(featuresMetadata[name], feature)
+                  ) {
+                    Drupal.editorConfiguration.modifiedFeature(feature);
+                  }
+                });
+                // Update the CKEditor features metadata.
+                view.model.set('featuresMetadata', features);
+              });
+            },
+          );
+      },
+
+      /**
+       * Returns the list of buttons from an editor configuration.
+       *
+       * @param {object} config
+       *   A CKEditor configuration object.
+       *
+       * @return {Array}
+       *   A list of buttons in the CKEditor configuration.
+       */
+      getButtonList(config) {
+        const buttons = [];
+        // Remove the rows.
+        config = _.flatten(config);
+
+        // Loop through the button groups and pull out the buttons.
+        config.forEach(group => {
+          group.items.forEach(button => {
+            buttons.push(button);
           });
         });
+
+        // Remove the dividing elements if any.
+        return _.without(buttons, '-');
+      },
     },
-
-    /**
-     * Returns the list of buttons from an editor configuration.
-     *
-     * @param {object} config
-     *   A CKEditor configuration object.
-     *
-     * @return {Array}
-     *   A list of buttons in the CKEditor configuration.
-     */
-    getButtonList(config) {
-      const buttons = [];
-      // Remove the rows.
-      config = _.flatten(config);
-
-      // Loop through the button groups and pull out the buttons.
-      config.forEach((group) => {
-        group.items.forEach((button) => {
-          buttons.push(button);
-        });
-      });
-
-      // Remove the dividing elements if any.
-      return _.without(buttons, '-');
-    },
-  });
-}(jQuery, Drupal, Backbone, CKEDITOR, _));
+  );
+})(jQuery, Drupal, Backbone, CKEDITOR, _);