(feat): Autosave using localStorage

docs/source/user-manual/blocks.md

@@ -15,6 +15,41 @@ Volto features the [Pastanaga UI](https://github.com/plone/pastanaga), allowing
 The blocks editor allows you to add, modify, reorder, and delete blocks given your requirements.
 Blocks provide the user the ability to display content in a specific way, although they can also define behavior and have specific features.
 
+(autosave-label)=
+
+## Autosave
+
+Volto provides an autosave mechanism that automatically captures your ongoing edits as you work on a page or content item.
+
+Changes made in the blocks editor are periodically saved in the background to prevent data loss, even if the user navigates away or the browser unexpectedly closes.
+
+Autosave stores changes locally in your browser using [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
+These changes remain available until you explicitly click the {guilabel}`Save` button <img alt="Save icon" src="../_static/user-manual/blocks/save.svg" class="inline">, at which point they are persisted to the server and the local storage is cleared.
+
+Watch the video below for a quick demonstration.
+
+````{only} not text
+```{video} ../_static/user-manual/blocks/autosave-local.mp4
+:alt: Autosave
+```
+````
+
+### Autosave and edit conflicts
+
+If another user edits and saves the same page while you're still working on it, Volto detects the conflict between your autosaved version and the newer version saved on the server.
+
+In this case, when you return to the editor, Volto displays a message informing you that the page content has changed, but a previously autosaved version still exists.
+
+You will be prompted to choose whether you want to restore your autosaved version or continue with the newer version from the server.
+After making your choice, you can also undo that action.
+
+````{only} not text
+```{video} ../_static/user-manual/blocks/autosave-remote.mp4
+```
+````
+:alt: Autosave conflicts
+```
+
 
 (manage-blocks-label)=
 

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

@@ -0,0 +1,217 @@
+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.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.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.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.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.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.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.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.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/locales/ca/LC_MESSAGES/volto.po

@@ -386,6 +386,11 @@ msgstr ""
 msgid "Alternative url path → target url path (date and time of creation, manually created yes/no)"
 msgstr ""
 
+#. Default: "Another person edited this content, and it's currently displayed. Do you want to replace it with your autosaved content?"
+#: helpers/Utils/withSaveAsDraft
+msgid "Another person edited this content, and it's currently displayed. Do you want to replace it with your autosaved content?"
+msgstr ""
+
 #. Default: "Applied to subfolders"
 #: components/manage/Rules/Rules
 msgid "Applied to subfolders"
@@ -437,6 +442,11 @@ msgstr ""
 msgid "Automatically"
 msgstr ""
 
+#. Default: "Autosaved content found"
+#: helpers/Utils/withSaveAsDraft
+msgid "Autosaved content found"
+msgstr ""
+
 #. Default: "Available"
 #: components/manage/Controlpanels/AddonsControlpanel
 msgid "Available"
@@ -1170,6 +1180,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 your autosaved content?"
+#: helpers/Utils/withSaveAsDraft
+msgid "Do you want to restore your autosaved content?"
+msgstr ""
+
 #. Default: "Document"
 #: components/manage/Multilingual/TranslationObject
 #: components/manage/Sidebar/Sidebar

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

@@ -385,6 +385,11 @@ msgstr "Alternativer Pfad muss mit einem Schrägstrich beginnen"
 msgid "Alternative url path → target url path (date and time of creation, manually created yes/no)"
 msgstr "Alternativer URL Pfad → Zielpfad (Datum und Zeit der Erstellung, manuell erstellt ja/nein)"
 
+#. Default: "Another person edited this content, and it's currently displayed. Do you want to replace it with your autosaved content?"
+#: helpers/Utils/withSaveAsDraft
+msgid "Another person edited this content, and it's currently displayed. Do you want to replace it with your autosaved content?"
+msgstr ""
+
 #. Default: "Applied to subfolders"
 #: components/manage/Rules/Rules
 msgid "Applied to subfolders"
@@ -436,6 +441,11 @@ msgstr "Zuweisungen"
 msgid "Automatically"
 msgstr "automatisch"
 
+#. Default: "Autosaved content found"
+#: helpers/Utils/withSaveAsDraft
+msgid "Autosaved content found"
+msgstr ""
+
 #. Default: "Available"
 #: components/manage/Controlpanels/AddonsControlpanel
 msgid "Available"
@@ -1169,6 +1179,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 your autosaved content?"
+#: helpers/Utils/withSaveAsDraft
+msgid "Do you want to restore your autosaved content?"
+msgstr ""
+
 #. Default: "Document"
 #: components/manage/Multilingual/TranslationObject
 #: components/manage/Sidebar/Sidebar

packages/volto/locales/en/LC_MESSAGES/volto.po

@@ -380,6 +380,11 @@ msgstr ""
 msgid "Alternative url path → target url path (date and time of creation, manually created yes/no)"
 msgstr ""
 
+#. Default: "Another person edited this content, and it's currently displayed. Do you want to replace it with your autosaved content?"
+#: helpers/Utils/withSaveAsDraft
+msgid "Another person edited this content, and it's currently displayed. Do you want to replace it with your autosaved content?"
+msgstr ""
+
 #. Default: "Applied to subfolders"
 #: components/manage/Rules/Rules
 msgid "Applied to subfolders"
@@ -431,6 +436,11 @@ msgstr ""
 msgid "Automatically"
 msgstr ""
 
+#. Default: "Autosaved content found"
+#: helpers/Utils/withSaveAsDraft
+msgid "Autosaved content found"
+msgstr ""
+
 #. Default: "Available"
 #: components/manage/Controlpanels/AddonsControlpanel
 msgid "Available"
@@ -1164,6 +1174,11 @@ msgstr ""
 msgid "Do you really want to delete this item?"
 msgstr ""
 
+#. Default: "Do you want to restore your autosaved content?"
+#: helpers/Utils/withSaveAsDraft
+msgid "Do you want to restore your autosaved content?"
+msgstr ""
+
 #. Default: "Document"
 #: components/manage/Multilingual/TranslationObject
 #: components/manage/Sidebar/Sidebar