plone
Auto-Save Option
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.
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.
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.
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!
@sneridagh @mauritsvanrees it just occurs to me that we mentioned this feature in our state-of-plone keynote in 2023. We did not include it in our roadmap though.
@tisto it's in a stale state now, I remember that we hit some issues in the final implementation. Someone will have to resurrect it and champion it.
@tisto A first implementation of this was merged in 19-alpha, maybe we can have a look during Beethoven Sprint next week and see if it's good enough to close this issue or if we have other things tofix/add.
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
I would like that the toast message when saving with Ctrl-S to have an Undo/Cancel button.
@pnicolli @sneridagh what's the status of this? The PR https://github.com/plone/volto/pull/6864 has been merged. Does that mean this has been shipped with Volto 19?
@sneridagh @silviubogan @davisagli @pnicolli the feature works fine. However, let's clear the auto-saved local storage as soon as the user clicks the "Cancel" button. If we keep a copy in local storage, we ignore the user's intent. On top of that, we confuse the user the next time she edits a page by asking if she wants to restore her unsaved work. The user already made her intent clear, we ignore it, and then ask a question about something she has no clue what we are talking about.
I would suggest changing the toast to:
Unsaved changes found
Your browser closed unexpectedly. We recovered your unsaved changes from [timestamp]. Do you want to restore them?
--
Is it possible to include a timestamp in the toast message? I think it is important for the user to know when this happened. If she recalls the browser crashing, she might want to restore. If this message appears from two years ago, she will most likely drop the local storage.
The thing I am unsure about is the action buttons in the toast:
We currently have two cancel buttons, with no visual differentiation between the two possible options, and no tooltip or help that would allow the user to make an informed decision.
@sneridagh do we have a toast design in Pastanaga or Quanta? Maybe with buttons with a label? Otherwise, we need to ask a UX expert for help here...
One thing that I am wondering about is, if we could somehow explain to the user that the "restore" button restores the version in edit mode, so that they can review it. As a user, I would be reluctant to hit the "restore" button if that would mean that my currently stored version is lost.
@tisto I don't recall that the toast never was intended to have buttons, so we don't have such a mockup.
Maybe we can come up with a new UX artifact. For me, this use case begs to be a modal with a dialog on it, since you really want the user to chime in, and validate the stored content (or dismiss it) right away. Fortunatelly, we now have a11y compliant modals in @plone/components.
One thing that I am wondering about is, if we could somehow explain to the user that the "restore" button restores the version in edit mode, so that they can review it. As a user, I would be reluctant to hit the "restore" button if that would mean that my currently stored version is lost.
How you could have worked in something before having given the change of restoring it? I think that's why it should be a modal instead of a toast.
@sneridagh I fully agree that this should be a modal with a detailed explanation and buttons with labels.