Support multiple removing

src/commands/index.js

@@ -38,7 +38,7 @@
  * },
  * ...
  */
-import { isFunction } from 'underscore';
+import { isFunction, isArray } from 'underscore';
 
 module.exports = () => {
   let em;
@@ -228,16 +228,25 @@ module.exports = () => {
         }
       };
       defaultCommands['core:component-delete'] = (ed, sender, opts = {}) => {
-        let component = opts.component || ed.getSelected();
-
-        if (!component || !component.get('removable')) {
-          console.warn('The element is not removable');
-          return;
-        }
+        let components = opts.component || ed.getSelectedAll();
+        components = isArray(components) ? [...components] : [components];
 
+        // It's important to deselect components first otherwise,
+        // with undo, the component will be set with the wrong `collection`
         ed.select(null);
-        component.destroy();
-        return component;
+
+        components.forEach(component => {
+          if (!component || !component.get('removable')) {
+            console.warn('The element is not removable', component);
+            return;
+          }
+          if (component) {
+            const coll = component.collection;
+            coll && coll.remove(component);
+          }
+        });
+
+        return components;
       };
 
       if (c.em) c.model = c.em.get('Canvas');

src/editor/index.js

@@ -367,13 +367,21 @@ module.exports = config => {
     },
 
     /**
-     * Returns selected component, if there is one
+     * Returns the last selected component, if there is one
      * @return {Model}
      */
     getSelected() {
       return em.getSelected();
     },
 
+    /**
+     * Returns an array of all selected components
+     * @return {Array}
+     */
+    getSelectedAll() {
+      return em.getSelectedAll();
+    },
+
     /**
      * Get a stylable entity from the selected component.
      * If you select a component without classes the entity is the Component

src/editor/model/Editor.js

@@ -217,6 +217,15 @@ module.exports = Backbone.Model.extend({
     return this.get('selected').last();
   },
 
+  /**
+   * Returns an array of all selected components
+   * @return {Array}
+   * @private
+   */
+  getSelectedAll() {
+    return this.get('selected').models;
+  },
+
   /**
    * Select a component
    * @param  {Component|HTMLElement} el Component to select