Skip to content

Commit

Permalink
Merge pull request #20 from moveyourdigital/editor-js-2.20
Browse files Browse the repository at this point in the history 
Added support for EditorJS 2.20
  • Loading branch information
@lightningspirit
lightningspirit authored Oct 25, 2021
2 parents b8d7e47 + 15323e4 commit f347239
Show file tree
Hide file tree
Showing 3 changed files with 276 additions and 3 deletions.
144 changes: 143 additions & 1 deletion src/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
130 changes: 129 additions & 1 deletion src/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down Expand Up @@ -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,
Expand Down
5 changes: 4 additions & 1 deletion src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}
Expand Down Expand Up @@ -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]} />;
}
})}
</>
Expand Down

0 comments on commit f347239

Please sign in to comment.