Add trait:value event

src/trait_manager/index.ts

@@ -52,14 +52,14 @@ export default class TraitManager extends Module<TraitManagerConfigModule> {
    */
   constructor(em: EditorModel) {
     super(em, 'TraitManager', defaults as any);
-    const { state, config } = this;
+    const { state, config, events } = this;
     const ppfx = config.pStylePrefix;
     ppfx && (config.stylePrefix = `${ppfx}${config.stylePrefix}`);
 
     const upAll = debounce(() => this.__upSel(), 0);
     const update = debounce(() => this.__onUp(), 0);
     state.listenTo(em, 'component:toggled', upAll);
-    state.listenTo(em, 'trait:update', update);
+    state.listenTo(em, events.value, update);
 
     this.debounced = [upAll, update];
   }

src/trait_manager/model/Trait.ts

@@ -4,7 +4,7 @@ import { LocaleOptions, Model, SetOptions } from '../../common';
 import Component from '../../dom_components/model/Component';
 import EditorModel from '../../editor/model/Editor';
 import { isDef } from '../../utils/mixins';
-import { TraitOption, TraitProperties, TraitSetValueOptions } from '../types';
+import TraitsEvents, { TraitOption, TraitProperties, TraitSetValueOptions } from '../types';
 import TraitView from '../view/TraitView';
 import Traits from './Traits';
 
@@ -233,11 +233,10 @@ export default class Trait extends Model<TraitProperties> {
     const { component, em } = this;
     const value = this.getTargetValue();
     this.set({ value }, { fromTarget: 1 });
-    em?.trigger('trait:update', {
+    const props = { trait: this, component, value };
-      trait: this,
+    em?.trigger(TraitsEvents.value, props);
-      component,
+    // This should be triggered for any trait prop change
-      value,
+    em?.trigger('trait:update', props);
-    });
   }
 
   getTargetValue() {

src/trait_manager/types.ts

@@ -162,6 +162,13 @@ export type TraitsEvent = `${TraitsEvents}`;
 
 /**{START_EVENTS}*/
 export enum TraitsEvents {
+  /**
+   * @event `trait:value` Trait value updated.
+   * @example
+   * editor.on('trait:value', ({ trait, component, value }) => { ... });
+   */
+  value = 'trait:value',
+
   /**
    * @event `trait:custom`
    * @example