[Feature Request] Add onChange callback

[carylgaskell]

I'm using the builder along with some other text fields as a "form" but in order to determine if the form is dirty I'd need to know if an update to the builder occurred. It would be great to expose an onChangeCallback prop. I'm sure others would want to use it to save changes automatically without clicking a button.

onChange = (html, design) => {
    this.props.setSomeFieldValue(html);
    this.props.setMyAwesomeFormDirty();
}

Thanks and great work!

[carylgaskell]

Jk. I figured it out. attaching the event listener in the onLoad like so

  onLoad = () => {
    const { design } = this.props.values;
    if (design) {
      window.unlayer.loadDesign(design);
    }
    window.unlayer.addEventListener('design:updated', (data) => {
      this.setState({ designUpdated: true });
    });
  }

[generalleger]

@carylgaskell does your event listener trigger on each keystroke? As far as I can tell. A user can click into the editor and start typing and the 'design:updated' listener does not trigger. If the user clicks out of the iframe, it triggers.

There used to be a bunch of different listeners, and one of them (not sure which) would trigger the call back on each keystroke if someone were typing into the iframe. It was convenient, because, like you, i needed to know when the form was 'dirty'.

In lieu of that, I added an event listener to tell me when the user clicks into the iframe, which assumes that they will start typing once they click, which is not entirely ideal.

var listener = window.addEventListener('blur', () => {
      if (document.activeElement.nodeName === "IFRAME") {
          //do something here
      }
      window.removeEventListener('blur', listener);
});

[ajiths10]

Here is a sample, with on change and load existing design.
https://github.com/ajiths10/EmailEditor-ReactApp/blob/main/src/component/AdvancedEditor.tsx