MousePosFetcher in resizer config & change:style listener not working

Hi @Joshmamroud

CBs should be called when mousePosFetcher is called

That is not happening because resizable options are not directly passed to the Resizer, but through the resize command. You can see mousePosFetcher there is handled by the canvas. I can update the command in order to allow that kind of customization but keep in mind that the canvas does a bit more of your logic in order to get proper coordinates. For now, you can extend the command logic by yourself.

CBs should be called when "change:style" is called from this.listenTo(this, 'change:style', this.updateWidth)

That is not happening because, in this case, the style is not updated on the Component itself, but on the CssRule. Here is an example of how you would handle the listener by relying on the global event

init() {
  console.log('Init Column')
  this.listenTo(this.em, `styleable:change:${keyWidth}`, this.updateWidth)
},
updateWidth(rule) {
  const ruleComponent = rule.getComponent?.();
  if (ruleComponent === this) {
    console.log('update width', rule.getStyle(keyWidth))
  }
},

Thanks @artf! That makes sense.

Thanks for reporting this, @Joshmamroud.

Great question about mousePosFetcher in resizer config & change:style listener not working. 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!