Save edit form as draft using localStorage

docs/source/user-manual/autosave.md

@@ -0,0 +1,58 @@
+---
+myst:
+  html_meta:
+    "description": "User manual for how Volto autosaves data in Plone 6."
+    "property=og:description": "User manual for how Volto autosaves data in Plone 6."
+    "property=og:title": "How to autosave content in Volto when editing, adding, or commenting on content."
+    "keywords": "Volto, Plone, frontend, React, User manual, autosave, restore"
+---
+
+(autosave-content-label)=
+
+# Autosave content
+
+The autosave feature allows you to restore locally saved data, in case of accidental browser close, refresh, quit, or change page.
+It uses the [`localStorage` property](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
+It clears the data when either the form is saved or you cancel restoring the local data.
+If local data is found for the specific content, a toast is shown that allows you to either restore ({guilabel}`OK`) or discard ({guilabel}`Cancel`) it.
+If local data is older than data on the server, it will still show the toast, but it will specify that the found local data is older than the server data.
+
+
+(autosave-edit-mode-label)=
+
+## Autosave edit mode
+
+A local copy of the form is saved in `localStorage` when you start to edit, not when you merely open the page in edit mode.
+Changing the form will update the `localStorage` with a new complete copy of the form.
+In case you close the tab, quit, refresh, change the page, or cancel editing, when you revisit the page in edit mode, it will display a toast for the found data.
+Data is saved with a unique id:
+
+```js
+  const id = isEditForm
+    ? ['form', type, pathname].join('-') // edit
+    : type
+    ? ['form', pathname, type].join('-') // add
+    : schema?.properties?.comment
+    ? ['form', pathname, 'comment'].join('-') // comments
+    : ['form', pathname].join('-');
+```
+
+Local data for the current content will be deleted, when you save the form or choose {guilabel}`Cancel` from the toast.
+
+
+(autosave-new-content-label)=
+
+## Autosave new content
+
+When adding content, a copy of the form will be saved in `localStorage`, similar to edit mode.
+But since the content hasn't been saved yet, we don't have an ID.
+In this case the content type will be used.
+Since it also uses the path to create the ID, the local data will be restored if you exit without saving, and only if you add the same content in the same path.
+
+
+(autosave-comments-label)=
+
+## Autosave comments
+
+Comments are also saved locally, even though you are not in edit or add mode.
+After restoring local data, if a comment is submitted, it will be deleted from `localStorage`.

docs/source/user-manual/index.md

@@ -31,5 +31,6 @@ Note that the audience for these sources may be a Developer, not an Editor, and
 
 blocks
 copy-paste-blocks
+autosave
 links-to-item
 ```

news/4168.feature

@@ -0,0 +1,3 @@
+Add Auto-Save option. It will save a copy of the form, even comments even for adding a new content item. It detects if local data is less recent than server data.
+Saving the form will delete the local data for the specific form.
+User can choose to not restore the local data and this will also delete the local data. @tiberiuichim @rexalex @stevepiercy

packages/volto/cypress/tests/core/basic/autosave.js

@@ -0,0 +1,225 @@
+describe('createContent Tests', () => {
+  beforeEach(() => {
+    cy.autologin();
+    cy.createContent({
+      contentType: 'Document',
+      contentId: 'comments-page',
+      contentTitle: 'Comments Page',
+      allow_discussion: true,
+    });
+    cy.setRegistry(
+      'plone.app.discussion.interfaces.IDiscussionSettings.globally_enabled',
+      true,
+    );
+    cy.createContent({
+      contentType: 'Document',
+      contentId: 'my-first-page',
+      contentTitle: 'My First Page',
+    });
+    cy.createContent({
+      contentType: 'Document',
+      contentId: 'my-second-page',
+      contentTitle: 'My Second Page',
+    });
+  });
+
+  it('As editor I can autosave when editing a content item', () => {
+    cy.visit('/my-first-page');
+
+    cy.log('adding a text block on the first page');
+
+    cy.navigate('/my-first-page/edit');
+    cy.getSlateEditorAndType('My first text').contains('My first text');
+    cy.wait(1000);
+
+    cy.visit('/my-second-page');
+
+    cy.log('adding a text block on the second page');
+    cy.navigate('/my-second-page/edit');
+
+    cy.getSlateEditorAndType('My second text').contains('My second text');
+    cy.wait(1000);
+
+    cy.log('visit first page and start editing');
+
+    cy.visit('/my-first-page');
+    cy.navigate('/my-first-page/edit');
+    cy.wait(1000);
+
+    cy.findByRole('alert')
+      .get('.toast-inner-content')
+      .contains('Autosaved content found')
+      .get('button.ui.icon.button.save.toast-box')
+      .eq(0)
+      .click();
+
+    cy.wait(1000);
+
+    cy.getSlate().contains('My first text');
+
+    cy.log('visit second page and start editing');
+
+    cy.visit('/my-second-page');
+    cy.navigate('/my-second-page/edit');
+    cy.wait(1000);
+
+    cy.findByRole('alert')
+      .get('.toast-inner-content')
+      .contains('Autosaved content found')
+      .get('button.ui.icon.button.save.toast-box')
+      .eq(0)
+      .click();
+
+    cy.wait(1000);
+
+    cy.getSlate().contains('My second text');
+    cy.reload();
+
+    cy.log(
+      'test is cancel load data will delete from storage (toast does not show)',
+    );
+    cy.findByRole('alert')
+      .get('.toast-inner-content')
+      .contains('Autosaved content found')
+      .get('button.ui.icon.button.save.toast-box')
+      .eq(1)
+      .click();
+
+    cy.wait(1000);
+    cy.reload();
+
+    cy.wait(1000);
+
+    cy.contains('Autosaved content found').should('not.exist');
+  });
+
+  it('As editor I can autosave when adding a content item', function () {
+    cy.visit('/');
+
+    cy.log(
+      'adding a Document content type and refresh to verify if content is autosaved and retrieved',
+    );
+    cy.get('#toolbar-add').click().get('#toolbar-add-document').click();
+    cy.getSlateTitle().type('Page 1 title');
+    cy.getSlateEditorAndType('Page 1 content').contains('Page 1 content');
+    cy.wait(1000);
+    cy.reload();
+
+    cy.log('test if autosaved toast shows retrieved data and click OK to load');
+    cy.findByRole('alert')
+      .get('.toast-inner-content')
+      .contains('Autosaved content found')
+      .get('button.ui.icon.button.save.toast-box')
+      .eq(0)
+      .click();
+
+    cy.wait(1000);
+
+    cy.log('test if autosaved data is loaded');
+    cy.getSlateTitle().contains('Page 1 title');
+    cy.getSlate().contains('Page 1 content');
+
+    cy.log(
+      'test if draft is autosaved after I cancel adding a new page content type',
+    );
+
+    cy.get('button.button.cancel').click();
+
+    cy.wait(1000);
+
+    cy.get('#toolbar-add').click().get('#toolbar-add-document').click();
+
+    cy.findByRole('alert')
+      .get('.toast-inner-content')
+      .contains('Autosaved content found')
+      .get('button.ui.icon.button.save.toast-box')
+      .eq(0)
+      .click();
+
+    cy.wait(1000);
+    cy.getSlateTitle().contains('Page 1 title');
+    cy.getSlate().contains('Page 1 content');
+
+    cy.wait(1000);
+
+    cy.log('test if page content type is added as new page after Toolbar Save');
+
+    cy.get('#toolbar-save').focus().click();
+    cy.wait(2000);
+    cy.contains('Page 1 title');
+    cy.wait(1000);
+
+    cy.log('test draft is deleted from local storage after save');
+
+    cy.visit('/');
+    cy.get('#toolbar-add').click().get('#toolbar-add-document').click();
+
+    cy.wait(1000);
+
+    cy.contains('Autosaved content found').should('not.exist');
+  });
+
+  it('As editor I can autosave comments', function () {
+    cy.log('adding a comment and refresh,');
+    cy.visit('/comments-page');
+    cy.get('textarea[id="field-comment"]').clear().type('This is a comment');
+    cy.wait(1000);
+    cy.reload();
+
+    cy.log('test if comment is retrieved from local storage');
+
+    cy.findByRole('alert')
+      .get('.toast-inner-content')
+      .contains('Autosaved content found')
+      .get('button.ui.icon.button.save.toast-box')
+      .eq(0)
+      .click();
+
+    cy.get('#field-comment').contains('This is a comment');
+
+    cy.wait(1000);
+    cy.reload();
+
+    cy.log(
+      'test if comment is deleted from local storage after selecting Cancel in the Autosave toast',
+    );
+
+    cy.findByRole('alert')
+      .get('.toast-inner-content')
+      .contains('Autosaved content found')
+      .get('button.ui.icon.button.save.toast-box')
+      .eq(1)
+      .click();
+
+    cy.wait(1000);
+    cy.reload();
+    cy.contains('Autosaved content found').should('not.exist');
+
+    cy.log('adding another comment and save it');
+
+    cy.get('textarea[id="field-comment"]')
+      .clear()
+      .type('This is a another comment');
+    cy.wait(1000);
+    cy.reload();
+
+    cy.findByRole('alert')
+      .get('.toast-inner-content')
+      .contains('Autosaved content found')
+      .get('button.ui.icon.button.save.toast-box')
+      .eq(0)
+      .click();
+
+    cy.wait(1000);
+
+    cy.get('button[type="submit"').click();
+
+    cy.get('.comment').contains('This is a another comment');
+
+    cy.log('test if the local storage comment was deleted after submit');
+
+    cy.wait(1000);
+    cy.reload();
+    cy.contains('Autosaved content found').should('not.exist');
+  });
+});

packages/volto/cypress/tests/core/blocks/blocks-grid.js

@@ -47,7 +47,7 @@ context('Blocks Acceptance Tests', () => {
       cy.get('button[aria-label="Add block in position 1"]').click();
       cy.get('.blocks-chooser [aria-label="Unfold Text blocks"]').click();
       cy.wait(200);
-      cy.get('.blocks-chooser .text .button.slate').click();
+      cy.get('.blocks-chooser .text .button.slate').click({ force: true });
       cy.getSlateEditorSelectorAndType(
         '.block.gridBlock.selected .slate-editor [contenteditable=true]',
         'Colorless green ideas sleep furiously.',
@@ -90,7 +90,7 @@ context('Blocks Acceptance Tests', () => {
       cy.get('button[aria-label="Add block in position 1"]').click();
       cy.get('.blocks-chooser [aria-label="Unfold Text blocks"]').click();
       cy.wait(200);
-      cy.get('.blocks-chooser .text .button.slate').click();
+      cy.get('.blocks-chooser .text .button.slate').click({ force: true });
       cy.scrollTo('top');
 
       cy.getSlateEditorSelectorAndType(

packages/volto/locales/ca/LC_MESSAGES/volto.po

@@ -418,6 +418,11 @@ msgstr ""
 msgid "Assignments"
 msgstr ""
 
+#. Default: "Autosaved content found"
+#: helpers/Utils/withSaveAsDraft
+msgid "Autosaved content found"
+msgstr ""
+
 #. Default: "Available"
 #: components/manage/Controlpanels/AddonsControlpanel
 msgid "Available"
@@ -1109,6 +1114,11 @@ msgstr "Realment voleu suprimir l'usuari {username}?"
 msgid "Do you really want to delete this item?"
 msgstr "Realment voleu suprimir aquest element?"
 
+#. Default: "Do you want to restore the autosaved content?"
+#: helpers/Utils/withSaveAsDraft
+msgid "Do you want to restore the autosaved content?"
+msgstr ""
+
 #. Default: "Document"
 #: components/manage/Multilingual/TranslationObject
 #: components/manage/Sidebar/Sidebar
@@ -3636,6 +3646,11 @@ msgstr "El procés de registre ha estat satisfactori. Si us plau, comproveu la v
 msgid "The site configuration is outdated and needs to be upgraded."
 msgstr ""
 
+#. Default: "The version of the autosaved content I found in your browser is older than that stored on the server. Do you want to restore the autosaved content? (You can undo the autosaved content and revert to the server version.)"
+#: helpers/Utils/withSaveAsDraft
+msgid "The version of the autosaved content I found in your browser is older than that stored on the server. Do you want to restore the autosaved content? (You can undo the autosaved content and revert to the server version.)"
+msgstr ""
+
 #. Default: "The working copy was discarded"
 #: components/manage/Toolbar/More
 msgid "The working copy was discarded"

packages/volto/locales/de/LC_MESSAGES/volto.po

@@ -417,6 +417,11 @@ msgstr ""
 msgid "Assignments"
 msgstr "Zuweisungen"
 
+#. Default: "Autosaved content found"
+#: helpers/Utils/withSaveAsDraft
+msgid "Autosaved content found"
+msgstr ""
+
 #. Default: "Available"
 #: components/manage/Controlpanels/AddonsControlpanel
 msgid "Available"
@@ -1108,6 +1113,11 @@ msgstr "Möchten Sie den Nutzer {username} wirklich löschen?"
 msgid "Do you really want to delete this item?"
 msgstr "Möchten Sie den Artikel wirklich löschen?"
 
+#. Default: "Do you want to restore the autosaved content?"
+#: helpers/Utils/withSaveAsDraft
+msgid "Do you want to restore the autosaved content?"
+msgstr ""
+
 #. Default: "Document"
 #: components/manage/Multilingual/TranslationObject
 #: components/manage/Sidebar/Sidebar
@@ -3635,6 +3645,11 @@ msgstr "Bitte prüfen Sie Ihr E-Mail Postfach. Sie sollten eine E-Mail erhalten
 msgid "The site configuration is outdated and needs to be upgraded."
 msgstr "Die Seitenkonfiguration ist veraltet und muss aktualisiert werden."
 
+#. Default: "The version of the autosaved content I found in your browser is older than that stored on the server. Do you want to restore the autosaved content? (You can undo the autosaved content and revert to the server version.)"
+#: helpers/Utils/withSaveAsDraft
+msgid "The version of the autosaved content I found in your browser is older than that stored on the server. Do you want to restore the autosaved content? (You can undo the autosaved content and revert to the server version.)"
+msgstr ""
+
 #. Default: "The working copy was discarded"
 #: components/manage/Toolbar/More
 msgid "The working copy was discarded"