![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
@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 13 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
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.