Auto-Save option

[tisto]

Is your feature request related to a problem? Please describe.

Editors are frustrated when they work on a page and something fails on save.

Describe the solution you'd like

Editors would like to have the option to save a page without having to click the save button and the edit button again.

Describe alternatives you've considered

Possible solutions:

a) add a "save-and-continue-editing" button -> bad UX and hard to differentiate for editors b) allow power users to use a keyboard key (or key combination) to save the current page, and show a toast message when this was successful c) add an auto-save option

Additional context

I personally don't see a perfect solution yet. Allowing power-users to use a key or key combination might be the best compromise right now because it does not change the UI and it is something that you can train your power users/editors.

Auto-save is something that works great for Google Docs and stuff but it might not be what CMS editors want. After all, sometimes you might want to drop your changes and start over again.

[davisagli]

What about autosaving to session storage but not to the backend? And restore if the user leaves without saving and comes back (maybe with a toast message saying it was restored). That way the changes are not lost, but the user can still decide whether to actually save, or use the cancel button to discard the changes.

This would be similar to what happens in this github issue if I navigate away from the issue while editing, then click the back button. The comment I'm writing was not lost.

[stevepiercy]

I don't care how it is done, but auto-save would be a killer feature, whether it saves draft content locally or to the backend. WordPress has auto-save. I think Editors expect and demand this feature in a modern CMS. In fact, my users use Google Docs to draft documents and have them auto-save so they can always resume where they left off, then paste into the CMS.

[MAX-786]

b) allow power users to use a keyboard key (or key combination) to save the current page, and show a toast message when this was successful

As a starter, I tried to implement b) but having difficulty preventing it from going back to its baseurl (it's leaving edit mode). I added a keydown eventlistener in here /manage/Edit/Edit.jsx-componentDidMount() and I am using this callback :

    saveByKeyCombo = (e) => {
    if (e.ctrlKey && e.key == 's'){
      e.preventDefault();
      this.form.current.onSubmit();
    }
  }

This may be the wrong approach to implement this, so I would love to have someone's feedback.

Also, can we implement Autosave using lodash.debounce() , like a simpler version is implemented here. Thanks!