Skip to content

Commit 8687f77

Browse files
tolgaptolgap
authored
Merge pull request #41 from JayyajGH/jayyaj/add-table-support
Add in support for RTE tables
2 parents 5c5ce51 + 0f25342 commit 8687f77

File tree

5 files changed

+255
-4
lines changed

5 files changed

+255
-4
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,7 @@ The `nodeRenderers` prop should be one of the following `BLOCKS` and `INLINES` p
216216
- `HR`
217217
- `EMBEDDED_ENTRY`
218218
- `EMBEDDED_ASSET`
219+
- `TABLE`
219220

220221
- `INLINES`
221222
- `EMBEDDED_ENTRY` (this is different from the `BLOCKS.EMBEDDED_ENTRY`)

‎package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"vue"
3030
],
3131
"dependencies": {
32-
"@contentful/rich-text-types": "^14.1.2"
32+
"@contentful/rich-text-types": "^15.12.1"
3333
},
3434
"author": "Paramander",
3535
"license": "MIT",

‎src/index.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,18 @@ const defaultNodeRenderers = {
6060
[BLOCKS.QUOTE]: (node, key, h, next) => (
6161
h('blockquote', { key }, next(node.content, key, h, next))
6262
),
63+
[BLOCKS.TABLE]: (node, key, h, next) => (
64+
h('table', { key }, next(node.content, key, h, next))
65+
),
66+
[BLOCKS.TABLE_ROW]: (node, key, h, next) => (
67+
h('tr', { key }, next(node.content, key, h, next))
68+
),
69+
[BLOCKS.TABLE_CELL]: (node, key, h, next) => (
70+
h('td', { key }, next(node.content, key, h, next))
71+
),
72+
[BLOCKS.TABLE_HEADER_CELL]: (node, key, h, next) => (
73+
h('th', { key }, next(node.content, key, h, next))
74+
),
6375
[BLOCKS.HR]: (_node, key, h) => h('hr', { key }, {}),
6476
[INLINES.ASSET_HYPERLINK]: (node, key, h) =>
6577
defaultInline(INLINES.ASSET_HYPERLINK, node, key, h),

‎src/index.test.js

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,244 @@ describe("RichText", () => {
372372
);
373373
});
374374
});
375+
376+
describe("TABLE", () => {
377+
it("renders tables", () => {
378+
const document = withDocument([
379+
{
380+
nodeType: BLOCKS.TABLE,
381+
data: {},
382+
content: [
383+
{
384+
nodeType: BLOCKS.TABLE_ROW,
385+
data: {},
386+
content: [
387+
{
388+
nodeType: BLOCKS.TABLE_CELL,
389+
data: {},
390+
content: [
391+
{
392+
nodeType: BLOCKS.PARAGRAPH,
393+
data: {},
394+
content: [
395+
{
396+
nodeType: 'text',
397+
data: {},
398+
marks: [],
399+
value: 'A 1',
400+
},
401+
],
402+
},
403+
],
404+
},
405+
{
406+
nodeType: BLOCKS.TABLE_CELL,
407+
data: {},
408+
content: [
409+
{
410+
nodeType: BLOCKS.PARAGRAPH,
411+
data: {},
412+
content: [
413+
{
414+
nodeType: 'text',
415+
data: {},
416+
marks: [],
417+
value: 'B 1',
418+
},
419+
],
420+
},
421+
],
422+
},
423+
],
424+
},
425+
{
426+
nodeType: BLOCKS.TABLE_ROW,
427+
data: {},
428+
content: [
429+
{
430+
nodeType: BLOCKS.TABLE_CELL,
431+
data: {},
432+
content: [
433+
{
434+
nodeType: BLOCKS.PARAGRAPH,
435+
data: {},
436+
content: [
437+
{
438+
nodeType: 'text',
439+
data: {},
440+
marks: [],
441+
value: 'A 2',
442+
},
443+
],
444+
},
445+
],
446+
},
447+
{
448+
nodeType: BLOCKS.TABLE_CELL,
449+
data: {},
450+
content: [
451+
{
452+
nodeType: BLOCKS.PARAGRAPH,
453+
data: {},
454+
content: [
455+
{
456+
nodeType: 'text',
457+
data: {},
458+
marks: [],
459+
value: 'B 2',
460+
},
461+
],
462+
},
463+
],
464+
},
465+
],
466+
},
467+
],
468+
}
469+
]);
470+
471+
const rendered = mount(RichText, { propsData: { document } });
472+
473+
expect(rendered.html()).toBe(
474+
`<table>
475+
<tr>
476+
<td>
477+
<p>A 1</p>
478+
</td>
479+
<td>
480+
<p>B 1</p>
481+
</td>
482+
</tr>
483+
<tr>
484+
<td>
485+
<p>A 2</p>
486+
</td>
487+
<td>
488+
<p>B 2</p>
489+
</td>
490+
</tr>
491+
</table>`
492+
);
493+
});
494+
495+
it("renders tables with header", () => {
496+
const document = withDocument([
497+
{
498+
nodeType: BLOCKS.TABLE,
499+
data: {},
500+
content: [
501+
{
502+
nodeType: BLOCKS.TABLE_ROW,
503+
data: {},
504+
content: [
505+
{
506+
nodeType: BLOCKS.TABLE_HEADER_CELL,
507+
data: {},
508+
content: [
509+
{
510+
nodeType: BLOCKS.PARAGRAPH,
511+
data: {},
512+
content: [
513+
{
514+
nodeType: 'text',
515+
data: {},
516+
marks: [],
517+
value: 'A 1',
518+
},
519+
],
520+
},
521+
],
522+
},
523+
{
524+
nodeType: BLOCKS.TABLE_HEADER_CELL,
525+
data: {},
526+
content: [
527+
{
528+
nodeType: BLOCKS.PARAGRAPH,
529+
data: {},
530+
content: [
531+
{
532+
nodeType: 'text',
533+
data: {},
534+
marks: [],
535+
value: 'B 1',
536+
},
537+
],
538+
},
539+
],
540+
},
541+
],
542+
},
543+
{
544+
nodeType: BLOCKS.TABLE_ROW,
545+
data: {},
546+
content: [
547+
{
548+
nodeType: BLOCKS.TABLE_CELL,
549+
data: {},
550+
content: [
551+
{
552+
nodeType: BLOCKS.PARAGRAPH,
553+
data: {},
554+
content: [
555+
{
556+
nodeType: 'text',
557+
data: {},
558+
marks: [],
559+
value: 'A 2',
560+
},
561+
],
562+
},
563+
],
564+
},
565+
{
566+
nodeType: BLOCKS.TABLE_CELL,
567+
data: {},
568+
content: [
569+
{
570+
nodeType: BLOCKS.PARAGRAPH,
571+
data: {},
572+
content: [
573+
{
574+
nodeType: 'text',
575+
data: {},
576+
marks: [],
577+
value: 'B 2',
578+
},
579+
],
580+
},
581+
],
582+
},
583+
],
584+
},
585+
]
586+
}
587+
]);
588+
589+
const rendered = mount(RichText, { propsData: { document } })
590+
591+
expect(rendered.html()).toBe(
592+
`<table>
593+
<tr>
594+
<th>
595+
<p>A 1</p>
596+
</th>
597+
<th>
598+
<p>B 1</p>
599+
</th>
600+
</tr>
601+
<tr>
602+
<td>
603+
<p>A 2</p>
604+
</td>
605+
<td>
606+
<p>B 2</p>
607+
</td>
608+
</tr>
609+
</table>`
610+
);
611+
});
612+
});
375613
});
376614

377615
describe("INLINES", () => {

0 commit comments

Comments
 (0)