fix(block-events): caret losing after backspace after nested list (#2723)

* feat: Fix caret loss after Backspace at the start of block when previous block is not convertible

* fix create shadow caret

* fix: remove unnecessary blank line in blockEvents.ts

* fix: pass event object to slashPressed method in blockEvents.ts

* fix eslint

Author: neSpecc

docs/CHANGELOG.md

@@ -13,6 +13,7 @@
 - `Fix` – Unwanted scroll on first typing on iOS devices
 - `Fix` - Unwanted soft line break on Enter press after period and space (". |") on iOS devices
 - `Fix` - Caret lost after block conversion on mobile devices.
+- `Fix` - Caret lost after Backspace at the start of block when previoius block is not convertable
 - `Improvement` - The API `blocks.convert()` now returns the new block API
 - `Improvement` - The API `caret.setToBlock()` now can accept either BlockAPI or block index or block id
 - `New` – *Menu Config* – New item type – HTML

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.30.0-rc.9",
+  "version": "2.30.0-rc.10",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editorjs.umd.js",
   "module": "dist/editorjs.mjs",

src/components/modules/blockEvents.ts

@@ -60,7 +60,7 @@ export default class BlockEvents extends Module {
      * @todo probably using "beforeInput" event would be better here
      */
     if (event.key === '/' && !event.ctrlKey && !event.metaKey) {
-      this.slashPressed();
+      this.slashPressed(event);
     }
 
     /**
@@ -233,8 +233,10 @@ export default class BlockEvents extends Module {
 
   /**
    * '/' keydown inside a Block
+   *
+   * @param event - keydown
    */
-  private slashPressed(): void {
+  private slashPressed(event: KeyboardEvent): void {
     const currentBlock = this.Editor.BlockManager.currentBlock;
     const canOpenToolbox = currentBlock.isEmpty;
 
@@ -395,7 +397,7 @@ export default class BlockEvents extends Module {
       return;
     }
 
-    const bothBlocksMergeable = areBlocksMergeable(currentBlock, previousBlock);
+    const bothBlocksMergeable = areBlocksMergeable(previousBlock, currentBlock);
 
     /**
      * If Blocks could be merged, do it
@@ -499,7 +501,7 @@ export default class BlockEvents extends Module {
   private mergeBlocks(targetBlock: Block, blockToMerge: Block): void {
     const { BlockManager, Caret, Toolbar } = this.Editor;
 
-    Caret.createShadow(targetBlock.pluginsContent);
+    Caret.createShadow(targetBlock.lastInput);
 
     BlockManager
       .mergeBlocks(targetBlock, blockToMerge)

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

@@ -1,6 +1,7 @@
 import type EditorJS from '../../../../../types/index';
 import Chainable = Cypress.Chainable;
 import { SimpleHeader } from '../../../fixtures/tools/SimpleHeader';
+import type { ConversionConfig } from '../../../../../types/index';
 
 
 /**
@@ -425,11 +426,11 @@ describe('Backspace keydown', function () {
       .should('not.have.class', 'ce-toolbar--opened');
   });
 
-  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 () {
+  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 (target Bock is lack of merge() and conversionConfig). Also, should close the Toolbox.', function () {
     /**
-     * Mock of tool without merge method
+     * Mock of tool without merge() method
      */
-    class ExampleOfUnmergeableTool {
+    class UnmergeableToolWithoutConversionConfig {
       /**
        * Render method mock
        */
@@ -452,7 +453,90 @@ describe('Backspace keydown', function () {
 
     cy.createEditor({
       tools: {
-        code: ExampleOfUnmergeableTool,
+        code: UnmergeableToolWithoutConversionConfig,
+      },
+      data: {
+        blocks: [
+          {
+            type: 'code',
+            data: {},
+          },
+          {
+            type: 'paragraph',
+            data: {
+              text: 'Second block',
+            },
+          },
+        ],
+      },
+    });
+
+    cy.get('[data-cy=editorjs]')
+      .find('.ce-paragraph')
+      .last()
+      .click()
+      .type('{home}')
+      .type('{backspace}');
+
+    cy.get('[data-cy=editorjs]')
+      .find('[data-cy=unmergeable-tool]')
+      .as('firstBlock');
+
+    /**
+     * Caret is set to the previous Block
+     */
+    cy.window()
+      .then((window) => {
+        const selection = window.getSelection();
+        const range = selection.getRangeAt(0);
+
+        cy.get('@firstBlock').should(($div) => {
+          expect($div[0].contains(range.startContainer)).to.be.true;
+        });
+      });
+  });
+
+  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 (target Bock is lack of merge() but has the conversionConfig). Also, should close the Toolbox.', function () {
+    /**
+     * Mock of tool without merge() method
+     */
+    class UnmergeableToolWithConversionConfig {
+      /**
+       * Render method mock
+       */
+      public render(): HTMLElement {
+        const container = document.createElement('div');
+
+        container.dataset.cy = 'unmergeable-tool';
+        container.contentEditable = 'true';
+        container.innerHTML = 'Unmergeable not empty tool';
+
+        return container;
+      }
+
+      /**
+       * Saving logic is not necessary for this test
+       */
+      public save(): { key: string } {
+        return {
+          key: 'value',
+        };
+      }
+
+      /**
+       * Mock of the conversionConfig
+       */
+      public static get conversionConfig(): ConversionConfig {
+        return {
+          export: 'key',
+          import: 'key',
+        };
+      }
+    }
+
+    cy.createEditor({
+      tools: {
+        code: UnmergeableToolWithConversionConfig,
       },
       data: {
         blocks: [