Add component:input to ComponentsEvents

packages/core/src/canvas/model/CanvasSpots.ts

@@ -17,7 +17,7 @@ export default class CanvasSpots extends ModuleCollection<CanvasSpot> {
     const { em } = this;
     this.refreshDbn = debounce(() => this.refresh(), 0);
 
-    const evToRefreshDbn = `${ComponentsEvents.resize} styleable:change component:input ${ComponentsEvents.update} frame:updated undo redo`;
+    const evToRefreshDbn = `${ComponentsEvents.resize} styleable:change ${ComponentsEvents.input} ${ComponentsEvents.update} frame:updated undo redo`;
     this.listenTo(em, evToRefreshDbn, () => this.refreshDbn());
   }
 

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

@@ -96,7 +96,7 @@ export default {
     methods[method](listenToEl, 'scroll', this.onContainerChange);
     em[method](`component:toggled ${eventCmpUpdate} undo redo`, this.onSelect, this);
     em[method]('change:componentHovered', this.onHovered, this);
-    em[method](`${ComponentsEvents.resize} styleable:change component:input`, this.updateGlobalPos, this);
+    em[method](`${ComponentsEvents.resize} styleable:change ${ComponentsEvents.input}`, this.updateGlobalPos, this);
     em[method](`${eventCmpUpdate}:toolbar`, this._upToolbar, this);
     em[method]('frame:updated', this.onFrameUpdated, this);
     em[method]('canvas:updateTools', this.onFrameUpdated, this);

packages/core/src/dom_components/types.ts

@@ -91,6 +91,13 @@ export enum ComponentsEvents {
    */
   render = 'component:render',
 
+  /**
+   * @event `component:input` Event triggered on `input` DOM event. This is useful to catch direct input changes in the component (eg. Text component).
+   * @example
+   * editor.on('component:input', (component) => { ... });
+   */
+  input = 'component:input',
+
   /**
    * @event `component:resize` Component resized. This event is triggered when the component is resized in the canvas.
    * @example

packages/core/src/dom_components/view/ComponentTextView.ts

@@ -9,6 +9,7 @@ import { getComponentIds } from '../model/Components';
 import ComponentText from '../model/ComponentText';
 import { ComponentDefinition } from '../model/types';
 import ComponentView from './ComponentView';
+import { ComponentsEvents } from '../types';
 
 export default class ComponentTextView<TComp extends ComponentText = ComponentText> extends ComponentView<TComp> {
   rte?: RichTextEditorModule;
@@ -217,11 +218,9 @@ export default class ComponentTextView<TComp extends ComponentText = ComponentTe
    * @param  {Event} e
    */
   onInput() {
-    const evPfx = 'component';
-    const ev = [`${evPfx}:update`, `${evPfx}:input`].join(' ');
-
-    // Update toolbars
-    this.em?.trigger(ev, this.model);
+    const { model } = this;
+    const events = [ComponentsEvents.update, ComponentsEvents.input];
+    events.forEach((ev) => model.emitWithEditor(ev, model));
   }
 
   /**