Update clear button in style manager

README.md

@@ -6,8 +6,7 @@
 <p align="center"><img src="http://grapesjs.com/img/grapesjs-front-page-m.jpg" alt="GrapesJS" width="500" align="center"/></p>
 
 
-GrapesJS is a free and open source Web Builder Framework which helps you building HTML templates to be used inside sites, newsletters and mobile apps.
-Mainly GrapesJS was designed to be used inside a [CMS] to speed up a creation of dynamic templates. To better understand this concept check the image below
+GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a [CMS] to speed up the creation of dynamic templates. To better understand this concept check the image below
 
 <br/>
 <p align="center"><img src="http://grapesjs.com/img/gjs-concept.png" alt="GrapesJS - Style Manager" height="400" align="center"/></p>

src/style_manager/config/config.js

@@ -21,7 +21,7 @@ module.exports = {
   showComputed: true,
 
   // Adds the possibility to clear property value from the target style
-  clearProperties: false,
+  clearProperties: 0,
 
   // Properties not to take in account for computed styles
   avoidComputed: ['width', 'height'],

src/style_manager/view/PropertyView.js

@@ -1,6 +1,8 @@
 import { bindAll, isArray } from 'underscore';
 import { camelCase } from 'utils/mixins';
 
+const clearProp = 'data-clear-style';
+
 module.exports = Backbone.View.extend({
 
   template(model) {
@@ -23,7 +25,7 @@ module.exports = Backbone.View.extend({
       <span class="${pfx}icon ${icon}" title="${info}">
         ${model.get('name')}
       </span>
-      <b class="${pfx}clear">&Cross;</b>
+      <b class="${pfx}clear" ${clearProp}>&Cross;</b>
     `;
   },
 
@@ -36,7 +38,8 @@ module.exports = Backbone.View.extend({
   },
 
   events: {
-    'change': 'inputValueChanged'
+    'change': 'inputValueChanged',
+    [`click [${clearProp}]`]: 'clear',
   },
 
   initialize(o = {}) {
@@ -70,8 +73,6 @@ module.exports = Backbone.View.extend({
     this.listenTo(model, 'targetUpdated', this.targetUpdated);
     this.listenTo(model, 'change:visible', this.updateVisibility);
     this.listenTo(model, 'change:status', this.updateStatus);
-    this.events[`click .${pfx}clear`] = 'clear';
-    this.delegateEvents();
 
     const init = this.init && this.init.bind(this);
     init && init();
@@ -122,7 +123,7 @@ module.exports = Backbone.View.extend({
    * @return {HTMLElement}
    */
   getClearEl() {
-    return this.el.querySelector(`.${this.pfx}clear`);
+    return this.el.querySelector(`[${clearProp}]`);
   },
 
   /**