From a5a56f0927c7c74439e0fb9496834a5eacf5e658 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Wed, 11 Jun 2025 16:05:24 +0400
Subject: [PATCH] Add component:input to ComponentsEvents

---
 packages/core/src/canvas/model/CanvasSpots.ts            | 2 +-
 packages/core/src/commands/view/SelectComponent.ts       | 2 +-
 packages/core/src/dom_components/types.ts                | 7 +++++++
 .../core/src/dom_components/view/ComponentTextView.ts    | 9 ++++-----
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/canvas/model/CanvasSpots.ts b/packages/core/src/canvas/model/CanvasSpots.ts
index 165657988..e175570c0 100644
--- a/packages/core/src/canvas/model/CanvasSpots.ts
+++ b/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());
   }
 
diff --git a/packages/core/src/commands/view/SelectComponent.ts b/packages/core/src/commands/view/SelectComponent.ts
index b97e645ec..8d79ddc7c 100644
--- a/packages/core/src/commands/view/SelectComponent.ts
+++ b/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);
diff --git a/packages/core/src/dom_components/types.ts b/packages/core/src/dom_components/types.ts
index 9e2bc1293..640f31f3d 100644
--- a/packages/core/src/dom_components/types.ts
+++ b/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
diff --git a/packages/core/src/dom_components/view/ComponentTextView.ts b/packages/core/src/dom_components/view/ComponentTextView.ts
index f1f1e5442..a5c301f0d 100644
--- a/packages/core/src/dom_components/view/ComponentTextView.ts
+++ b/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));
   }
 
   /**