Fix layer visibility toggle (GrapesJS#6564)

* Fix issue on toggling layer view

* Update tests for moving inline styles from components to css rules

* update style data variable tests

Author: mohamedsalem401

packages/core/src/dom_components/model/Component.ts

@@ -331,6 +331,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
         cssc.addCollection(styles, { avoidUpdateStyle: true }, { group: `cmp:${type}` });
       }
 
+      this._moveInlineStyleToRule();
       this.__postAdd();
       this.init();
       isSymbol(this) && initSymbol(this);
@@ -847,8 +848,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
       const state = em.get('state');
       const cc = em.Css;
       const propOrig = this.getStyle({ ...opts, skipResolve: true });
-      const newStyle = { ...propOrig, ...prop };
-      this.rule = cc.setIdRule(this.getId(), newStyle, { state, ...opts });
+      this.rule = cc.setIdRule(this.getId(), prop, { state, ...opts });
       const diff = shallowDiff(propOrig, prop);
       this.set('style', '', { silent: true });
       keys(diff).forEach((pr) => this.trigger(`change:style:${pr}`));
@@ -2029,6 +2029,18 @@ export default class Component extends StyleableModel<ComponentProperties> {
     return rule?.get('selectors')!.at(0);
   }
 
+  private _moveInlineStyleToRule() {
+    const inlineStyle = this.get('style');
+    const hasInlineStyle =
+      (isString(inlineStyle) && inlineStyle.length > 0) ||
+      (isObject(inlineStyle) && Object.keys(inlineStyle).length > 0);
+
+    if (avoidInline(this.em) && hasInlineStyle) {
+      this.addStyle(inlineStyle);
+      this.set('style', '');
+    }
+  }
+
   _idUpdated(m: any, v: any, opts: { idUpdate?: boolean } = {}) {
     if (opts.idUpdate) return;
 

packages/core/test/specs/data_sources/model/StyleDataVariable.ts

@@ -246,7 +246,7 @@ describe('StyleDataVariable', () => {
       })[0];
       expect(cmp.getStyle()).toEqual({ color: 'red' });
       const width = { type: DataVariableType, path: 'data1.rec1.width' };
-      cmp.setStyle({ width });
+      cmp.addStyle({ width });
 
       expect(cmp.getStyle({ skipResolve: true })).toEqual({ color, width });
     });

packages/core/test/specs/dom_components/index.ts

@@ -263,9 +263,10 @@ describe('DOM Components', () => {
       <style>
         #${id} { background-color: red }
       </style>`) as Component;
-      obj.getComponents().first().addStyle({ margin: '10px' });
       const rule = cc.getAll().at(0);
-      const css = `#${id}{background-color:red;margin:10px;color:red;padding:50px 100px;}`;
+      expect(rule.toCSS()).toEqual(`#${id}{background-color:red;color:red;padding:50px 100px;}`);
+      obj.getComponents().first().addStyle({ margin: '10px' });
+      const css = `#${id}{background-color:red;color:red;padding:50px 100px;margin:10px;}`;
       expect(rule.toCSS()).toEqual(css);
 
       setTimeout(() => {
@@ -438,10 +439,16 @@ describe('DOM Components', () => {
       expect(em.getHtml({ component })).toEqual(`<div id="${id}">Text</div>`);
       expect(Components.getComponents().length).toEqual(1);
       const firstComp = Components.getComponents().first();
+      const rule = Css.getIdRule(id);
+      expect(rule!.getStyle()).toEqual({
+        color: 'red',
+        'background-color': 'red',
+        padding: '50px 100px',
+      });
       firstComp.addStyle({ margin: '10px' });
       firstComp.addStyle('width', '100px');
       expect(Css.getAll().length).toEqual(1);
-      expect(Css.getIdRule(id)!.getStyle()).toEqual({
+      expect(rule!.getStyle()).toEqual({
         color: 'red',
         'background-color': 'red',
         padding: '50px 100px',