Trigger `component:styleUpdate` also on the component itself

packages/core/src/dom_components/model/Component.ts

@@ -449,12 +449,11 @@ export default class Component extends StyleableModel<ComponentProperties> {
     const { em } = this;
     if (!em) return;
 
-    const event = 'component:styleUpdate';
     const styleKeys = keys(newStyles);
     const pros = { style: newStyles };
 
-    em.trigger(event, this, pros);
-    styleKeys.forEach((key) => em.trigger(`${event}:${key}`, this, pros));
+    this.emitWithEditor(ComponentsEvents.styleUpdate, this, pros);
+    styleKeys.forEach((key) => this.emitWithEditor(`${ComponentsEvents.stylePropertyUpdate}${key}`, this, pros));
 
     const collectionsStateMap = this.collectionsStateMap;
     const allParentCollectionIds = Object.keys(collectionsStateMap);

packages/core/src/dom_components/types.ts

@@ -53,6 +53,14 @@ export enum ComponentsEvents {
   update = 'component:update',
   updateInside = 'component:update-inside',
 
+  /**
+   * @event `component:styleUpdate` Component related styles are updated, the component is passed as an argument to the callback.
+   * @example
+   * editor.on('component:styleUpdate', (component) => { ... });
+   */
+  styleUpdate = 'component:styleUpdate',
+  stylePropertyUpdate = 'component:styleUpdate:',
+
   /**
    * @event `component:select` Component selected.
    * @example