Using !important code provided here breaks background image and gradient.

I only see the issue with composite/stack style manager properties and that is because not every style manager property is part of the styles so in your code you would only need to check if the value of the style actually exists, eg. if (value && value.indexOf('!important') === -1) {...

Thanks for reporting this, @clonefunnels.

Great question about Using !important code provided here breaks background image and gradient.. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!