Skip to content

Commit f347239

Browse files
lightningspiritlightningspirit
authored
Merge pull request #20 from moveyourdigital/editor-js-2.20
Added support for EditorJS 2.20
2 parents b8d7e47 + 15323e4 commit f347239

File tree

3 files changed

+276
-3
lines changed

3 files changed

+276
-3
lines changed

‎src/__snapshots__/index.test.tsx.snap

+143-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,149 @@ Array [
5454
]
5555
`;
5656

57-
exports[`<Block /> when receives an EditorJS blocks data renders all known block tags 1`] = `
57+
exports[`<Block /> when receives an EditorJS 2.19 blocks data renders all known block tags 1`] = `
58+
Array [
59+
<p>
60+
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.
61+
</p>,
62+
<p>
63+
Nulla pariatur proident cillum consequat cupidatat ex reprehenderit nisi quis mollit laboris dolore ex. Laborum sint duis elit proident. Aliquip id mollit commodo excepteur.
64+
</p>,
65+
<h3>
66+
Quis consectetur nostrud eu officia aute laborum labore nulla?
67+
</h3>,
68+
<p>
69+
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.
70+
</p>,
71+
<h4>
72+
Do laboris magna quis nisi consequat!
73+
</h4>,
74+
<p>
75+
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.
76+
</p>,
77+
<figure
78+
className="image-block--with-background"
79+
>
80+
<img
81+
alt="Deep in the universe"
82+
src="https://cdn.directions.pt/uploads/2020/08/681-2000x1300-2.jpg"
83+
/>
84+
<figcaption>
85+
Deep in the universe
86+
</figcaption>
87+
</figure>,
88+
<blockquote
89+
className="text-align-center"
90+
>
91+
<p>
92+
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.
93+
</p>
94+
<footer>
95+
Carpe Diem
96+
</footer>
97+
</blockquote>,
98+
<hr />,
99+
<ol>
100+
<li>
101+
Reprehenderit fugiat proident eiusmod proident.
102+
</li>
103+
<li>
104+
Velit enim duis fugiat excepteur.
105+
</li>
106+
<li>
107+
Qui incididunt nostrud ipsum in officia cillum esse officia incididunt id consequat quis.
108+
</li>
109+
<li>
110+
Fugiat quis qui sit velit sit tempor.
111+
</li>
112+
<li>
113+
Tempor sit aute eiusmod reprehenderit irure ea laborum.
114+
</li>
115+
<li>
116+
Sit do do cillum sit quis. Culpa adipisicing sunt nostrud ad labore enim.
117+
</li>
118+
</ol>,
119+
<figure>
120+
<iframe
121+
className="embed-block-service-youtube"
122+
data-src="https://www.youtube.com/watch?v=yDiD8F9ItX0"
123+
frameBorder="0"
124+
height="320"
125+
src="https://www.youtube.com/embed/yDiD8F9ItX0"
126+
width="580"
127+
/>
128+
129+
</figure>,
130+
<table>
131+
<caption>
132+
The stock on our store.
133+
</caption>
134+
<thead>
135+
<tr>
136+
<th>
137+
Name
138+
</th>
139+
<th>
140+
Qtd
141+
</th>
142+
<th>
143+
Price
144+
</th>
145+
</tr>
146+
</thead>
147+
<tbody>
148+
<tr>
149+
<th>
150+
Kine
151+
</th>
152+
<td>
153+
1 pcs
154+
</td>
155+
<td>
156+
100$
157+
</td>
158+
</tr>
159+
<tr>
160+
<th>
161+
Pigs
162+
</th>
163+
<td>
164+
3 pcs
165+
</td>
166+
<td>
167+
200$
168+
</td>
169+
</tr>
170+
<tr>
171+
<th>
172+
Chickens
173+
</th>
174+
<td>
175+
12 pcs
176+
</td>
177+
<td>
178+
150$
179+
</td>
180+
</tr>
181+
</tbody>
182+
<tfoot>
183+
<tr>
184+
<th>
185+
Total
186+
</th>
187+
<th>
188+
16 pcs
189+
</th>
190+
<th>
191+
$450
192+
</th>
193+
</tr>
194+
</tfoot>
195+
</table>,
196+
]
197+
`;
198+
199+
exports[`<Block /> when receives an EditorJS 2.21 blocks data renders all known block tags 1`] = `
58200
Array [
59201
<p>
60202
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.

‎src/index.test.tsx

+129-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { create } from 'react-test-renderer';
33
import Blocks, { ConfigProp, DataProp, RenderersProp, RenderFn } from '.';
44

55
describe('<Block />', () => {
6-
describe('when receives an EditorJS blocks data', () => {
6+
describe('when receives an EditorJS 2.19 blocks data', () => {
77
const data: DataProp = {
88
time: 1610632160642,
99
blocks: [
@@ -119,6 +119,134 @@ describe('<Block />', () => {
119119
});
120120
});
121121

122+
describe('when receives an EditorJS 2.21 blocks data', () => {
123+
const data: DataProp = {
124+
time: 1610632160642,
125+
blocks: [
126+
{
127+
id: 'IT0_8EfkWJ',
128+
type: 'paragraph',
129+
data: {
130+
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.',
131+
},
132+
},
133+
{
134+
id: 'uFx9tcT6q7',
135+
type: 'paragraph',
136+
data: {
137+
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.',
138+
},
139+
},
140+
{
141+
id: 'syMVjPY5jD',
142+
type: 'header',
143+
data: {
144+
text: 'Quis consectetur nostrud eu officia aute laborum labore nulla?',
145+
level: 3,
146+
},
147+
},
148+
{
149+
id: 'Xg-XG8USBG',
150+
type: 'paragraph',
151+
data: {
152+
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.',
153+
},
154+
},
155+
{
156+
id: 'SUT6iK8yjz',
157+
type: 'header',
158+
data: {
159+
text: 'Do laboris magna quis nisi consequat!',
160+
level: 4,
161+
},
162+
},
163+
{
164+
id: 'N32lcCYsaX',
165+
type: 'paragraph',
166+
data: {
167+
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.',
168+
},
169+
},
170+
{
171+
id: 'VHVMTtqZUR',
172+
type: 'image',
173+
data: {
174+
file: {
175+
id: 1382,
176+
url: 'https://cdn.directions.pt/uploads/2020/08/681-2000x1300-2.jpg',
177+
size: 257878,
178+
extension: 'image/jpeg',
179+
},
180+
caption: 'Deep in the universe',
181+
withBorder: false,
182+
stretched: false,
183+
withBackground: true,
184+
},
185+
},
186+
{
187+
id: '_eyxYQhtQl',
188+
type: 'quote',
189+
data: {
190+
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.',
191+
caption: 'Carpe Diem',
192+
alignment: 'center',
193+
},
194+
},
195+
{
196+
id: 'RHt0_4RnwX',
197+
type: 'delimiter',
198+
data: {},
199+
},
200+
{
201+
id: 'oY9PKxf-R6',
202+
type: 'list',
203+
data: {
204+
style: 'ordered',
205+
items: [
206+
'Reprehenderit fugiat proident eiusmod proident.',
207+
'Velit enim duis fugiat excepteur.',
208+
'Qui incididunt nostrud ipsum in officia cillum esse officia incididunt id consequat quis.',
209+
'Fugiat quis qui sit velit sit tempor.',
210+
'Tempor sit aute eiusmod reprehenderit irure ea laborum.',
211+
'Sit do do cillum sit quis. Culpa adipisicing sunt nostrud ad labore enim.',
212+
],
213+
},
214+
},
215+
{
216+
id: 'bRWmjgU9gf',
217+
type: 'embed',
218+
data: {
219+
service: 'youtube',
220+
source: 'https://www.youtube.com/watch?v=yDiD8F9ItX0',
221+
embed: 'https://www.youtube.com/embed/yDiD8F9ItX0',
222+
width: 580,
223+
height: 320,
224+
caption: '',
225+
},
226+
},
227+
{
228+
id: 'XDxWYO53JC',
229+
type: 'table',
230+
data: {
231+
header: ['Name', 'Qtd', 'Price'],
232+
content: [
233+
['Kine', '1 pcs', '100$'],
234+
['Pigs', '3 pcs', '200$'],
235+
['Chickens', '12 pcs', '150$'],
236+
],
237+
footer: ['Total', '16 pcs', '$450'],
238+
caption: 'The stock on our store.',
239+
},
240+
},
241+
],
242+
version: '2.21.0',
243+
};
244+
245+
it('renders all known block tags', () => {
246+
expect(create(<Blocks data={data} />).toJSON()).toMatchSnapshot();
247+
});
248+
});
249+
122250
describe('when receives a Config object with className', () => {
123251
const data: DataProp = {
124252
time: 1610632160642,

‎src/index.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export type RenderFnWithoutData<K = Record<string, any> | undefined> = (
2929
export type RenderersProp = Record<string, RenderFn<any>>;
3030

3131
export interface Block {
32+
id?: string;
3233
type: string;
3334
data: Record<string, any>;
3435
}
@@ -65,13 +66,15 @@ const Blocks = ({
6566
...renderers,
6667
};
6768

69+
const hasBlockId = data.version.includes('2.21');
70+
6871
return (
6972
<>
7073
{data.blocks.map((block, i) => {
7174
if (block.type.toString() in availableRenderers) {
7275
// @ts-ignore Todo: find a fix
7376
const Tag = availableRenderers[block.type];
74-
return <Tag key={i} data={block.data} {...config[block.type]} />;
77+
return <Tag key={hasBlockId && block.id ? block.id : i} data={block.data} {...config[block.type]} />;
7578
}
7679
})}
7780
</>

0 commit comments

Comments
 (0)