diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index e4f66fe2..20a73f68 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -2,11 +2,11 @@ ### 2.28.0 +- `New` - Block ids now displayed in DOM via a data-id attribute. Could be useful for plugins that want access a Block's element by id. - `Improvement` - The Delete keydown at the end of the Block will now work opposite a Backspace at the start. Next Block will be removed (if empty) or merged with the current one. - `Improvement` - The Delete keydown will work like a Backspace when several Blocks are selected. - `Improvement` - If we have two empty Blocks, and press Backspace at the start of the second one, the previous will be removed instead of current. - ### 2.27.2 - `Fix` - `onChange` won't be called when element with data-mutation-free changes some attribute diff --git a/src/components/block/index.ts b/src/components/block/index.ts index e059b08b..b452e5d0 100644 --- a/src/components/block/index.ts +++ b/src/components/block/index.ts @@ -733,6 +733,12 @@ export default class Block extends EventsDispatcher { contentNode = $.make('div', Block.CSS.content), pluginsContent = this.toolInstance.render(); + /** + * Export id to the DOM three + * Useful for standalone modules development. For example, allows to identify Block by some child node. Or scroll to a particular Block by id. + */ + wrapper.dataset.id = this.id; + /** * Saving a reference to plugin's content element for guaranteed accessing it later */ diff --git a/test/cypress/tests/block-ids.cy.ts b/test/cypress/tests/block-ids.cy.ts index 7b6f5749..19046137 100644 --- a/test/cypress/tests/block-ids.cy.ts +++ b/test/cypress/tests/block-ids.cy.ts @@ -130,4 +130,34 @@ describe('Block ids', () => { expect(data.blocks[2].id).to.eq(blocks[1].id); }); }); + + it('should be stored at the Block wrapper\'s data-id attribute', () => { + const blocks = [ + { + id: nanoid(), + type: 'paragraph', + data: { + text: 'First block', + }, + }, + { + id: nanoid(), + type: 'paragraph', + data: { + text: 'Second block', + }, + }, + ]; + + cy.get('@editorInstance') + .render({ + blocks, + }); + + cy.get('[data-cy=editorjs]') + .get('div.ce-block') + .each(($block, index) => { + expect($block.attr('data-id')).to.eq(blocks[index].id); + }); + }); });