Add editor.select(el) method

index.html

@@ -1328,6 +1328,10 @@ <h1 class="heading">Insert title here</h1>
       //console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue);
     })
 
+    editor.on('block:drag:stop', function(model) {
+      editor.select(model);
+    });
+
     editor.render();
     </script>
   </body>

src/editor/index.js

@@ -329,15 +329,32 @@ module.exports = config => {
       }
     },
 
+    /**
+     * Select a component
+     * @param  {Component|HTMLElement} el Component to select
+     * @return {this}
+     * @example
+     * // Select dropped block
+     * editor.on('block:drag:stop', function(model) {
+     *  editor.select(model);
+     * });
+     */
+    select(el) {
+      em.setSelected(el);
+      return this;
+    },
+
     /**
      * Set device to the editor. If the device exists it will
      * change the canvas to the proper width
+     * @param {string} name Name of the device
      * @return {this}
      * @example
      * editor.setDevice('Tablet');
      */
     setDevice(name) {
-      return em.set('device', name);
+      em.set('device', name);
+      return this;
     },
 
     /**

src/editor/model/Editor.js

@@ -333,6 +333,21 @@ module.exports = Backbone.Model.extend({
     return this.get('selectedComponent');
   },
 
+  /**
+   * Select a component
+   * @param  {Component|HTMLElement} el Component to select
+   * @private
+   */
+  setSelected(el) {
+    let model = el;
+
+    if (el instanceof HTMLElement) {
+      model = $(el).data('model');
+    }
+
+    this.set('selectedComponent', model);
+  },
+
   /**
    * Set components inside editor's canvas. This method overrides actual components
    * @param {Object|string} components HTML string or components model