Grapesjs: [QUESTION] Best way to listen to changes on the final HTML?

[simplecommerce]

Hi,

I just had a quick question because I could not figure out how to do it or did not find an issue related to it.

I am just trying to call a function when any changes is done on the canvas.

For example, I am adding a block or removing a block.
I am changing the attributes using the style manager.
Or drag and dropping the blocks within the canvas.
Or even updating the traits.

Is there a global event I can listen to it trigger my function?

I am not talking about any actual changes in the Canvas itself but changes that apply to the final HTML when I call the method editor.getHtml().

Any help or guidance is appreciated, thanks!

Update:

For the moment I figured out I could use the storage manager to achieve this, by doing:

storageManager: { type: 'onChange'; }

and 

editor.on('storage:start', callback);

If there is a simpler solution without having to do it this way, I am open to suggestions.

Thanks!

[arthuralmeidap]

What do you want to achieve at the end?

You could use something like editor.on('all', () => //your code here ); but this is not practical at all. there are many events being triggered by GrapesJS and I don't think this will suit your needs.

[simplecommerce]

@arthuralmeidap Hi, thanks for your reply, yeah no that's not what I want, since I only want to callback my function when the final HTML code editor.getHtml() actually changes, and not when say we hover over the canvas, etc.

[arthuralmeidap]

What do you want to achieve? I mean, what is your function supposed to do?

[simplecommerce]

@arthuralmeidap To keep it simple, I am using GrapesJS in React and require an onChange function call to update my value stored in state, so that when I save, I grab all the values that is up to date.

My implementation of GrapesJS is a separate component that I load on the screen, so I require to pass an onChange callback function to get the final state of the HTML.

Sorry if I am not being clear.

[arthuralmeidap]

The way you did is the simplest way to achieve that in my opinion.

[simplecommerce]

@arthuralmeidap Ok thanks a lot for your feedback!!

[a-bashtannik]

@simplecommerce , try also this, maybe fit better for you

editor.on('change:changesCount', e => {
// Change!
    });

[simplecommerce]

@a-bashtannik Hi, thanks for giving me the tip! I also tried that method previously before, but noticed some issues when applying styles using the style manager, sometimes it didn't detect the change instantly, unless I clicked somewhere else to blur or something like that, so that is why I was looking for another solution and ended up with the storage method for the moment.

Appreciate your feedback!!

[artf]

Actually, the solution provided by @a-bashtannik is the most accurate, even if that event is not public (probably I'll add a new one in the next release)

sometimes it didn't detect the change instantly, unless I clicked somewhere else to blur or something like that

Well, by looking at what you said here

I am not talking about any actual changes in the Canvas itself but changes that apply to the final HTML when I call the method editor.getHtml().

it should work as expected. For example, when you change the color with the color picker, only when you blur or click the OK button the structure will change (and so editor.getHtml()) otherwhise you only see the preview

[simplecommerce]

@artf thank you for your reply also! That's what I was using before but when changing styles using the style manager, as soon as I clicked my button to save my content, sometimes the delay it took to kick the change event, wasn't quick enough to register and my save would save without the changes.

Most likely due to my code, but the storage method works, so I am fine with that, I appreciate your responses and feedback though, and awesome framework by the way, I can see the hard work that was put in to make this happen!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.