Fixed issue of merging block contents upon pressing backspace at start of second block with some content

packages/volto-slate/src/blocks/Text/keyboard/joinBlocks.js

@@ -5,7 +5,7 @@
 import {
   getPreviousVoltoBlock,
   getNextVoltoBlock,
   mergeSlateWithBlockBackward,
   mergeSlateWithBlockForward,
 } from '@plone/volto-slate/utils/volto-blocks';
 import {
@@ -76,21 +76,56 @@
 
   // Else the editor contains characters, so we merge the current block's
   // `editor` with the block before, `otherBlock`.
-  const cursor = mergeSlateWithBlockBackward(editor, otherBlock);
-
-  const combined = JSON.parse(JSON.stringify(editor.children));
+  const prevValue = [...otherBlock.value];
+  const currentValue = [...editor.children];
+
+  const lastNode = prevValue[prevValue.length - 1];
+  const firstNode = currentValue[0];
+  let merged;
+  let cursor;
+
+  if (lastNode && firstNode && lastNode.type === firstNode.type) {
+    const mergedFirstNode = {
+      ...lastNode,
+      children: [...lastNode.children, ...firstNode.children],
+    };
+
+    merged = [
+      ...prevValue.slice(0, -1),
+      mergedFirstNode,
+      ...currentValue.slice(1),
+    ];
+
+    cursor = {
+      anchor: {
+        path: [prevValue.length - 1, lastNode.children.length],
+        offset: 0,
+      },
+      focus: {
+        path: [prevValue.length - 1, lastNode.children.length],
+        offset: 0,
+      },
+    };
+  } else {
+    merged = [...prevValue, ...currentValue];
+    cursor = getBlockEndAsRange({
+      ...otherBlock,
+      value: merged,
+    });
+  }
 
   // // TODO: don't remove undo history, etc Should probably save both undo
   // // histories, so that the blocks are split, the undos can be restored??
 
   // const cursor = getBlockEndAsRange(otherBlock);
+
+
   const formData = changeBlock(properties, otherBlockId, {
     '@type': 'slate', // TODO: use a constant specified in src/constants.js instead of 'slate'
-    value: combined,
-    plaintext: serializeNodesToText(combined || []),
+    value: merged,
+    plaintext: serializeNodesToText(merged || []),
   });
   const newFormData = deleteBlock(formData, block, intl);
-
   ReactDOM.unstable_batchedUpdates(() => {
     saveSlateBlockSelection(otherBlockId, cursor);
     onChangeField(blocksFieldname, newFormData[blocksFieldname]);

packages/volto/cypress/tests/core/blocks/blocks-slate-backspace.js

@@ -0,0 +1,32 @@
+describe('Slate Backspace Behavior', () => {
+  beforeEach(() => {
+    cy.intercept('GET', `/**/*?expand*`).as('content');
+    cy.intercept('GET', '/**/Document').as('schema');
+
+    cy.autologin();
+    cy.createContent({
+      contentType: 'Document',
+      contentId: 'my-page',
+      contentTitle: 'My Page',
+    });
+    cy.visit('/my-page');
+    cy.wait('@content');
+
+    cy.navigate('/my-page/edit');
+    cy.wait('@schema');
+  });
+
+  it('Backspace at start of second block deletes it and merges content into first block', () => {
+    cy.getSlateEditorAndType('First block text');
+
+    cy.addNewBlock('slate');
+    cy.getSlateEditorAndType('Second block text');
+
+    cy.getSlate().setCursorBefore('Second').type('{backspace}');
+
+    cy.get('.content-area .slate-editor [contenteditable=true]')
+      .should('have.length', 1)
+      .should('contain', 'First block text')
+      .should('contain', 'Second block text');
+  });
+});