test: add testing for different blocks types merging

test/cypress/fixtures/tools/SimpleHeader.ts

@@ -0,0 +1,89 @@
+import {
+  BaseTool,
+  BlockToolConstructorOptions,
+  BlockToolData,
+  ConversionConfig
+} from '../../../../types';
+
+/**
+ * Simplified Header for testing
+ */
+export class SimpleHeader implements BaseTool {
+  private _data: BlockToolData;
+  private element: HTMLHeadingElement;
+
+  /**
+   *
+   * @param options - constructor options
+   */
+  constructor({ data }: BlockToolConstructorOptions) {
+    this._data = data;
+  }
+
+  /**
+   * Return Tool's view
+   *
+   * @returns {HTMLHeadingElement}
+   * @public
+   */
+  public render(): HTMLHeadingElement {
+    this.element = document.createElement('h1');
+
+    this.element.innerHTML = this._data.text;
+
+    return this.element;
+  }
+
+  /**
+   * @param data - saved data to merger with current block
+   */
+  public merge(data: BlockToolData): void {
+    this.data = {
+      text: this.data.text + data.text,
+      level: this.data.level,
+    };
+  }
+
+  /**
+   * Extract Tool's data from the view
+   *
+   * @param toolsContent - Text tools rendered view
+   */
+  public save(toolsContent: HTMLHeadingElement): BlockToolData {
+    return {
+      text: toolsContent.innerHTML,
+      level: 1,
+    };
+  }
+
+  /**
+   * Allow Header to be converted to/from other blocks
+   */
+  public static get conversionConfig(): ConversionConfig {
+    return {
+      export: 'text', // use 'text' property for other blocks
+      import: 'text', // fill 'text' property from other block's export string
+    };
+  }
+
+  /**
+   * Data getter
+   */
+  private get data(): BlockToolData {
+    this._data.text = this.element.innerHTML;
+    this._data.level = 1;
+
+    return this._data;
+  }
+
+  /**
+   * Data setter
+   */
+  private set data(data: BlockToolData) {
+    this._data = data;
+
+    if (data.text !== undefined) {
+      this.element.innerHTML = this._data.text || '';
+    }
+  }
+}

test/cypress/tests/modules/BlockEvents/Backspace.cy.ts

@@ -1,5 +1,7 @@
 import type EditorJS from '../../../../../types/index';
 import Chainable = Cypress.Chainable;
+import Header from '../../../../../example/tools/header/dist/header.mjs';
+import { SimpleHeader } from '../../../fixtures/tools/SimpleHeader';
 
 
 /**
@@ -293,6 +295,48 @@ describe('Backspace keydown', function () {
       .should('not.have.class', 'ce-toolbar--opened');
   });
 
+  it('should merge different types of blocks if they valid conversion config', function () {
+    cy.createEditor({
+      tools: {
+        header: SimpleHeader,
+      },
+      data: {
+        blocks: [
+          {
+            id: 'block1',
+            type: 'header',
+            data: {
+              text: 'First block heading',
+            },
+          },
+          {
+            id: 'block2',
+            type: 'paragraph',
+            data: {
+              text: 'Second block paragraph',
+            },
+          },
+        ],
+      },
+    }).as('editorInstance');
+
+    cy.get('[data-cy=editorjs]')
+      .find('.ce-paragraph')
+      .last()
+      .click()
+      .type('{home}') // move caret to the beginning
+      .type('{backspace}');
+
+    cy.get<EditorJS>('@editorInstance')
+      .then(async (editor) => {
+        const { blocks } = await editor.save();
+
+        expect(blocks.length).to.eq(1); // one block has been removed
+        expect(blocks[0].id).to.eq('block1'); // second block is still here
+        expect(blocks[0].data.text).to.eq('First block headingSecond block paragraph'); // text has been merged
+      });
+  });
+
   it('should simply set Caret to the end of the previous Block if Caret at the start of the Block but Blocks are not mergeable. Also, should close the Toolbox.', function () {
     /**
      * Mock of tool without merge method