mirror of
https://github.com/codex-team/editor.js
synced 2024-05-19 14:56:46 +02:00
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
This commit is contained in:
parent
32dcd3fa6d
commit
18feb06a88
|
@ -3,6 +3,7 @@
|
||||||
### 2.23.3
|
### 2.23.3
|
||||||
|
|
||||||
- `Improvement` — *Dev Example Page* - Server added to allow opening example page on other devices in network.
|
- `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
|
### 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.
|
- `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` - Improvements of Toolbar's position calculation.
|
||||||
- `Improvements` — Improved zero-configuration initialization.
|
- `Improvements` — Improved zero-configuration initialization.
|
||||||
- and many little improvements.
|
- and many little improvements.
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@editorjs/editorjs",
|
"name": "@editorjs/editorjs",
|
||||||
"version": "2.23.2",
|
"version": "2.23.3",
|
||||||
"description": "Editor.js — Native JS, based on API and Open Source",
|
"description": "Editor.js — Native JS, based on API and Open Source",
|
||||||
"main": "dist/editor.js",
|
"main": "dist/editor.js",
|
||||||
"types": "./types/index.d.ts",
|
"types": "./types/index.d.ts",
|
||||||
|
@ -52,6 +52,7 @@
|
||||||
"@cypress/code-coverage": "^3.9.2",
|
"@cypress/code-coverage": "^3.9.2",
|
||||||
"@cypress/webpack-preprocessor": "^5.6.0",
|
"@cypress/webpack-preprocessor": "^5.6.0",
|
||||||
"@editorjs/code": "^2.7.0",
|
"@editorjs/code": "^2.7.0",
|
||||||
|
"@editorjs/delimiter": "^1.2.0",
|
||||||
"@editorjs/header": "^2.6.1",
|
"@editorjs/header": "^2.6.1",
|
||||||
"@editorjs/simple-image": "^1.4.1",
|
"@editorjs/simple-image": "^1.4.1",
|
||||||
"@types/node": "^14.14.35",
|
"@types/node": "^14.14.35",
|
||||||
|
|
|
@ -28,15 +28,11 @@ export default class Saver extends Module {
|
||||||
* @returns {OutputData}
|
* @returns {OutputData}
|
||||||
*/
|
*/
|
||||||
public async save(): Promise<OutputData> {
|
public async save(): Promise<OutputData> {
|
||||||
const { BlockManager, Tools, ModificationsObserver } = this.Editor;
|
const { BlockManager, Tools } = this.Editor;
|
||||||
const blocks = BlockManager.blocks,
|
const blocks = BlockManager.blocks,
|
||||||
chainData = [];
|
chainData = [];
|
||||||
|
|
||||||
try {
|
try {
|
||||||
/**
|
|
||||||
* Disable onChange callback on save to not to spam those events
|
|
||||||
*/
|
|
||||||
ModificationsObserver.disable();
|
|
||||||
|
|
||||||
blocks.forEach((block: Block) => {
|
blocks.forEach((block: Block) => {
|
||||||
chainData.push(this.getSavedData(block));
|
chainData.push(this.getSavedData(block));
|
||||||
|
@ -50,9 +46,7 @@ export default class Saver extends Module {
|
||||||
return this.makeOutput(sanitizedData);
|
return this.makeOutput(sanitizedData);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
_.logLabeled(`Saving failed due to the Error %o`, 'error', e);
|
_.logLabeled(`Saving failed due to the Error %o`, 'error', e);
|
||||||
} finally {
|
}
|
||||||
ModificationsObserver.enable();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import Header from '@editorjs/header';
|
import Header from '@editorjs/header';
|
||||||
import Code from '@editorjs/code';
|
import Code from '@editorjs/code';
|
||||||
|
import Delimiter from '@editorjs/delimiter';
|
||||||
import { BlockMutationType } from '../../../types/events/block/mutation-type';
|
import { BlockMutationType } from '../../../types/events/block/mutation-type';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -32,6 +33,32 @@ describe('onChange callback', () => {
|
||||||
cy.createEditor(config).as('editorInstance');
|
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
|
* 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', () => {
|
it('should fire onChange callback on block replacement for both of blocks', () => {
|
||||||
createEditor();
|
createEditor();
|
||||||
|
|
||||||
|
|
|
@ -1428,6 +1428,11 @@
|
||||||
resolved "https://registry.yarnpkg.com/@editorjs/code/-/code-2.7.0.tgz#0a21de9ac15e4533605ffcc80969513ab2142ac5"
|
resolved "https://registry.yarnpkg.com/@editorjs/code/-/code-2.7.0.tgz#0a21de9ac15e4533605ffcc80969513ab2142ac5"
|
||||||
integrity sha512-gXtTce915fHp3H9i4IqhTxEDbbkT2heFfYiW/bhFHsCmZDpyGzfZxi94kmrEqDmbxXjV49ZZ6GZbR26If13KJw==
|
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":
|
"@editorjs/header@^2.6.1":
|
||||||
version "2.6.1"
|
version "2.6.1"
|
||||||
resolved "https://registry.yarnpkg.com/@editorjs/header/-/header-2.6.1.tgz#454a46e4dbb32ae3aa1db4d22b0ddf2cc36c3134"
|
resolved "https://registry.yarnpkg.com/@editorjs/header/-/header-2.6.1.tgz#454a46e4dbb32ae3aa1db4d22b0ddf2cc36c3134"
|
||||||
|
|
Loading…
Reference in a new issue