fix(onchange): callback will be fired on removing of a whole text (#2392)

* fix(onchange): callback will be fired when the whole text is removed in a block

* whops

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.27.1
+
+- `Fix` - `onChange` will be called on removing the whole text in the last block
+
 ### 2.27.0
 
 - `New` — *Toolbar API* — Added a new method for toggling the toolbox.

package.json

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

src/components/utils/mutations.ts

@@ -7,6 +7,15 @@
 export function isMutationBelongsToElement(mutationRecord: MutationRecord, element: Element): boolean {
   const { type, target, addedNodes, removedNodes } = mutationRecord;
 
+  /**
+   * In case of removing the whole text in element, mutation type will be 'childList',
+   * 'removedNodes' will contain text node that is not existed anymore, so we can't check it with 'contains' method
+   * But Target will be the element itself, so we can detect it.
+   */
+  if (target === element) {
+    return true;
+  }
+
   /**
    * Check typing and attributes changes
    */

test/cypress/tests/onchange.cy.ts

@@ -488,4 +488,25 @@ describe('onChange callback', () => {
       cy.get('@onChange').should('have.callCount', 0);
     });
   });
+
+  it('should be fired when the whole text inside block is removed', () => {
+    createEditor([ {
+      type: 'paragraph',
+      data: {
+        text: 'a',
+      },
+    } ]);
+
+    cy.get('[data-cy=editorjs')
+      .get('div.ce-block')
+      .click()
+      .type('{backspace}');
+
+    cy.get('@onChange').should('be.calledWithMatch', EditorJSApiMock, Cypress.sinon.match({
+      type: BlockChangedMutationType,
+      detail: {
+        index: 0,
+      },
+    }));
+  });
 });