[Feature Request] Add onChange callback

[unlayer]

[Feature Request] Add onChange callback

[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