Skip to content

Commit 29460ae

Browse files
connor-baerconnor-baer
authored
Add default elements for table node types (#232)
* Add support for table blocks * Add changeset
1 parent b51e7aa commit 29460ae

File tree

10 files changed

+181
-2
lines changed

10 files changed

+181
-2
lines changed

‎.changeset/seven-plants-appear.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@madebyconnor/rich-text-to-jsx': minor
3+
---
4+
5+
Added default elements for table node types.

‎README.md

-2
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,6 @@ Install `@madebyconnor/rich-text-to-jsx` with your favorite package manager.
4242
```sh
4343
# npm
4444
npm i @madebyconnor/rich-text-to-jsx
45-
# yarn v1
46-
yarn add @madebyconnor/rich-text-to-jsx
4745
```
4846

4947
## Getting started

‎src/__fixtures__/index.js

+91
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,97 @@ export const hr = {
134134
nodeType: BLOCKS.HR,
135135
};
136136

137+
export const table = {
138+
nodeType: BLOCKS.TABLE,
139+
data: {},
140+
content: [
141+
{
142+
nodeType: BLOCKS.TABLE_ROW,
143+
data: {},
144+
content: [
145+
{
146+
nodeType: BLOCKS.TABLE_HEADER_CELL,
147+
data: {},
148+
content: [
149+
{
150+
nodeType: BLOCKS.PARAGRAPH,
151+
data: {},
152+
content: [
153+
{
154+
nodeType: 'text',
155+
data: {},
156+
marks: [],
157+
value: 'A 1',
158+
},
159+
],
160+
},
161+
],
162+
},
163+
{
164+
nodeType: BLOCKS.TABLE_HEADER_CELL,
165+
data: {},
166+
content: [
167+
{
168+
nodeType: BLOCKS.PARAGRAPH,
169+
data: {},
170+
content: [
171+
{
172+
nodeType: 'text',
173+
data: {},
174+
marks: [],
175+
value: 'B 1',
176+
},
177+
],
178+
},
179+
],
180+
},
181+
],
182+
},
183+
{
184+
nodeType: BLOCKS.TABLE_ROW,
185+
data: {},
186+
content: [
187+
{
188+
nodeType: BLOCKS.TABLE_CELL,
189+
data: {},
190+
content: [
191+
{
192+
nodeType: BLOCKS.PARAGRAPH,
193+
data: {},
194+
content: [
195+
{
196+
nodeType: 'text',
197+
data: {},
198+
marks: [],
199+
value: 'A 2',
200+
},
201+
],
202+
},
203+
],
204+
},
205+
{
206+
nodeType: BLOCKS.TABLE_CELL,
207+
data: {},
208+
content: [
209+
{
210+
nodeType: BLOCKS.PARAGRAPH,
211+
data: {},
212+
content: [
213+
{
214+
nodeType: 'text',
215+
data: {},
216+
marks: [],
217+
value: 'B 2',
218+
},
219+
],
220+
},
221+
],
222+
},
223+
],
224+
},
225+
],
226+
};
227+
137228
export const assetLink = {
138229
sys: {
139230
id: '9mpxT4zsRi6Iwukey8KeM',

‎src/__snapshots__/rich-text-to-jsx.spec.js.snap

+26
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,32 @@ exports[`Rich text to JSX richTextToJsx should parse and render rich text into J
379379
}
380380
}
381381
/>,
382+
<Table>
383+
<tr>
384+
<th>
385+
<p>
386+
A 1
387+
</p>
388+
</th>
389+
<th>
390+
<p>
391+
B 1
392+
</p>
393+
</th>
394+
</tr>
395+
<tr>
396+
<td>
397+
<p>
398+
A 2
399+
</p>
400+
</td>
401+
<td>
402+
<p>
403+
B 2
404+
</p>
405+
</td>
406+
</tr>
407+
</Table>,
382408
]
383409
`;
384410

‎src/components/Table/Table.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
3+
/**
4+
* Default element for tables.
5+
*/
6+
function Table({ children }) {
7+
return (
8+
<table>
9+
<tbody>{children}</tbody>
10+
</table>
11+
);
12+
}
13+
14+
if (process.env.NODE_ENV !== 'production') {
15+
// eslint-disable-next-line global-require
16+
const PropTypes = require('prop-types');
17+
18+
Table.propTypes = {
19+
/**
20+
* The table rows and cells
21+
*/
22+
children: PropTypes.node,
23+
};
24+
}
25+
26+
/**
27+
* @component
28+
*/
29+
export default Table;

‎src/components/Table/Table.spec.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import { create } from 'react-test-renderer';
3+
4+
import { table } from '../../__fixtures__';
5+
6+
import Table from './Table';
7+
8+
describe('Table', () => {
9+
it('should render a table', () => {
10+
const actual = create(<Table {...table} />);
11+
expect(actual).toMatchSnapshot();
12+
});
13+
});

‎src/components/Table/__snapshots__/Table.spec.js.snap

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Table should render a table 1`] = `
4+
<table>
5+
<tbody />
6+
</table>
7+
`;

‎src/components/Table/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Table from './Table';
2+
3+
export default Table;

‎src/rich-text-to-jsx.js

+5
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import BlockElement from './components/BlockElement';
1010
import InlineElement from './components/InlineElement';
1111
import AssetLink from './components/AssetLink';
1212
import Image from './components/Image';
13+
import Table from './components/Table';
1314
import Video from './components/Video';
1415
import Audio from './components/Audio';
1516

@@ -37,6 +38,10 @@ const tagMap = {
3738
[BLOCKS.LIST_ITEM]: 'li',
3839
[BLOCKS.QUOTE]: 'blockquote',
3940
[BLOCKS.HR]: 'hr',
41+
[BLOCKS.TABLE]: Table,
42+
[BLOCKS.TABLE_ROW]: 'tr',
43+
[BLOCKS.TABLE_HEADER_CELL]: 'th',
44+
[BLOCKS.TABLE_CELL]: 'td',
4045
[INLINES.HYPERLINK]: 'a',
4146
[MARKS.BOLD]: 'strong',
4247
[MARKS.ITALIC]: 'em',

‎src/rich-text-to-jsx.spec.js

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
boldAndItalic,
1111
unorderedList,
1212
hr,
13+
table,
1314
embeddedImage,
1415
embeddedVideo,
1516
embeddedAudio,
@@ -29,6 +30,7 @@ describe('Rich text to JSX', () => {
2930
paragraph,
3031
embeddedEntryBlock,
3132
embeddedImage,
33+
table,
3234
]);
3335
const actual = richTextToJsx(richText);
3436
expect(actual).toMatchSnapshot();

0 commit comments

Comments
 (0)