Add callback types to traits

packages/core/src/editor/types.ts

@@ -16,6 +16,7 @@ import { RichTextEditorEvent, RichTextEditorEventCallback } from '../rich_text_e
 import { SelectorEvent, SelectorEventCallback } from '../selector_manager/types';
 import { StorageEvent, StorageEventCallback } from '../storage_manager/types';
 import { StyleManagerEvent, StyleManagerEventCallback } from '../style_manager/types';
+import { TraitEvent, TraitEventCallback } from '../trait_manager/types';
 import { EditorConfig } from './config/config';
 import EditorModel from './model/Editor';
 
@@ -37,6 +38,7 @@ type EditorBuiltInEvents =
   | CanvasEvent
   | SelectorEvent
   | RichTextEditorEvent
+  | TraitEvent
   | ModalEvent
   | CommandEvent
   | GeneralEvent;
@@ -63,7 +65,8 @@ export interface EditorEventCallbacks
     RichTextEditorEventCallback,
     SelectorEventCallback,
     StorageEventCallback,
-    StyleManagerEventCallback
+    StyleManagerEventCallback,
+    TraitEventCallback
 {
   [key: string]: any[];
 }

packages/core/src/trait_manager/model/Trait.ts

@@ -257,7 +257,7 @@ export default class Trait extends Model<TraitProperties> {
     component.trigger(TraitsEvents.value, props);
     em?.trigger(TraitsEvents.value, props);
     // This should be triggered for any trait prop change
-    em?.trigger('trait:update', props);
+    em?.trigger(TraitsEvents.update, props);
   }
 
   getTargetValue(opts: TraitGetValueOptions = {}) {

packages/core/src/trait_manager/types.ts

@@ -1,4 +1,5 @@
-import { CategoryProperties, ItemsByCategory } from '../abstract/ModuleCategory';
+import Category, { CategoryProperties, ItemsByCategory } from '../abstract/ModuleCategory';
+import { ObjectAny } from '../common';
 import Component from '../dom_components/model/Component';
 import Editor from '../editor';
 import EditorModel from '../editor/model/Editor';
@@ -38,6 +39,34 @@ export interface TraitCustomData {
   container?: HTMLElement;
 }
 
+export interface TraitSelectEventData {
+  component?: Component;
+  traits: Trait[];
+}
+
+export interface TraitValueEventData {
+  trait: Trait;
+  component: Component;
+  value: any;
+}
+
+export interface TraitCategoryUpdateEventData {
+  category: Category;
+  changes: Partial<CategoryProperties>;
+  options: ObjectAny;
+}
+
+export interface TraitAllEventData {
+  event: string;
+  trait?: Trait;
+  component?: Component;
+  value?: any;
+  category?: Category;
+  changes?: Partial<CategoryProperties>;
+  options?: ObjectAny;
+  container?: HTMLElement;
+}
+
 export interface TraitProperties {
   /**
    * Trait type, defines how the trait should be rendered.
@@ -177,8 +206,6 @@ export interface TraitOption {
   [key: string]: unknown;
 }
 
-export type TraitsEvent = `${TraitsEvents}`;
-
 /**{START_EVENTS}*/
 export enum TraitsEvents {
   /**
@@ -194,6 +221,7 @@ export enum TraitsEvents {
    * editor.on('trait:value', ({ trait, component, value }) => { ... });
    */
   value = 'trait:value',
+  update = 'trait:update',
 
   /**
    * @event `trait:category:update` Trait category updated.
@@ -218,5 +246,16 @@ export enum TraitsEvents {
 }
 /**{END_EVENTS}*/
 
+export type TraitEvent = `${TraitsEvents}`;
+
+export interface TraitEventCallback {
+  [TraitsEvents.select]: [TraitSelectEventData];
+  [TraitsEvents.value]: [TraitValueEventData];
+  [TraitsEvents.update]: [TraitValueEventData];
+  [TraitsEvents.categoryUpdate]: [TraitCategoryUpdateEventData];
+  [TraitsEvents.custom]: [TraitCustomData];
+  [TraitsEvents.all]: [TraitAllEventData];
+}
+
 // need this to avoid the TS documentation generator to break
 export default TraitsEvents;