From 6436e4ec7424e4901e7e02127e28af3e79583f16 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 17 Aug 2017 13:39:38 +0200
Subject: [PATCH] Add `editor.select(el)` method

---
 index.html                 |  4 ++++
 src/editor/index.js        | 19 ++++++++++++++++++-
 src/editor/model/Editor.js | 15 +++++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 7f48850a32..40e079b617 100755
--- a/index.html
+++ b/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>
diff --git a/src/editor/index.js b/src/editor/index.js
index 4df32e796e..67a88b1ec5 100644
--- a/src/editor/index.js
+++ b/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;
     },
 
     /**
diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js
index 9bcb392f15..5c48d89c81 100644
--- a/src/editor/model/Editor.js
+++ b/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