FEAT: Mark Component as Dirty

[anlumo]

What are you trying to add to GrapesJS?

Component should be able to mark themselves as dirty, triggering the onbeforeunload warning message.

Describe your feature request detailed

I have a (custom) text component where the user can enter arbitrary text. I'm storing the data on my server, and I want autosave. However, I don't want the server to be contacted for every single character added to the text component, since that would be a huge flood with the amount of users we have.

I also don't want to change the stepsBeforeSave, because large changes like dragging around components should be saved immediately.

Right now, the component stores the data (sets the content key on the model) when the user leaves the text component. This works, but when the user reloads the page while the text component is still in focus, the latest changes are not applied to the data model.

This would be ok, but I'd like to pop up the save warning dialog (the onbeforeunload message). However, this is not possible since grapesjs doesn't know about the pending changes, so it does not enable it:

https://github.com/artf/grapesjs/blob/88249c38577852dc3c42047356a70a12066ee6ca/src/editor/model/Editor.js#L183-L196

I can't simply increment the changesCount to trigger enabling the dialog, since this would trigger a save (which I don't want).

It would be nice if a component could declare itself dirty (having unsaved changes).

Is there an alternative at the latest version?

• [X] Yes (describe the alternative)
• [ ] No

I can set noticeOnUnload to false in the editor configuration and just do it manually. This works for me because stepsBeforeSave is 1 anyways, but it wouldn't work for any other value.

Is this related to an issue?

• [ ] Yes (Give a link to the issue)
• [X] No

[artf]

The editor has editing property which changes any time RTE is enabled/disabled, so I guess, in your case, this should work

editor.on('change:editing', (em, editing) => {
 window.onbeforeunload = editing || editor.getDirtyCount() ? e => 1 : null; 
});

[anlumo]

Wouldn't this onbeforeunload handler be overwritten afterwards by the snippet I referenced above?

[artf]

When you enable RTE, updateChanges is not triggered so it won't be overwritten

[anlumo]

I worked around this by completely disabling the onbeforeunload handling and rolling my own.