structured-text-html-serializer
HTML serializer for the Structured Text document.
Installation
Using npm:
npm install @contentful/structured-text-html-serializer
Using yarn:
yarn add @contentful/structured-text-html-serializer
Usage
import { documentToHtmlString } from '@contentful/structured-text-html-serializer';
const document = {
nodeType: 'document',
nodeClass: 'document',
content: [
{
nodeClass: 'block',
nodeType: 'paragraph',
content: [
{
nodeClass: 'text',
nodeType: 'text',
value: 'Hello world!',
marks: [],
},
],
},
]
};
documentToHtmlString(document);
import { documentToHtmlString } from '@contentful/structured-text-html-serializer';
const document = {
nodeType: 'document',
nodeClass: 'document',
content: [
{
nodeClass: 'block',
nodeType: 'paragraph',
content: [
{
nodeClass: 'text',
nodeType: 'text',
value: 'Hello',
marks: [{ nodeType: 'bold' }]
},
{
nodeClass: 'text',
nodeType: 'text',
value: ' world!',
marks: [{ nodeType: 'italic' }]
},
],
},
]
};
documentToHtmlString(document);
You can also pass custom renderers for both marks and nodes as an optional parameter like so:
import { BLOCKS.PARAGRAPH, MARKS.BOLD } from '@contentful/structured-text-types';
import { documentToHtmlString } from '@contentful/structured-text-html-serializer';
const document = {
nodeType: 'document',
nodeClass: 'document',
content: [
{
nodeClass: 'block',
nodeType: 'paragraph',
content: [
{
nodeClass: 'text',
nodeType: 'text',
value: 'Hello',
marks: [{ nodeType: 'bold' }]
},
{
nodeClass: 'text',
nodeType: 'text',
value: ' world!',
marks: [{ nodeType: 'italic' }]
},
],
},
]
};
const options = {
renderMark: {
[MARKS.BOLD]: text => `<custom-bold>${text}<custom-bold>`
},
renderNode: {
[BLOCKS.PARAGRAPH]: (node, next) => `<custom-paragraph>${next(node.content)}</custom-paragraph>`
}
}
documentToHtmlString(document, options);
Last, but not least, you can pass a custom rendering component for an embedded entry:
import { BLOCKS.EMBEDDED_ENTRY } from '@contentful/structured-text-types';
import { documentToHtmlString } from '@contentful/structured-text-html-serializer';
const document = {
nodeType: 'document',
nodeClass: 'document',
content: [
{
nodeClass: 'block',
nodeType: 'embedded-entry-block',
data: {
target: (...)Link<'Entry'>(...);
},
},
]
};
const options = {
renderNode: {
[BLOCKS.EMBEDDED_ENTRY]: (node) => `<custom-component>${customComponentRenderer(node)}</custom-component>`
}
}
documentToHtmlString(document, options);
The renderNode
keys should be one of the following BLOCKS
and INLINES
properties as defined in @contentful/structured-text-types
:
BLOCKS
DOCUMENT
PARAGRAPH
HEADING_1
HEADING_2
HEADING_3
HEADING_4
HEADING_5
HEADING_6
UL_LIST
OL_LIST
LIST_ITEM
QUOTE
HR
EMBDEDDED_ENTRY
INLINES
EMBEDDED_ENTRY
(this is different from the BLOCKS.EMBEDDED_ENTRY
)HYPERLINK
ENTRY_HYPERLINK
ASSET_HYPERLINK
The renderMark
keys should be one of the following MARKS
properties as defined in @contentful/structured-text-types
: