Skip to content

Commit

Permalink
feat(html+react): render Table header as <th> (#269)
Browse files Browse the repository at this point in the history
  • Loading branch information
@z0al
z0al committed Sep 16, 2021
1 parent d40174e commit 0f82905
Show file tree
Hide file tree
Showing 9 changed files with 278 additions and 31 deletions.
1 change: 1 addition & 0 deletions packages/rich-text-html-renderer/src/__test__/documents/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ export { default as olDoc } from './ol';
export { default as ulDoc } from './ul';
export { default as quoteDoc } from './quote';
export { default as tableDoc } from './table';
export { default as tableWithHeaderDoc } from './table-header';
98 changes: 98 additions & 0 deletions packages/rich-text-html-renderer/src/__test__/documents/table-header.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import { Document, BLOCKS } from '@contentful/rich-text-types';

export default {
nodeType: BLOCKS.DOCUMENT,
data: {},
content: [
{
nodeType: BLOCKS.TABLE,
data: {},
content: [
{
nodeType: BLOCKS.TABLE_ROW,
data: {},
content: [
{
nodeType: BLOCKS.TABLE_HEADER_CELL,
data: {},
content: [
{
nodeType: BLOCKS.PARAGRAPH,
data: {},
content: [
{
nodeType: 'text',
data: {},
marks: [],
value: 'A 1',
},
],
},
],
},
{
nodeType: BLOCKS.TABLE_HEADER_CELL,
data: {},
content: [
{
nodeType: BLOCKS.PARAGRAPH,
data: {},
content: [
{
nodeType: 'text',
data: {},
marks: [],
value: 'B 1',
},
],
},
],
},
],
},
{
nodeType: BLOCKS.TABLE_ROW,
data: {},
content: [
{
nodeType: BLOCKS.TABLE_CELL,
data: {},
content: [
{
nodeType: BLOCKS.PARAGRAPH,
data: {},
content: [
{
nodeType: 'text',
data: {},
marks: [],
value: 'A 2',
},
],
},
],
},
{
nodeType: BLOCKS.TABLE_CELL,
data: {},
content: [
{
nodeType: BLOCKS.PARAGRAPH,
data: {},
content: [
{
nodeType: 'text',
data: {},
marks: [],
value: 'B 2',
},
],
},
],
},
],
},
],
},
],
} as Document;
15 changes: 13 additions & 2 deletions packages/rich-text-html-renderer/src/__test__/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
tableDoc,
quoteDoc,
ulDoc,
tableWithHeaderDoc,
} from './documents';
import inlineEntity from './documents/inline-entity';

