Trigger Change Event

This feature gives developers more control over how the text editor triggers changes during editing. You can configure the text editor to trigger change events more effectively during text editing and control how frequently those events are fired using a debounce mechanism.

Here’s the API configuration for the new options:

unlayer.init({
  features: {
    textEditor: {
      triggerChangeWhileEditing: true, // default: true
      debounce: 300, // default: 300 (ms)
    },
  },
});

API Options

• triggerChangeWhileEditing (default: true)
  • Description: This option controls whether the text editor should trigger the design:updatedevent while the end-user is actively editing text. By default, this is set to true, meaning that the event will be fired in real-time as text is being updated.
  • Use Case: If you’re building an application where real-time updates or auto-saving features are critical, you should keep this option enabled to ensure that changes are consistently saved.
• debounce (default: 300ms)
  • Description: This option allows you to control the debounce time for triggering the design:updated event. Debouncing ensures that the event isn’t triggered excessively during rapid typing or frequent text changes. By default, the debounce time is set to 300 milliseconds.
  • Use Case: You can adjust the debounce value based on the performance needs of your application. A higher value will reduce the frequency of change events (better for performance), while a lower value will make the change detection more responsive (better for real-time feedback).

Example Use Case

If you want to ensure that every change in the text editor is registered and saved without delay, you can configure the text editor to trigger updates with minimal debouncing:

unlayer.init({
  features: {
    textEditor: {
      triggerChangeWhileEditing: true,
      debounce: 100,  // Trigger changes every 100ms during editing
    },
  },
});

In this example:

• triggerChangeWhileEditing: true ensures that changes are consistently tracked.
• debounce: 100 makes the event more responsive, ideal for scenarios where real-time feedback or frequent auto-saving is required.

Notes

• Performance Considerations: Lower debounce values can lead to frequent event triggering, which may have performance implications for very large designs or complex layouts. Adjust the debounce time based on the complexity of your design and the performance requirements of your host application.
• Default Behavior: By default, both options are set to ensure real-time event handling with reasonable performance, but you can customize these values to fit the needs of your users and application.