Style manage Custom Property type UI : Custom Composite UI for Padding Property

[mythily-palanisamy]

Hello,

I'm currently using GrapesJS and have created a custom composite UI for the padding property, which includes individual controls for each side (top, right, bottom, left). However, I'm encountering an issue when trying to retrieve the padding value of an element that has a default padding value set (for example, 10px 25px).

In my custom addType method, I have an update function that is supposed to get the current value of the padding property. However, it seems to only return the overall padding value, not the individual values for each side.

Here's a simplified version of my code:

editor.StyleManager.addType('custom-padding', {
    create({ props }) {
        // ...
    },
    update(value, { el }) {
        // Here, value seems to be the overall padding value, not the individual values for each side
        // i expect value `10px 25px` but its gives 0 
    },
});

editor.StyleManager.addSector('mySector', {
    name: 'My Sector',
    open: true,
    properties: [
        { property: 'padding', type: 'custom-padding',},
    ],
});

Could you please clarify how I can retrieve the individual padding values for each side in the update method? Any help would be greatly appreciated.

[artf]

When you use property: 'padding' you will get the exact value of the CSS rule selected. You can get the selected CSS rule via StyleManager.getSelected()