Add custom option to StyleManager

src/style_manager/config/config.js

@@ -25,5 +25,8 @@ export default {
   clearProperties: true,
 
   // Properties not to take in account for computed styles
-  avoidComputed: ['width', 'height']
+  avoidComputed: ['width', 'height'],
+
+  // Avoid rendering the default style manager.
+  custom: false,
 };

src/style_manager/index.js

@@ -555,7 +555,7 @@ export default () => {
 
     __upProps(opts) {
       const lastTarget = this.getLastSelected();
-      if (!lastTarget || !this.em.getConfig('customUI')) return;
+      if (!lastTarget || !this.getConfig().custom) return;
 
       const lastTargetParents = this.getSelectedParents();
       const style = lastTarget.getStyle();

src/style_manager/model/Property.js

@@ -16,7 +16,7 @@ export default class Property extends Model {
   }
 
   __hasCustom() {
-    return !!this.em?.getConfig('customUI');
+    return !!this.em?.get('StyleManager').getConfig().custom;
   }
 
   __getParentProp() {

test/specs/style_manager/model/Properties.js

@@ -7,11 +7,15 @@ describe('StyleManager properties logic', () => {
   let dv;
   let cssc;
   let sm;
+  let cmp;
+  let rule1;
+  let rule2;
 
   beforeEach(() => {
     em = new Editor({
       mediaCondition: 'max-width',
       avoidInlineStyle: true,
+      styleManager: { custom: true },
     });
     domc = em.get('DomComponents');
     cssc = em.get('CssComposer');
@@ -19,6 +23,13 @@ describe('StyleManager properties logic', () => {
     sm = em.get('SelectorManager');
     obj = em.get('StyleManager');
     em.get('PageManager').onLoad();
+    cmp = domc.addComponent(`<div class="cls"></div>`);
+    [rule1, rule2] = cssc.addRules(`
+        .cls { color: red; }
+        @media (max-width: 992px) {
+            .cls { color: blue; }
+        }
+    `);
   });
 
   afterEach(() => {
@@ -29,7 +40,9 @@ describe('StyleManager properties logic', () => {
   describe('Composite type', () => {
     const sectorTest = 'sector-test';
     const propTest = 'padding';
+    const propInTest = 'padding-top';
     let compTypeProp;
+    let compTypePropInn;
 
     beforeEach(() => {
       obj.addSector(sectorTest, {
@@ -41,10 +54,27 @@ describe('StyleManager properties logic', () => {
         ],
       });
       compTypeProp = obj.getProperty(sectorTest, propTest);
+      compTypePropInn = compTypeProp.getProperty(propInTest);
+      em.setSelected(cmp);
+      obj.__upSel();
     });
 
     test('Property exists', () => {
       expect(compTypeProp).toBeTruthy();
+      expect(compTypeProp.getProperties().length).toBe(4);
+    });
+
+    test('Has inner property', () => {
+      expect(compTypePropInn).toBeTruthy();
+    });
+
+    test('Rule selected', () => {
+      expect(obj.getLastSelected()).toBe(rule1);
+    });
+
+    test('Updating inner property, it reflects on the rule', () => {
+      compTypePropInn.upValue('55');
+      expect(rule1.getStyle()).toBe(1);
     });
   });
 });