Merge branch 'dev' into symbols-2

package-lock.json

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

package.json

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

src/block_manager/view/BlockView.js

@@ -102,7 +102,7 @@ export default Backbone.View.extend({
 
       if (model.get('activate') || oldActive) {
         result.trigger('active');
-        result.set(oldKey, 0);
+        result.unset(oldKey);
       }
 
       if (model.get('select')) {

src/block_manager/view/BlocksView.js

@@ -81,13 +81,15 @@ export default Backbone.View.extend({
    * @private
    */
   onDrop(model) {
-    const em = this.em;
+    const { em } = this;
     em.runDefault();
 
     if (model && model.get) {
-      if (model.get('activeOnRender')) {
+      const oldActive = 'activeOnRender';
+
+      if (model.get(oldActive)) {
         model.trigger('active');
-        model.set('activeOnRender', 0);
+        model.unset(oldActive);
       }
 
       em.trigger('block:drag:stop', model);

src/commands/index.js

@@ -149,12 +149,14 @@ export default () => {
             em.trigger(eventDrag, data);
           };
           const onEnd = (e, opts, data) => {
-            em.runDefault(defComOptions);
             selAll.forEach(sel => sel.set('status', 'selected'));
             ed.select(selAll);
             sel.emitUpdate();
             em.trigger(`${eventDrag}:end`, data);
 
+            // Defer selectComponent in order to prevent canvas "freeze" #2692
+            setTimeout(() => em.runDefault(defComOptions));
+
             // Dirty patch to prevent parent selection on drop
             (altMode || data.cancelled) && em.set('_cmpDrag', 1);
           };

src/dom_components/model/Component.js

@@ -469,7 +469,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
         const propOrig = this.getStyle();
         this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state });
         const diff = shallowDiff(propOrig, prop);
-        this.set('style', {}, { silent: 1 });
+        this.set('style', '', { silent: 1 });
         keys(diff).forEach(pr => this.trigger(`change:style:${pr}`));
       } else {
         prop = Styleable.setStyle.apply(this, arguments);
@@ -1091,7 +1091,6 @@ const Component = Backbone.Model.extend(Styleable).extend(
       });
 
       attr.status = '';
-      attr.view = '';
       opts.collection = null;
 
       const cloned = new this.constructor(attr, opts);
@@ -1222,11 +1221,11 @@ const Component = Backbone.Model.extend(Styleable).extend(
         }
       }
 
-      let attrString = attrs.length ? ` ${attrs.join(' ')}` : '';
-      let code = `<${tag}${attrString}${sTag ? '/' : ''}>${model.get(
-        'content'
-      )}`;
-      model.get('components').each(comp => (code += comp.toHTML(opts)));
+      const comps = model.get('components');
+      const content = !comps.length ? model.get('content') : '';
+      const attrString = attrs.length ? ` ${attrs.join(' ')}` : '';
+      let code = `<${tag}${attrString}${sTag ? '/' : ''}>${content}`;
+      comps.forEach(comp => (code += comp.toHTML(opts)));
       !sTag && (code += `</${tag}>`);
 
       return code;

src/dom_components/view/ComponentView.js

@@ -331,7 +331,9 @@ export default Backbone.View.extend({
    * @private
    * */
   updateContent() {
-    this.getChildrenContainer().innerHTML = this.model.get('content');
+    const content = this.model.get('content');
+    const hasComps = this.model.components().length;
+    this.getChildrenContainer().innerHTML = hasComps ? '' : content;
   },
 
   /**

src/style_manager/view/PropertyColorView.js

@@ -10,7 +10,7 @@ export default PropertyIntegerView.extend({
   remove() {
     PropertyIntegerView.prototype.remove.apply(this, arguments);
     const inp = this.inputInst;
-    inp && inp.remove();
+    inp && inp.remove && inp.remove();
     ['inputInst', '$color'].forEach(i => (this[i] = {}));
   },