Style Manager Issue.

[Abhisheknanda1344463]

Hi @artf I want to hide and show style properties for specific component. After referencing this issue https://github.com/artf/grapesjs/issues/1428

I've write my code this way but it's giving me error -:

export default (editor, config) => {
  const sm = editor.StyleManager;
  const csm = config.customStyleManager;

  // Show Style when shape Divider
  editor.on('component:selected', function(component) {
    if(component.attributes.type == 'shape-divider') {
      sm.addSector('style_options',{
        name: 'Style Options',
        open: true,
        buildProps: ['display','width',  'height', 'color'],
        properties: [{
          name: 'Visibility',
          property: 'display',
          type: 'radio',
          list: [{
              name: 'Visibility',
              value: 'inherit'
          }, {
              name: 'Hidden',
              value: 'none'
          }],
        },{
          name: 'Fill Color',
          property: 'color'
        }]
      });
    sm.removeSector('layout');
  });

  editor.on('component:deselected', function(component) {
    if(component.attributes.type === 'shape-divider') {
      sm.removeSector('style_options');
      sm.addSector('layout');
    }
  })

Could you please help @artf ? after doing this sm.removeSector('layout'); It's not finding the "style sector" (Layout) object. What is best possible solution in this case because for shape divider i want to show the specific sector.

[artf]

Hi @Abhisheknanda1344463 did you try to follow my indications here? You don't need to add/remove sectors on each select just play with component properties

[Abhisheknanda1344463]

@artf I've tried that but if i do like this https://github.com/artf/grapesjs/issues/1428#issuecomment-421640559 then it'll show the style sectors in which that properties are present. I want to show my custom only one style sector for specific component like one i've mentioned above. Don't know if you understand my use case. Please Guide me. Thanks

[artf]

Here a quick example of usage:

const plugin = (editor) => {
  const { Components, Blocks, Styles } = editor;
  [
    {
      type: 'simple',
      props: {
        components: 'Simple component',
      },
    },{
      type: 'special', 
      props: {
        components: 'Special component',
        'stylable-require': ['special-style'], // <- this component requires special styles
      },
    }
  ].forEach(({ type, props }) => {
    Components.addType(type, {
          model: {
            defaults: props,
          }
        });
        Blocks.add(type, {
          label: type,
          content: { type },
        });
  });

  Styles.addSector('special',{
    name: 'Special sector',
    open: true,
    properties: [
        {
        id: 'special-style',
        type: 'color',
    name: 'My property',
        property: 'color',
        toRequire: true, // <- This property will show up only if requested by component
      }
     ]
  }, { at: 0 });
}

const editor = grapesjs.init({
  container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: false,
  plugins: [plugin]
});

https://jsfiddle.net/1tvrLqem/1/ As you can see the sector will hide if there are no properties to show

[abhi-161994]

@artf I Got your point here but if you see in the fiddle after dropping special component other style sectors are also listed there. i just want to show that "special style sector" only with hiding other sectors.

[artf]

Just indicate, for the "special" component, an array of stylable properties

stylable: ['special-style'],
'stylable-require': ['special-style'],