feat(blocks-dom): block ids exported as data-id attribute (codex-team…

…#2404)

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

src/components/block/index.ts

@@ -733,6 +733,12 @@ export default class Block extends EventsDispatcher<BlockEvents> {
         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
      */

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);
+      });
+  });
 });