Trigger store and undo manager on `src` change. Closes #541

package-lock.json

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

package.json

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

src/dom_components/model/ComponentImage.js

@@ -2,7 +2,7 @@ var Component = require('./Component');
 
 module.exports = Component.extend({
 
-  defaults: _.extend({}, Component.prototype.defaults, {
+  defaults: { ...Component.prototype.defaults,
     type: 'image',
     tagName: 'img',
     src: '',
@@ -12,7 +12,7 @@ module.exports = Component.extend({
     highlightable: 0,
     resizable: 1,
     traits: ['alt']
-  }),
+  },
 
   initialize(o, opt) {
     Component.prototype.initialize.apply(this, arguments);

src/dom_components/view/ComponentImageView.js

@@ -11,31 +11,29 @@ module.exports = ComponentView.extend({
   },
 
   initialize(o) {
+    const model = this.model;
     ComponentView.prototype.initialize.apply(this, arguments);
-    this.listenTo(this.model, 'change:src', this.updateSrc);
-    this.listenTo(this.model, 'dblclick active', this.openModal);
-    this.classEmpty = this.ppfx + 'plh-image';
-
-    if(this.config.modal)
-      this.modal = this.config.modal;
-
-    if(this.config.am)
-      this.am = this.config.am;
+    this.listenTo(model, 'change:src', this.updateSrc);
+    this.listenTo(model, 'dblclick active', this.openModal);
+    this.classEmpty = `${this.ppfx}plh-image`;
+    const config = this.config;
+    config.modal && (this.modal = config.modal);
+    config.am && (this.am = config.am);
   },
 
+
   /**
    * Update src attribute
    * @private
    * */
   updateSrc() {
-    var src = this.model.get("src");
-    this.$el.attr('src', src);
-    if(!src)
-      this.$el.addClass(this.classEmpty);
-    else
-      this.$el.removeClass(this.classEmpty);
+    const src = this.model.get("src");
+    const el = this.$el;
+    el.attr('src', src);
+    el[src ? 'removeClass' : 'addClass'](this.classEmpty);
   },
 
+
   /**
    * Open dialog for image changing
    * @param  {Object}  e  Event
@@ -56,6 +54,7 @@ module.exports = ComponentView.extend({
     }
   },
 
+
   render() {
     this.updateAttributes();
     this.updateClasses();

src/editor/model/Editor.js

@@ -281,9 +281,9 @@ module.exports = Backbone.Model.extend({
             return;
           } else {
             var obj = {
-                "object": model,
-                "before": beforeCache,
-                "after": model.toJSON()
+                object: model,
+                before: beforeCache,
+                after: model.toJSON()
             };
             beforeCache = null;
             return obj;
@@ -305,6 +305,7 @@ module.exports = Backbone.Model.extend({
       UndoManager.addUndoType("change:style", customUndoType);
       UndoManager.addUndoType("change:attributes", customUndoType);
       UndoManager.addUndoType("change:content", customUndoType);
+      UndoManager.addUndoType("change:src", customUndoType);
     }
   },
 
@@ -349,7 +350,7 @@ module.exports = Backbone.Model.extend({
     this.stopListening(classes, 'add remove', this.handleUpdates);
     this.listenTo(classes, 'add remove', this.handleUpdates);
 
-    var evn = 'change:style change:content change:attributes';
+    var evn = 'change:style change:content change:attributes change:src';
     this.stopListening(model, evn, this.handleUpdates);
     this.listenTo(model, evn, this.handleUpdates);