mirror of
https://github.com/codex-team/editor.js
synced 2024-06-13 11:22:25 +02:00
fix(onchange): support data-mutation-free on attributes chane (#2393)
This commit is contained in:
parent
c8993332e3
commit
9e64003c0a
|
@ -1,8 +1,12 @@
|
||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
### 2.27.2
|
||||||
|
|
||||||
|
- `Fix` - `onChange` won't be called when element with data-mutation-free changes some attribute
|
||||||
|
|
||||||
### 2.27.1
|
### 2.27.1
|
||||||
|
|
||||||
- `Fix` - `onChange` will be called on removing the whole text in the last block
|
- `Fix` - `onChange` will be called on removing the whole text in a block
|
||||||
|
|
||||||
### 2.27.0
|
### 2.27.0
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@editorjs/editorjs",
|
"name": "@editorjs/editorjs",
|
||||||
"version": "2.27.1",
|
"version": "2.27.2",
|
||||||
"description": "Editor.js — Native JS, based on API and Open Source",
|
"description": "Editor.js — Native JS, based on API and Open Source",
|
||||||
"main": "dist/editorjs.umd.js",
|
"main": "dist/editorjs.umd.js",
|
||||||
"module": "dist/editorjs.mjs",
|
"module": "dist/editorjs.mjs",
|
||||||
|
|
|
@ -878,10 +878,11 @@ export default class Block extends EventsDispatcher<BlockEvents> {
|
||||||
* — we should fire 'didMutated' event in that case
|
* — we should fire 'didMutated' event in that case
|
||||||
*/
|
*/
|
||||||
const everyRecordIsMutationFree = mutationsOrInputEvent.length > 0 && mutationsOrInputEvent.every((record) => {
|
const everyRecordIsMutationFree = mutationsOrInputEvent.length > 0 && mutationsOrInputEvent.every((record) => {
|
||||||
const { addedNodes, removedNodes } = record;
|
const { addedNodes, removedNodes, target } = record;
|
||||||
const changedNodes = [
|
const changedNodes = [
|
||||||
...Array.from(addedNodes),
|
...Array.from(addedNodes),
|
||||||
...Array.from(removedNodes),
|
...Array.from(removedNodes),
|
||||||
|
target,
|
||||||
];
|
];
|
||||||
|
|
||||||
return changedNodes.some((node) => {
|
return changedNodes.some((node) => {
|
||||||
|
|
|
@ -509,4 +509,70 @@ describe('onChange callback', () => {
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should not be fired when element with the "data-mutation-free" mark changes some attribute', () => {
|
||||||
|
/**
|
||||||
|
* Mock for tool wrapper which we will mutate in a test
|
||||||
|
*/
|
||||||
|
const toolWrapper = document.createElement('div');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mark it as mutation-free
|
||||||
|
*/
|
||||||
|
toolWrapper.dataset.mutationFree = 'true';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mock of tool with data-mutation-free attribute
|
||||||
|
*/
|
||||||
|
class ToolWithMutationFreeAttribute {
|
||||||
|
/**
|
||||||
|
* Simply return mocked element
|
||||||
|
*/
|
||||||
|
public render(): HTMLElement {
|
||||||
|
return toolWrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Saving logic is not necessary for this test
|
||||||
|
*/
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||||
|
public save(): void {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const editorConfig = {
|
||||||
|
tools: {
|
||||||
|
testTool: ToolWithMutationFreeAttribute,
|
||||||
|
},
|
||||||
|
onChange: (api, event): void => {
|
||||||
|
console.log('something changed', event);
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
blocks: [
|
||||||
|
{
|
||||||
|
type: 'testTool',
|
||||||
|
data: {},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
cy.spy(editorConfig, 'onChange').as('onChange');
|
||||||
|
cy.createEditor(editorConfig).as('editorInstance');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Emulate tool's internal attribute mutation
|
||||||
|
*/
|
||||||
|
// eslint-disable-next-line cypress/no-unnecessary-waiting, @typescript-eslint/no-magic-numbers
|
||||||
|
cy.wait(100).then(() => {
|
||||||
|
toolWrapper.setAttribute('some-changed-attr', 'some-new-value');
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check that onChange callback was not called
|
||||||
|
*/
|
||||||
|
// eslint-disable-next-line cypress/no-unnecessary-waiting, @typescript-eslint/no-magic-numbers
|
||||||
|
cy.wait(500).then(() => {
|
||||||
|
cy.get('@onChange').should('have.callCount', 0);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue