Add callbacks types to editor

packages/core/src/commands/view/PasteComponent.ts

@@ -1,5 +1,6 @@
 import { isArray, contains } from 'underscore';
 import Component from '../../dom_components/model/Component';
+import { ComponentsEvents } from '../../dom_components/types';
 import { CommandObject } from './CommandAbstract';
 import Editor from '../../editor';
 
@@ -33,7 +34,7 @@ export default {
         }
 
         added = isArray(added) ? added : [added];
-        added.forEach((add) => ed.trigger('component:paste', add));
+        added.forEach((add) => ed.trigger(ComponentsEvents.paste, add));
       });
 
       lastSelected.emitUpdate();

packages/core/src/dom_components/types.ts

@@ -6,6 +6,7 @@ import type {
   OptionAsDocument,
   WithHTMLParserOptions,
 } from '../common';
+import type CssRule from '../css_composer/model/CssRule';
 import type {
   ComponentResizeEventEndProps,
   ComponentResizeEventMoveProps,
@@ -13,6 +14,7 @@ import type {
   ComponentResizeEventUpdateProps,
 } from '../commands/view/Resize';
 import type { StyleProps } from '../domain_abstract/model/StyleableModel';
+import type Selector from '../selector_manager/model/Selector';
 import type Component from './model/Component';
 import type { ResetFromStringOptions } from './model/Components';
 import type { ComponentOptions, ComponentStackItem } from './model/types';
@@ -91,6 +93,12 @@ export enum ComponentsEvents {
   selected = 'component:selected',
   deselected = 'component:deselected',
   toggled = 'component:toggled',
+  hover = 'component:hover',
+  hoverBefore = 'component:hover:before',
+  hovered = 'component:hovered',
+  unhovered = 'component:unhovered',
+  paste = 'component:paste',
+  syncStyle = 'component:sync-style',
   typeAdd = 'component:type:add',
   typeUpdate = 'component:type:update',
   dragStart = 'component:drag:start',
@@ -311,6 +319,15 @@ export interface ComponentRemovedEventData {
   removeOptions: ObjectAny;
 }
 
+export interface ComponentSyncStyleEventData {
+  component: Component | undefined;
+  selectors: Selector[];
+  mediaText: string;
+  rule: CssRule;
+  ruleComponents: CssRule[];
+  state: string;
+}
+
 export interface SymbolEventData {
   component: Component;
   changed?: ObjectAny;
@@ -340,6 +357,12 @@ export interface ComponentsEventCallback {
   [ComponentsEvents.selected]: [Component, ObjectAny];
   [ComponentsEvents.deselected]: [Component, ObjectAny];
   [ComponentsEvents.toggled]: [Component?, ObjectAny?];
+  [ComponentsEvents.hover]: [Component | undefined, ObjectAny];
+  [ComponentsEvents.hoverBefore]: [Component, ObjectAny];
+  [ComponentsEvents.hovered]: [Component, ObjectAny];
+  [ComponentsEvents.unhovered]: [Component, ObjectAny];
+  [ComponentsEvents.paste]: [Component];
+  [ComponentsEvents.syncStyle]: [ComponentSyncStyleEventData];
   [ComponentsEvents.typeAdd]: [ComponentTypeEventData];
   [ComponentsEvents.typeUpdate]: [ComponentTypeEventData];
   [ComponentsEvents.dragStart]: [ComponentDragEventData];

packages/core/src/editor/model/Editor.ts

@@ -492,8 +492,8 @@ export default class EditorModel extends Model {
    * */
   componentHovered(editor: any, component: any, options: any) {
     const prev = this.previous('componentHovered');
-    prev && this.trigger('component:unhovered', prev, options);
+    prev && this.trigger(ComponentsEvents.unhovered, prev, options);
-    component && this.trigger('component:hovered', component, options);
+    component && this.trigger(ComponentsEvents.hovered, component, options);
   }
 
   /**
@@ -711,9 +711,8 @@ export default class EditorModel extends Model {
       return upHovered();
     }
 
-    const ev = 'component:hover';
     opts.forceChange && upHovered();
-    this.trigger(`${ev}:before`, cmp, opts);
+    this.trigger(ComponentsEvents.hoverBefore, cmp, opts);
 
     // Check for valid hoverable
     if (!cmp.get('hoverable')) {
@@ -728,7 +727,7 @@ export default class EditorModel extends Model {
 
     if (!opts.abort) {
       upHovered(cmp, opts);
-      this.trigger(ev, cmp, opts);
+      this.trigger(ComponentsEvents.hover, cmp, opts);
     }
   }
 

packages/core/src/editor/types.ts

@@ -1,6 +1,6 @@
 import { AssetEvent, AssetsEventCallback } from '../asset_manager/types';
 import { BlockEvent, BlocksEventCallback } from '../block_manager/types';
-import { LiteralUnion } from '../common';
+import type { LiteralUnion, ObjectAny } from '../common';
 import { CanvasEvent, CanvasEventCallback } from '../canvas/types';
 import { CommandEvent, CommandsEventCallback } from '../commands/types';
 import { DataSourceEvent, DataSourcesEventCallback } from '../data_sources/types';
@@ -14,15 +14,23 @@ import { PageEvent, PagesEventCallback } from '../pages/types';
 import { ParserEvent, ParserEventCallback } from '../parser/types';
 import { RichTextEditorEvent, RichTextEditorEventCallback } from '../rich_text_editor';
 import { SelectorEvent, SelectorEventCallback } from '../selector_manager/types';
+import type { ProjectData } from '../storage_manager';
 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';
+import type EditorModel from './model/Editor';
+import type { EditorLoadOptions } from './model/Editor';
 
-type GeneralEvent = 'canvasScroll' | 'undo' | 'redo' | 'load' | 'update';
+type EditorLogEvent = `${EditorEvents.log}:${string}` | `${EditorEvents.log}-${string}` | `${EditorEvents.log}-${string}:${string}`;
+
+type EditorCoreEvent =
+  | `${EditorEvents}`
+  | EditorLogEvent
+  | 'canvasScroll';
 
 type EditorBuiltInEvents =
+  | EditorCoreEvent
   | DataSourceEvent
   | DeviceEvent
   | I18nEvent
@@ -40,8 +48,7 @@ type EditorBuiltInEvents =
   | RichTextEditorEvent
   | TraitEvent
   | ModalEvent
-  | CommandEvent
+  | CommandEvent;
-  | GeneralEvent;
 
 export type EditorEvent = LiteralUnion<EditorBuiltInEvents, string>;
 
@@ -49,8 +56,47 @@ export type EditorConfigType = EditorConfig & { pStylePrefix?: string };
 
 export type EditorModelParam<T extends keyof EditorModel, N extends number> = Parameters<EditorModel[T]>[N];
 
+export interface EditorProjectEventData {
+  project: ProjectData;
+  options: EditorLoadOptions;
+  initial: boolean;
+}
+
+export interface EditorProjectLoadEventData extends EditorProjectEventData {
+  loaded: boolean;
+}
+
+export interface EditorProjectGetEventData {
+  project: ProjectData;
+}
+
+export interface EditorLogEventOptions extends ObjectAny {
+  ns?: string;
+  level?: string;
+}
+
+export interface EditorEventCoreCallbacks {
+  [EditorEvents.update]: [];
+  [EditorEvents.updateBefore]: [Record<string, any>];
+  [EditorEvents.undo]: [];
+  [EditorEvents.redo]: [];
+  [EditorEvents.load]: [EditorModel['Editor']];
+  [EditorEvents.projectLoad]: [EditorProjectLoadEventData];
+  [EditorEvents.projectLoaded]: [EditorProjectEventData];
+  [EditorEvents.projectGet]: [EditorProjectGetEventData];
+  [EditorEvents.log]: [string, EditorLogEventOptions];
+  [EditorEvents.telemetryInit]: [];
+  [EditorEvents.destroy]: [];
+  [EditorEvents.destroyed]: [];
+  [key: `log:${string}`]: [string, EditorLogEventOptions];
+  [key: `log-${string}`]: [string, EditorLogEventOptions];
+  [key: `log-${string}:${string}`]: [string, EditorLogEventOptions];
+  'canvasScroll': [];
+}
+
 export interface EditorEventCallbacks
-  extends AssetsEventCallback,
+  extends EditorEventCoreCallbacks,
+    AssetsEventCallback,
     BlocksEventCallback,
     CanvasEventCallback,
     CommandsEventCallback,

packages/core/src/selector_manager/view/ClassTagsView.ts

@@ -127,7 +127,7 @@ export default class ClassTagsView extends View<Selector> {
 
     style && rule.addStyle(style);
     em.trigger(ComponentsEvents.toggled);
-    em.trigger('component:sync-style', {
+    em.trigger(ComponentsEvents.syncStyle, {
       component: target,
       selectors,
       mediaText,