Disable undo manager before adding rules on component selection. Fixes …

…GrapesJS#268

index.html

@@ -25,7 +25,7 @@
           </nav>
           <div class="clearfix"></div>
           <div class="lead-title">Build your templates without coding</div>
-          <div class="sub-lead-title">All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel</div>
+          <div class="sub-lead-titleTEST">All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel</div>
           <div class="lead-btn">Hover me</div>
         </div>
       </header>
@@ -831,6 +831,7 @@ <h1 class="bdg-title">The team</h1>
       fromElement: true,
       clearOnRender: 0,
 
+      storageManager: {autoload: 0},
 
       commands:     {
           defaults: [{
@@ -1327,27 +1328,6 @@ <h1 class="heading">Insert title here</h1>
       //console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue);
     });
 
-    var am = editor.AssetManager;
-
-    am.addType('image', {
-  // As you adding on top of an already defined type you can avoid indicating
-  // `am.getType('image').view.extend({...` the editor will do it by default
-  // but you can eventually extend some other type
-  view: {
-    // If you want to see more methods to extend check out
-    // https://github.com/artf/grapesjs/blob/dev/src/asset_manager/view/AssetImageView.js
-    onRemove(e) {
-      e.stopPropagation();
-      const model = this.model;
-
-      if (confirm('Are you sure?')) {
-        model.collection.remove(model);
-      }
-    }
-  },
-})
-
-
     editor.render();
     </script>
   </body>

package.json

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

src/domain_abstract/ui/InputNumber.js

@@ -139,6 +139,7 @@ module.exports = Backbone.View.extend({
     value = isNaN(value) ? 1 : parseInt(value, 10) + 1;
     var valid = this.validateInputValue(value);
     this.model.set('value', valid.value);
+    this.elementUpdated();
   },
 
   /**
@@ -149,6 +150,7 @@ module.exports = Backbone.View.extend({
     value = isNaN(value) ? 0 : parseInt(value, 10) - 1;
     var valid = this.validateInputValue(value);
     this.model.set('value', valid.value);
+    this.elementUpdated();
   },
 
   /**

src/style_manager/view/PropertyView.js

@@ -220,6 +220,7 @@ module.exports = Backbone.View.extend({
   /**
    * Get the value from the selected component of this property
    * @return {String}
+   * @deprecated use getTargetValue
    * */
   getComponentValue() {
     var propModel = this.model;
@@ -332,7 +333,8 @@ module.exports = Backbone.View.extend({
   },
 
   /**
-   * Returns value from inputs
+   * Returns the value composed for the target
+   * TODO put here the check for functionName
    * @return {string}
    */
   getValueForTarget() {
@@ -348,7 +350,8 @@ module.exports = Backbone.View.extend({
   },
 
   /**
-   * Property was changed, so I need to update the component too
+   * Triggers when the 'value' of the model changes, so I have to update
+   * the target model
    * @param   {Object}  e  Events
    * @param    {Mixed}    val  Value
    * @param    {Object}  opt  Options
@@ -392,27 +395,26 @@ module.exports = Backbone.View.extend({
 
   /**
    * Update target style
-   * @param  {string} propertyValue
-   * @param  {string} propertyName
+   * @param  {string} value
+   * @param  {string} name
    * @param  {Object} opts
    */
-  updateTargetStyle(propertyValue, propertyName, opts) {
-    var propName = propertyName || this.property;
-    var value = propertyValue || '';
-    var avSt = opts ? opts.avoidStore : 0;
-    var target = this.getTarget();
-    var targetStyle = _.clone(target.get('style'));
-
-    if(value)
-      targetStyle[propName] = value;
-    else
-      delete targetStyle[propName];
+  updateTargetStyle(value, name = '', opts = {}) {
+    const property = name || this.model.get('property');
+    const target = this.getTarget();
+    const style = target.getStyle();
 
-    target.set('style', targetStyle, { avoidStore : avSt});
+    if (value) {
+      style[property] = value;
+    } else {
+      delete style[property];
+    }
 
-    // Helper exists when is active a State in Style Manager
-    let helper = this.getHelperModel();
-    helper && helper.setStyle(targetStyle, {avoidStore: avSt});
+    target.setStyle(style, opts);
+    console.log('update target with ',style, opts, target.getStyle(), target.cid, target.attributes);
+    // Helper is used by `states` like ':hover' to show its preview
+    const helper = this.getHelperModel();
+    helper && helper.setStyle(targetStyle, opts);
   },
 
   /**

src/style_manager/view/SectorsView.js

@@ -35,6 +35,7 @@ module.exports = Backbone.View.extend({
   targetUpdated() {
     var em = this.target;
     var el = em.get('selectedComponent');
+    const um = em.get('UndoManager');
 
     if(!el)
       return;
@@ -62,9 +63,15 @@ module.exports = Backbone.View.extend({
       var iContainer = cssC.get(valid, state, mediaText);
 
       if (!iContainer && valid.length) {
+        // I stop undo manager here as after adding the CSSRule (generally after
+        // selecting the component) and calling undo() it will remove the rule from
+        // the collection, therefore updating it in style manager will not affect it
+        // #268
+        um.stopTracking();
         iContainer = cssC.add(valid, state, mediaText);
         iContainer.set('style', el.get('style'));
         el.set('style', {});
+        um.startTracking();
       }
 
       if (!iContainer) {