Can't remove border of element

Hi @kuhelbeher with the new https://github.com/artf/grapesjs/releases/tag/v0.18.1 release this can be handled.

The main issue here is how the built-in border property is configured, which is a Composite type of border-width, border-style and border-color. That means the editor is able to understand styles like border: 5px solid red or even border-color: red; border-style: solid; border-width: 5px; but unfortunately, properties like border-top, border-bottom, etc. are out of the scope as they're seen as totally different ones.

The good news, with the new release you're able to manage built-in properties and update their behavior with props like toStyle/fromStyle (available for composite and stack types). So here is an example of how would you force to remove alternative border properties on change.

const extendBorder = (editor) => {
  editor.StyleManager.addBuiltIn('border', {
    toStyle(values, { property }) {
      const propWidth = property.getProperty('border-width');
      const width = `${propWidth.getValue()}${propWidth.getUnit()}`;
      const style = property.getProperty('border-style').getValue();
      const color = property.getProperty('border-color').getValue();
      return {
        'border': `${width} ${style} ${color}`,
        'border-top': '',
        'border-right': '',
        'border-bottom': '',
        'border-left': '',
      }
    }
  });
}
grapesjs.init({
  // ...
  plugins: [extendBorder]
})

The alternative solution would be to set up a new UI type for managing the border property in a more advanced way but that for sure requires more effort.

Thanks for reporting this, @kuhelbeher.

Great question about Can't remove border of element. 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!