From 15323e4ffccdb29ca9693a8d817a8f99272d2fd8 Mon Sep 17 00:00:00 2001
From: Vitor Carvalho <lightningspirit@gmail.com>
Date: Mon, 25 Oct 2021 18:49:52 +0100
Subject: [PATCH] Added support for EditorJS 2.20

---
 src/__snapshots__/index.test.tsx.snap | 144 +++++++++++++++++++++++++-
 src/index.test.tsx                    | 130 ++++++++++++++++++++++-
 src/index.tsx                         |   5 +-
 3 files changed, 276 insertions(+), 3 deletions(-)

diff --git a/src/__snapshots__/index.test.tsx.snap b/src/__snapshots__/index.test.tsx.snap
index 720dc9b..46db491 100644
--- a/src/__snapshots__/index.test.tsx.snap
+++ b/src/__snapshots__/index.test.tsx.snap
@@ -54,7 +54,149 @@ Array [
 ]
 `;
 
-exports[`<Block /> when receives an EditorJS blocks data renders all known block tags 1`] = `
+exports[`<Block /> when receives an EditorJS 2.19 blocks data renders all known block tags 1`] = `
+Array [
+  <p>
+    Mollit deserunt culpa fugiat ea do laboris minim ex do. Elit cillum qui aute sint irure aliqua excepteur minim. Eiusmod velit cupidatat ea culpa magna magna id consectetur enim irure ex excepteur tempor quis. Veniam incididunt ullamco adipisicing dolor ex proident ex amet dolor. Nisi in adipisicing non quis id Lorem consectetur.
+  </p>,
+  <p>
+    Nulla pariatur proident cillum consequat cupidatat ex reprehenderit nisi quis mollit laboris dolore ex. Laborum sint duis elit proident. Aliquip id mollit commodo excepteur.
+  </p>,
+  <h3>
+    Quis consectetur nostrud eu officia aute laborum labore nulla?
+  </h3>,
+  <p>
+    Non pariatur deserunt elit proident. Reprehenderit cupidatat velit veniam ut pariatur minim culpa in ex commodo do sint magna cillum. Eiusmod enim officia et ipsum exercitation veniam veniam ad minim ad minim. Eiusmod dolore dolor minim magna velit officia ut est occaecat magna in.
+  </p>,
+  <h4>
+    Do laboris magna quis nisi consequat!
+  </h4>,
+  <p>
+    Sunt elit labore consequat proident ullamco minim cupidatat. Exercitation reprehenderit ut ad irure eiusmod proident. Culpa culpa nulla eiusmod reprehenderit est officia Lorem id. Aliqua non commodo sint sunt ex nulla. Nulla esse irure eiusmod dolor nisi aliqua do cillum dolor amet officia. Veniam aliqua aliquip eu voluptate commodo sint ut. Sit nostrud Lorem aliquip ex culpa irure nulla deserunt consequat nulla ea velit in.
+  </p>,
+  <figure
+    className="image-block--with-background"
+  >
+    <img
+      alt="Deep in the universe"
+      src="https://cdn.directions.pt/uploads/2020/08/681-2000x1300-2.jpg"
+    />
+    <figcaption>
+      Deep in the universe
+    </figcaption>
+  </figure>,
+  <blockquote
+    className="text-align-center"
+  >
+    <p>
+      Esse ea consectetur est fugiat ut dolor pariatur ex voluptate ad Lorem Lorem sit sunt. Eiusmod voluptate ullamco laborum minim elit. Cillum ullamco fugiat tempor dolore enim. Excepteur exercitation amet aliqua proident labore qui sint do dolore sint nulla aute.
+    </p>
+    <footer>
+      Carpe Diem
+    </footer>
+  </blockquote>,
+  <hr />,
+  <ol>
+    <li>
+      Reprehenderit fugiat proident eiusmod proident.
+    </li>
+    <li>
+      Velit enim duis fugiat excepteur.
+    </li>
+    <li>
+      Qui incididunt nostrud ipsum in officia cillum esse officia incididunt id consequat quis.
+    </li>
+    <li>
+      Fugiat quis qui sit velit sit tempor.
+    </li>
+    <li>
+      Tempor sit aute eiusmod reprehenderit irure ea laborum.
+    </li>
+    <li>
+      Sit do do cillum sit quis. Culpa adipisicing sunt nostrud ad labore enim.
+    </li>
+  </ol>,
+  <figure>
+    <iframe
+      className="embed-block-service-youtube"
+      data-src="https://www.youtube.com/watch?v=yDiD8F9ItX0"
+      frameBorder="0"
+      height="320"
+      src="https://www.youtube.com/embed/yDiD8F9ItX0"
+      width="580"
+    />
+    
+  </figure>,
+  <table>
+    <caption>
+      The stock on our store.
+    </caption>
+    <thead>
+      <tr>
+        <th>
+          Name
+        </th>
+        <th>
+          Qtd
+        </th>
+        <th>
+          Price
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th>
+          Kine
+        </th>
+        <td>
+          1 pcs
+        </td>
+        <td>
+          100$
+        </td>
+      </tr>
+      <tr>
+        <th>
+          Pigs
+        </th>
+        <td>
+          3 pcs
+        </td>
+        <td>
+          200$
+        </td>
+      </tr>
+      <tr>
+        <th>
+          Chickens
+        </th>
+        <td>
+          12 pcs
+        </td>
+        <td>
+          150$
+        </td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th>
+          Total
+        </th>
+        <th>
+          16 pcs
+        </th>
+        <th>
+          $450
+        </th>
+      </tr>
+    </tfoot>
+  </table>,
+]
+`;
+
+exports[`<Block /> when receives an EditorJS 2.21 blocks data renders all known block tags 1`] = `
 Array [
   <p>
     Mollit deserunt culpa fugiat ea do laboris minim ex do. Elit cillum qui aute sint irure aliqua excepteur minim. Eiusmod velit cupidatat ea culpa magna magna id consectetur enim irure ex excepteur tempor quis. Veniam incididunt ullamco adipisicing dolor ex proident ex amet dolor. Nisi in adipisicing non quis id Lorem consectetur.
diff --git a/src/index.test.tsx b/src/index.test.tsx
index 029affd..7d8d38b 100644
--- a/src/index.test.tsx
+++ b/src/index.test.tsx
@@ -3,7 +3,7 @@ import { create } from 'react-test-renderer';
 import Blocks, { ConfigProp, DataProp, RenderersProp, RenderFn } from '.';
 
 describe('<Block />', () => {
-  describe('when receives an EditorJS blocks data', () => {
+  describe('when receives an EditorJS 2.19 blocks data', () => {
     const data: DataProp = {
       time: 1610632160642,
       blocks: [
@@ -119,6 +119,134 @@ describe('<Block />', () => {
     });
   });
 
+  describe('when receives an EditorJS 2.21 blocks data', () => {
+    const data: DataProp = {
+      time: 1610632160642,
+      blocks: [
+        {
+          id: 'IT0_8EfkWJ',
+          type: 'paragraph',
+          data: {
+            text: 'Mollit deserunt culpa fugiat ea do laboris minim ex do. Elit cillum qui aute sint irure aliqua excepteur minim. Eiusmod velit cupidatat ea culpa magna magna id consectetur enim irure ex excepteur tempor quis. Veniam incididunt ullamco adipisicing dolor ex proident ex amet dolor. Nisi in adipisicing non quis id Lorem consectetur.',
+          },
+        },
+        {
+          id: 'uFx9tcT6q7',
+          type: 'paragraph',
+          data: {
+            text: 'Nulla pariatur proident cillum consequat cupidatat ex reprehenderit nisi quis mollit laboris dolore ex. Laborum sint duis elit proident. Aliquip id mollit commodo excepteur.',
+          },
+        },
+        {
+          id: 'syMVjPY5jD',
+          type: 'header',
+          data: {
+            text: 'Quis consectetur nostrud eu officia aute laborum labore nulla?',
+            level: 3,
+          },
+        },
+        {
+          id: 'Xg-XG8USBG',
+          type: 'paragraph',
+          data: {
+            text: 'Non pariatur deserunt elit proident. Reprehenderit cupidatat velit veniam ut pariatur minim culpa in ex commodo do sint magna cillum. Eiusmod enim officia et ipsum exercitation veniam veniam ad minim ad minim. Eiusmod dolore dolor minim magna velit officia ut est occaecat magna in.',
+          },
+        },
+        {
+          id: 'SUT6iK8yjz',
+          type: 'header',
+          data: {
+            text: 'Do laboris magna quis nisi consequat!',
+            level: 4,
+          },
+        },
+        {
+          id: 'N32lcCYsaX',
+          type: 'paragraph',
+          data: {
+            text: 'Sunt elit labore consequat proident ullamco minim cupidatat. Exercitation reprehenderit ut ad irure eiusmod proident. Culpa culpa nulla eiusmod reprehenderit est officia Lorem id. Aliqua non commodo sint sunt ex nulla. Nulla esse irure eiusmod dolor nisi aliqua do cillum dolor amet officia. Veniam aliqua aliquip eu voluptate commodo sint ut. Sit nostrud Lorem aliquip ex culpa irure nulla deserunt consequat nulla ea velit in.',
+          },
+        },
+        {
+          id: 'VHVMTtqZUR',
+          type: 'image',
+          data: {
+            file: {
+              id: 1382,
+              url: 'https://cdn.directions.pt/uploads/2020/08/681-2000x1300-2.jpg',
+              size: 257878,
+              extension: 'image/jpeg',
+            },
+            caption: 'Deep in the universe',
+            withBorder: false,
+            stretched: false,
+            withBackground: true,
+          },
+        },
+        {
+          id: '_eyxYQhtQl',
+          type: 'quote',
+          data: {
+            text: 'Esse ea consectetur est fugiat ut dolor pariatur ex voluptate ad Lorem Lorem sit sunt. Eiusmod voluptate ullamco laborum minim elit. Cillum ullamco fugiat tempor dolore enim. Excepteur exercitation amet aliqua proident labore qui sint do dolore sint nulla aute.',
+            caption: 'Carpe Diem',
+            alignment: 'center',
+          },
+        },
+        {
+          id: 'RHt0_4RnwX',
+          type: 'delimiter',
+          data: {},
+        },
+        {
+          id: 'oY9PKxf-R6',
+          type: 'list',
+          data: {
+            style: 'ordered',
+            items: [
+              'Reprehenderit fugiat proident eiusmod proident.',
+              'Velit enim duis fugiat excepteur.',
+              'Qui incididunt nostrud ipsum in officia cillum esse officia incididunt id consequat quis.',
+              'Fugiat quis qui sit velit sit tempor.',
+              'Tempor sit aute eiusmod reprehenderit irure ea laborum.',
+              'Sit do do cillum sit quis. Culpa adipisicing sunt nostrud ad labore enim.',
+            ],
+          },
+        },
+        {
+          id: 'bRWmjgU9gf',
+          type: 'embed',
+          data: {
+            service: 'youtube',
+            source: 'https://www.youtube.com/watch?v=yDiD8F9ItX0',
+            embed: 'https://www.youtube.com/embed/yDiD8F9ItX0',
+            width: 580,
+            height: 320,
+            caption: '',
+          },
+        },
+        {
+          id: 'XDxWYO53JC',
+          type: 'table',
+          data: {
+            header: ['Name', 'Qtd', 'Price'],
+            content: [
+              ['Kine', '1 pcs', '100$'],
+              ['Pigs', '3 pcs', '200$'],
+              ['Chickens', '12 pcs', '150$'],
+            ],
+            footer: ['Total', '16 pcs', '$450'],
+            caption: 'The stock on our store.',
+          },
+        },
+      ],
+      version: '2.21.0',
+    };
+
+    it('renders all known block tags', () => {
+      expect(create(<Blocks data={data} />).toJSON()).toMatchSnapshot();
+    });
+  });
+
   describe('when receives a Config object with className', () => {
     const data: DataProp = {
       time: 1610632160642,
diff --git a/src/index.tsx b/src/index.tsx
index f17723f..0db8bfd 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -29,6 +29,7 @@ export type RenderFnWithoutData<K = Record<string, any> | undefined> = (
 export type RenderersProp = Record<string, RenderFn<any>>;
 
 export interface Block {
+  id?: string;
   type: string;
   data: Record<string, any>;
 }
@@ -65,13 +66,15 @@ const Blocks = ({
     ...renderers,
   };
 
+  const hasBlockId = data.version.includes('2.21');
+
   return (
     <>
       {data.blocks.map((block, i) => {
         if (block.type.toString() in availableRenderers) {
           // @ts-ignore Todo: find a fix
           const Tag = availableRenderers[block.type];
-          return <Tag key={i} data={block.data} {...config[block.type]} />;
+          return <Tag key={hasBlockId && block.id ? block.id : i} data={block.data} {...config[block.type]} />;
         }
       })}
     </>