Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@contentful/rich-text-html-renderer--demo
Advanced tools
HTML renderer for the Rich Text document.
HTML renderer for the Rich Text document.
Using npm:
npm install @contentful/rich-text-html-renderer--demo
Using yarn:
yarn add @contentful/rich-text-html-renderer--demo
import { documentToHtmlString } from '@contentful/rich-text-html-renderer--demo';
const document = {
nodeType: 'document',
nodeClass: 'document',
content: [
{
nodeClass: 'block',
nodeType: 'paragraph',
content: [
{
nodeClass: 'text',
nodeType: 'text',
value: 'Hello world!',
marks: [],
},
],
},
]
};
documentToHtmlString(document); // -> <p>Hello world!</p>
import { documentToHtmlString } from '@contentful/rich-text-html-renderer--demo';
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); // -> <p><b>Hello</b><u> world!</u></p>
You can also pass custom renderers for both marks and nodes as an optional parameter like so:
import { BLOCKS.PARAGRAPH, MARKS.BOLD } from '@contentful/rich-text-types--demo';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer--demo';
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);
// -> <custom-paragraph><custom-bold>Hello</custom-bold><u> world!</u></custom-paragraph>
Last, but not least, you can pass a custom rendering component for an embedded entry:
import { BLOCKS.EMBEDDED_ENTRY } from '@contentful/rich-text-types--demo';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer--demo';
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);
// -> <custom-component>(...)Link<'Entry'>(...)</custom-component>
The renderNode
keys should be one of the following BLOCKS
and INLINES
properties as defined in @contentful/rich-text-types--demo
:
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/rich-text-types--demo
:
BOLD
ITALIC
UNDERLINE
CODE
FAQs
HTML renderer for the Rich Text document.
The npm package @contentful/rich-text-html-renderer--demo receives a total of 3 weekly downloads. As such, @contentful/rich-text-html-renderer--demo popularity was classified as not popular.
We found that @contentful/rich-text-html-renderer--demo demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 39 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.