Enable component title editing by dblclick on input

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "grapesjs",
-  "version": "0.12.32",
+  "version": "0.12.35",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.12.32",
+  "version": "0.12.35",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/code_manager/model/CssGenerator.js

@@ -1,4 +1,4 @@
-import { keys } from 'underscore';
+import { isEmpty } from 'underscore';
 
 module.exports = require('backbone').Model.extend({
 
@@ -19,14 +19,15 @@ module.exports = require('backbone').Model.extend({
     const style = model.get('style');
     const classes = model.get('classes');
     const wrappesIsBody = opts.wrappesIsBody;
+    const isWrapper = model.get('wrapper');
     this.ids.push(`#${model.getId()}`);
 
     // Let's know what classes I've found
     classes.each(model => this.compCls.push(model.getFullName()));
 
-    if (style && keys(style).length && !avoidInline) {
+    if ((!isEmpty(style) && !avoidInline) || isWrapper) {
       let selector = `#${model.getId()}`;
-      selector = wrappesIsBody && model.get('wrapper') ? 'body' : selector;
+      selector = wrappesIsBody && isWrapper ? 'body' : selector;
       code = `${selector}{${model.styleToString()}}`;
     }
 

src/navigator/view/ItemView.js

@@ -9,7 +9,7 @@ module.exports = Backbone.View.extend({
     'click [data-toggle-visible]': 'toggleVisibility',
     'click [data-toggle-select]': 'handleSelect',
     'click [data-toggle-open]': 'toggleOpening',
-    'click [data-toggle-edit]': 'handleEdit',
+    'dblclick input': 'handleEdit',
     'focusout input': 'handleEditEnd',
   },
 
@@ -19,9 +19,8 @@ module.exports = Backbone.View.extend({
   <% } %>
 
   <div class="<%= prefix %>title-c">
-    <div class="<%= prefix %>title <%= addClass %>" style="padding-left: <%= 42 + level * 10 %>px" data-toggle-select>
+    <div class="<%= prefix %>title <%= addClass %>" style="padding-left: <%= 30 + level * 10 %>px" data-toggle-select>
       <div class="<%= prefix %>title-inn">
-        <i class="fa fa-pencil <%= editBtnCls %>" data-toggle-edit></i>
         <i id="<%= prefix %>caret" class="fa fa-chevron-right <%= caretCls %>" data-toggle-open></i>
         <%= icon %>
         <input class="<%= ppfx %>no-app <%= inputNameCls %>" value="<%= title %>" readonly>