Expand Down Expand Up @@ -205,14 +206,24 @@ describe('documentToHtmlString', () => {
it('renders tables', () => {
const document: Document = tableDoc;
const expected =
'<table><tbody>' +
'<table>' +
'<tr><td><p>A 1</p></td><td><p>B 1</p></td></tr>' +
'<tr><td><p>A 2</p></td><td><p>B 2</p></td></tr>' +
'</tbody></table>';
'</table>';

expect(documentToHtmlString(document)).toEqual(expected);
});

it('renders tables with header', () => {
const expected =
'<table>' +
'<tr><th><p>A 1</p></th><th><p>B 1</p></th></tr>' +
'<tr><td><p>A 2</p></td><td><p>B 2</p></td></tr>' +
'</table>';

expect(documentToHtmlString(tableWithHeaderDoc)).toEqual(expected);
});

it('does not crash with inline elements (e.g. hyperlink)', () => {
const document: Document = hyperlinkDoc;

Expand Down
7 changes: 5 additions & 2 deletions packages/rich-text-html-renderer/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@ const defaultNodeRenderers: RenderNode = {
[BLOCKS.LIST_ITEM]: (node, next) => `<li>${next(node.content)}</li>`,
[BLOCKS.QUOTE]: (node, next) => `<blockquote>${next(node.content)}</blockquote>`,
[BLOCKS.HR]: () => '<hr/>',
[BLOCKS.TABLE]: (node, next) => `<table><tbody>${next(node.content)}</tbody></table>`,
[BLOCKS.TABLE]: (node, next) => `<table>${next(node.content)}</table>`,
[BLOCKS.TABLE_ROW]: (node, next) => `<tr>${next(node.content)}</tr>`,
[BLOCKS.TABLE_HEADER_CELL]: (node, next) => `<th>${next(node.content)}</th>`,
[BLOCKS.TABLE_CELL]: (node, next) => `<td>${next(node.content)}</td>`,
[INLINES.ASSET_HYPERLINK]: node => defaultInline(INLINES.ASSET_HYPERLINK, node as Inline),
[INLINES.ENTRY_HYPERLINK]: node => defaultInline(INLINES.ENTRY_HYPERLINK, node as Inline),
Expand Down Expand Up @@ -102,7 +103,9 @@ export function documentToHtmlString(
}

function nodeListToHtmlString(nodes: CommonNode[], { renderNode, renderMark }: Options): string {
return nodes.map<string>(node => nodeToHtmlString(node, { renderNode, renderMark })).join('');
return nodes
.map<string>(node => nodeToHtmlString(node, { renderNode, renderMark }))
.join('');
}

function nodeToHtmlString(node: CommonNode, { renderNode, renderMark }: Options): string {
Expand Down
81 changes: 55 additions & 26 deletions packages/rich-text-react-renderer/src/__test__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,32 +226,61 @@ Array [
exports[`documentToReactComponents renders tables 1`] = `
Array [
<table>
<tbody>
<tr>
<td>
<p>
A 1
</p>
</td>
<td>
<p>
B 1
</p>
</td>
</tr>
<tr>
<td>
<p>
A 2
</p>
</td>
<td>
<p>
B 2
</p>
</td>
</tr>
</tbody>
<tr>
<td>
<p>
A 1
</p>
</td>
<td>
<p>
B 1
</p>
</td>
</tr>
<tr>
<td>
<p>
A 2
</p>
</td>
<td>
<p>
B 2
</p>
</td>
</tr>
</table>,
]
`;

exports[`documentToReactComponents renders tables with header 1`] = `
Array [
<table>
<tr>
<th>
<p>
A 1
</p>
</th>
<th>
<p>
B 1
</p>
</th>
</tr>
<tr>
<td>
<p>
A 2
</p>
</td>
<td>
<p>
B 2
</p>
</td>
</tr>
</table>,
]
`;
Expand Down
1 change: 1 addition & 0 deletions packages/rich-text-react-renderer/src/__test__/documents/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,4 @@ export { default as olDoc } from './ol';
export { default as ulDoc } from './ul';
export { default as quoteDoc } from './quote';
export { default as tableDoc } from './table';
export { default as tableWithHeaderDoc } from './table-header';
98 changes: 98 additions & 0 deletions packages/rich-text-react-renderer/src/__test__/documents/table-header.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import { Document, BLOCKS } from '@contentful/rich-text-types';

export default {
nodeType: BLOCKS.DOCUMENT,
data: {},
content: [
{
nodeType: BLOCKS.TABLE,
data: {},
content: [
{
nodeType: BLOCKS.TABLE_ROW,
data: {},
content: [
{
nodeType: BLOCKS.TABLE_HEADER_CELL,
data: {},
content: [
{
nodeType: BLOCKS.PARAGRAPH,
data: {},
content: [
{
nodeType: 'text',
data: {},
marks: [],
value: 'A 1',
},
],
},
],
},
{
nodeType: BLOCKS.TABLE_HEADER_CELL,
data: {},
content: [
{
nodeType: BLOCKS.PARAGRAPH,
data: {},
content: [
{
nodeType: 'text',
data: {},
marks: [],
value: 'B 1',
},
],
},
],
},
],
},
{
nodeType: BLOCKS.TABLE_ROW,
data: {},
content: [
{
nodeType: BLOCKS.TABLE_CELL,
data: {},
content: [
{
nodeType: BLOCKS.PARAGRAPH,
data: {},
content: [
{
nodeType: 'text',
data: {},
marks: [],
value: 'A 2',
},
],
},
],
},
{
nodeType: BLOCKS.TABLE_CELL,
data: {},
content: [
{
nodeType: BLOCKS.PARAGRAPH,
data: {},
content: [
{
nodeType: 'text',
data: {},
marks: [],
value: 'B 2',
},
],
},
],
},
],
},
],
},
],
} as Document;
5 changes: 5 additions & 0 deletions packages/rich-text-react-renderer/src/__test__/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
quoteDoc,
ulDoc,
tableDoc,
tableWithHeaderDoc,
} from './documents';
import DocumentWrapper from './components/Document';
import Paragraph from './components/Paragraph';
Expand Down Expand Up @@ -165,6 +166,10 @@ describe('documentToReactComponents', () => {
expect(documentToReactComponents(document)).toMatchSnapshot();
});

it('renders tables with header', () => {
expect(documentToReactComponents(tableWithHeaderDoc)).toMatchSnapshot();
});

it('does not crash with inline elements (e.g. hyperlink)', () => {
const document: Document = hyperlinkDoc;

Expand Down
3 changes: 2 additions & 1 deletion packages/rich-text-react-renderer/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ const defaultNodeRenderers: RenderNode = {
[BLOCKS.LIST_ITEM]: (node, children) => <li>{children}</li>,
[BLOCKS.QUOTE]: (node, children) => <blockquote>{children}</blockquote>,
[BLOCKS.HR]: () => <hr />,
[BLOCKS.TABLE]: (node, children) => <table><tbody>{children}</tbody></table>,
[BLOCKS.TABLE]: (node, children) => <table>{children}</table>,
[BLOCKS.TABLE_ROW]: (node, children) => <tr>{children}</tr>,
[BLOCKS.TABLE_HEADER_CELL]: (node, children) => <th>{children}</th>,
[BLOCKS.TABLE_CELL]: (node, children) => <td>{children}</td>,
[INLINES.ASSET_HYPERLINK]: node => defaultInline(INLINES.ASSET_HYPERLINK, node as Inline),
[INLINES.ENTRY_HYPERLINK]: node => defaultInline(INLINES.ENTRY_HYPERLINK, node as Inline),
Expand Down

0 comments on commit 0f82905

Please sign in to comment.