Saving "draft" form data in localStorage

Building off an idea in https://community.plone.org/t/richtext-behavior-with-plone-app-drafts/15500/7 I made a package that will store unsaved/canceled form data in the browser as a user convenience, and put any local stored data into the form on page load. https://github.com/imsweb/ims.drafts/ This is still in testing and I would not consider it production ready yet. But it might be of interest to anyone using Classic UI.

The basic idea is to listen for changes on any text(ish) field inside of an edit or add form only, and store this in your browser's local storage. We wipe this on save or cancel or if we determine that the page has been edited since your form data was last update. This condition is probably rare but would mean you started to edit, lost the tab, someone else edited (bypassing the lock), and then you reloaded the page. The idea is to prevent you from inadvertently overwriting someone else's change.

For TinyMCE content, the hidden doesn't actually change after tinymce is loaded, so I register a plugin so I can get each editor and listen for changes after its loaded. Perhaps a future change can replace that with some kind of MutationObserver.

There is one potential race condition that probably needs to be addressed. The code from this package runs before TinyMCE initialization so we can simply put our localStorage in the and then let TinyMCE init after that. If it were to happen the other way around, this won't work; we'd need to put this in the plugin js or something.

2 Likes

For a Volto counterpart, there is a stale pull request that the Volto Team wants to resurrect and complete.

https://github.com/plone/volto/pull/4252