Fix OnChange Event Invocation (#2007)

* fix: call onchange event after block insert

* changelog updated

* patch version updated

* removed the modification observer from saver

* only changelog version added

* delimiter added

* feat: test case added for save inside the onchange

docs/CHANGELOG.md

@@ -3,6 +3,7 @@
 ### 2.23.3
 
 - `Improvement` — *Dev Example Page* - Server added to allow opening example page on other devices in network.
+- `Fix` — `OnChange` event invocation after block insertion. [#1997](https://github.com/codex-team/editor.js/issues/1997)
 
 ### 2.23.2
 
@@ -434,4 +435,4 @@ See a whole [Changelog](/docs/)
 - `New` New [Editor.js PHP](http://github.com/codex-team/codex.editor.backend) — example of server-side implementation with HTML purifying and data validation.
 - `Improvements` - Improvements of Toolbar's position calculation.
 - `Improvements` — Improved zero-configuration initialization.
-- and many little improvements.
+- and many little improvements.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.23.2",
+  "version": "2.23.3",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editor.js",
   "types": "./types/index.d.ts",
@@ -52,6 +52,7 @@
     "@cypress/code-coverage": "^3.9.2",
     "@cypress/webpack-preprocessor": "^5.6.0",
     "@editorjs/code": "^2.7.0",
+    "@editorjs/delimiter": "^1.2.0",
     "@editorjs/header": "^2.6.1",
     "@editorjs/simple-image": "^1.4.1",
     "@types/node": "^14.14.35",

src/components/modules/saver.ts

@@ -28,15 +28,11 @@ export default class Saver extends Module {
    * @returns {OutputData}
    */
   public async save(): Promise<OutputData> {
-    const { BlockManager, Tools, ModificationsObserver } = this.Editor;
+    const { BlockManager, Tools } = this.Editor;
     const blocks = BlockManager.blocks,
         chainData = [];
 
     try {
-      /**
-       * Disable onChange callback on save to not to spam those events
-       */
-      ModificationsObserver.disable();
 
       blocks.forEach((block: Block) => {
         chainData.push(this.getSavedData(block));
@@ -50,9 +46,7 @@ export default class Saver extends Module {
       return this.makeOutput(sanitizedData);
     } catch (e) {
       _.logLabeled(`Saving failed due to the Error %o`, 'error', e);
-    } finally {
-      ModificationsObserver.enable();
-    }
+    } 
   }
 
   /**

test/cypress/tests/onchange.spec.ts

@@ -1,5 +1,6 @@
 import Header from '@editorjs/header';
 import Code from '@editorjs/code';
+import Delimiter from '@editorjs/delimiter';
 import { BlockMutationType } from '../../../types/events/block/mutation-type';
 
 /**
@@ -32,6 +33,32 @@ describe('onChange callback', () => {
     cy.createEditor(config).as('editorInstance');
   }
 
+  /**
+   * Creates Editor instance with save inside the onChange event.
+   *
+   * @param blocks - list of blocks to prefill the editor
+   */
+  function createEditorWithSave(blocks = null): void {
+    const config = {
+      tools: {
+        header: Header,
+        code: Code,
+        delimiter: Delimiter,
+      },
+      onChange: (api, event): void => {
+        console.log('something changed', api, event);
+        api.saver.save();
+      },
+      data: blocks ? {
+        blocks,
+      } : null,
+    };
+
+    cy.spy(config, 'onChange').as('onChange');
+
+    cy.createEditor(config).as('editorInstance');
+  }
+
   /**
    * EditorJS API is passed as the first parameter of the onChange callback
    */
@@ -92,6 +119,53 @@ describe('onChange callback', () => {
     }));
   });
 
+  it('should fire onChange callback on block insertion with save inside onChange', () => {
+    createEditorWithSave();
+
+    cy.get('[data-cy=editorjs]')
+      .get('div.ce-block')
+      .click();
+
+    cy.get('[data-cy=editorjs]')
+      .get('div.ce-toolbar__plus')
+      .click();
+
+    cy.get('[data-cy=editorjs]')
+      .get('li.ce-toolbox__button[data-tool=delimiter]')
+      .click();
+
+    cy.get('@onChange').should('be.calledThrice');
+    cy.get('@onChange').should('be.calledWithMatch', EditorJSApiMock, Cypress.sinon.match({
+      type: BlockMutationType.Removed,
+      detail: {
+        index: 0,
+        target: {
+          name: 'paragraph',
+        },
+      },
+    }));
+
+    cy.get('@onChange').should('be.calledWithMatch', EditorJSApiMock, Cypress.sinon.match({
+      type: BlockMutationType.Added,
+      detail: {
+        index: 0,
+        target: {
+          name: 'delimiter',
+        },
+      },
+    }));
+
+    cy.get('@onChange').should('be.calledWithMatch', EditorJSApiMock, Cypress.sinon.match({
+      type: BlockMutationType.Added,
+      detail: {
+        index: 1,
+        target: {
+          name: 'paragraph',
+        },
+      },
+    }));
+  });
+
   it('should fire onChange callback on block replacement for both of blocks', () => {
     createEditor();
 

yarn.lock

@@ -1428,6 +1428,11 @@
   resolved "https://registry.yarnpkg.com/@editorjs/code/-/code-2.7.0.tgz#0a21de9ac15e4533605ffcc80969513ab2142ac5"
   integrity sha512-gXtTce915fHp3H9i4IqhTxEDbbkT2heFfYiW/bhFHsCmZDpyGzfZxi94kmrEqDmbxXjV49ZZ6GZbR26If13KJw==
 
+"@editorjs/delimiter@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@editorjs/delimiter/-/delimiter-1.2.0.tgz#5075f1a3e68765cfb6aec8694b316d81e2b41607"
+  integrity sha512-GKsCFPk85vH5FuCuVQ48NTLc9hk0T3DsBH9zABaicTYIJayFcUa8N4/Y+L3i4tduzDqqyvoxkv+5n43GmC5gEA==
+
 "@editorjs/header@^2.6.1":
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/@editorjs/header/-/header-2.6.1.tgz#454a46e4dbb32ae3aa1db4d22b0ddf2cc36c3134"