Save edit form as draft using localStorage

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('Autosave 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('Autosave 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('Autosave found')
+      .get('button.ui.icon.button.save.toast-box')
+      .eq(1)
+      .click();
+
+    cy.wait(1000);
+    cy.reload();
+
+    cy.wait(1000);
+
+    cy.contains('Autosave 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('Autosave 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('Autosave 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('Autosave 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('Autosave 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('Autosave found')
+      .get('button.ui.icon.button.save.toast-box')
+      .eq(1)
+      .click();
+
+    cy.wait(1000);
+    cy.reload();
+    cy.contains('Autosave 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('Autosave 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('Autosave found').should('not.exist');
+  });
+});

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(

docs/source/user-manual/autosave.md

@@ -0,0 +1,48 @@
+---
+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 for edit, add, and comments"
+    "keywords": "Volto, Plone, frontend, React, User manual, autosave"
+---
+
+(autosave-content-label)=
+
+# Autosave content
+
+The autosave feature allows you to load 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 once either the form is saved or you cancel loading the local data.
+If local data is found for the specific content, a toast is shown that allows you to either load ({guilabel}`OK`) or discard ({guilabel}`Cancel`).
+If local data is stale, it will still show the toast, but it will specify that the found data is less recent than the server one.
+
+(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 edit, 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 loaded again 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 loading 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
 ```

locales/ca/LC_MESSAGES/volto.po

@@ -416,6 +416,11 @@ msgstr "Ascendent"
 msgid "Assignments"
 msgstr ""
 
+#: helpers/Utils/withSaveAsDraft
+# defaultMessage: Autosave found
+msgid "Autosave found"
+msgstr ""
+
 #: components/manage/Controlpanels/AddonsControlpanel
 # defaultMessage: Available
 msgid "Available"
@@ -1097,6 +1102,11 @@ msgstr "Realment voleu suprimir l'usuari {username}?"
 msgid "Do you really want to delete this item?"
 msgstr "Realment voleu suprimir aquest element?"
 
+#: helpers/Utils/withSaveAsDraft
+# defaultMessage: Do you want to load it?
+msgid "Do you want to load it?"
+msgstr ""
+
 #: components/manage/Multilingual/TranslationObject
 #: components/manage/Sidebar/Sidebar
 # defaultMessage: Document
@@ -3616,6 +3626,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 ""
 
+#: helpers/Utils/withSaveAsDraft
+# defaultMessage: The version found is less recent than the server, do you want to load it (you can undo if you change your mind)?
+msgid "The version found is less recent than the server, do you want to load it (you can undo if you change your mind)?"
+msgstr ""
+
 #: components/manage/Toolbar/More
 # defaultMessage: The working copy was discarded
 msgid "The working copy was discarded"

locales/de/LC_MESSAGES/volto.po

@@ -413,6 +413,11 @@ msgstr "Aufsteigend"
 msgid "Assignments"
 msgstr "Zuweisungen"
 
+#: helpers/Utils/withSaveAsDraft
+# defaultMessage: Autosave found
+msgid "Autosave found"
+msgstr ""
+
 #: components/manage/Controlpanels/AddonsControlpanel
 # defaultMessage: Available
 msgid "Available"
@@ -1094,6 +1099,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?"
 
+#: helpers/Utils/withSaveAsDraft
+# defaultMessage: Do you want to load it?
+msgid "Do you want to load it?"
+msgstr ""
+
 #: components/manage/Multilingual/TranslationObject
 #: components/manage/Sidebar/Sidebar
 # defaultMessage: Document
@@ -3613,6 +3623,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."
 
+#: helpers/Utils/withSaveAsDraft
+# defaultMessage: The version found is less recent than the server, do you want to load it (you can undo if you change your mind)?
+msgid "The version found is less recent than the server, do you want to load it (you can undo if you change your mind)?"
+msgstr ""
+
 #: components/manage/Toolbar/More
 # defaultMessage: The working copy was discarded
 msgid "The working copy was discarded"