Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const tagMap = {
[BLOCKS.HEADING_1]: 'h1',
[BLOCKS.HEADING_2]: 'h2',
[BLOCKS.HEADING_3]: 'h3',
[BLOCKS.HEADING_4]: 'h4',
[BLOCKS.HEADING_5]: 'h5',
[BLOCKS.HEADING_6]: 'h6',
[BLOCKS.PARAGRAPH]: 'p',
[BLOCKS.UL_LIST]: 'ul',
[BLOCKS.OL_LIST]: 'ol',
[BLOCKS.LIST_ITEM]: 'li',
[BLOCKS.QUOTE]: 'blockquote',
[BLOCKS.HR]: 'hr',
[INLINES.HYPERLINK]: 'a',
[MARKS.BOLD]: 'strong',
[MARKS.ITALIC]: 'em',
[MARKS.UNDERLINE]: 'u',
[MARKS.CODE]: 'code'
};
const entryMap = {
[BLOCKS.EMBEDDED_ENTRY]: true,
[INLINES.ENTRY_HYPERLINK]: true,
[INLINES.EMBEDDED_ENTRY]: true
};
const assetMap = {
[BLOCKS.EMBEDDED_ASSET]: true,
[INLINES.ASSET_HYPERLINK]: true
};
[BLOCKS.HEADING_5]: (node, next) => `<h5>${next(node.content)}</h5>`,
[BLOCKS.HEADING_6]: (node, next) => `<h6>${next(node.content)}</h6>`,
[BLOCKS.EMBEDDED_ENTRY]: (node, next) => `<div>${next(node.content)}</div>`,
[BLOCKS.UL_LIST]: (node, next) => `<ul>${next(node.content)}</ul>`,
[BLOCKS.OL_LIST]: (node, next) => `<ol>${next(node.content)}</ol>`,
[BLOCKS.LIST_ITEM]: (node, next) => `<li>${next(node.content)}</li>`,
[BLOCKS.QUOTE]: (node, next) => `<blockquote>${next(node.content)}</blockquote>`,
[BLOCKS.HR]: () => '<hr>',
[INLINES.ASSET_HYPERLINK]: node => defaultInline(INLINES.ASSET_HYPERLINK, node as Inline),
[INLINES.ENTRY_HYPERLINK]: node => defaultInline(INLINES.ENTRY_HYPERLINK, node as Inline),
[INLINES.EMBEDDED_ENTRY]: node => defaultInline(INLINES.EMBEDDED_ENTRY, node as Inline),
[INLINES.HYPERLINK]: (node, next) => `<a href="${node.data.uri}">${next(node.content)}</a>`,
};
const defaultMarkRenderers: RenderMark = {
[MARKS.BOLD]: text => `<b>${text}</b>`,
[MARKS.ITALIC]: text => `<i>${text}</i>`,
[MARKS.UNDERLINE]: text => `<u>${text}</u>`,
[MARKS.CODE]: text => `<code>${text}</code>`,
};
const defaultInline = (type: string, node: Inline) =>
`<span>type: ${type} id: ${node.data.target.sys.id}</span>`;
export type CommonNode = Text | Block | Inline;
export interface Next {
(nodes: CommonNode[]): string;
}
export interface NodeRenderer {
(node: Block | Inline, next: Next): string;
MARKS,
INLINES,
helpers
} from '@contentful/rich-text-types'
const defaultInline = (type, node, key) => {
return <span style="{{">inline: {type} , sys.id: {node.data.target.sys.id}</span>
}
const defaultMarkRenderers = {
[MARKS.BOLD]: (text, key) => <strong>{text}</strong>,
[MARKS.ITALIC]: (text, key) => <em>{text}</em>,
[MARKS.UNDERLINE]: (text, key) => <u>{text}</u>,
[MARKS.CODE]: (text, key) => <code>{text}</code>
}
const defaultNodeRenderers = {
[BLOCKS.PARAGRAPH]: (node, key, next) => <p>{next(node.content, key, next)}</p>,
[BLOCKS.HEADING_1]: (node, key, next) => <h1>{next(node.content, key, next)}</h1>,
[BLOCKS.HEADING_2]: (node, key, next) => <h2>{next(node.content, key, next)}</h2>,
[BLOCKS.HEADING_3]: (node, key, next) => <h3>{next(node.content, key, next)}</h3>,
[BLOCKS.HEADING_4]: (node, key, next) => <h4>{next(node.content, key, next)}</h4>,
[BLOCKS.HEADING_5]: (node, key, next) => <h5>{next(node.content, key, next)}</h5>,
[BLOCKS.HEADING_6]: (node, key, next) => <h6>{next(node.content, key, next)}</h6>,
[BLOCKS.EMBEDDED_ENTRY]: (node, key, next) => <div>{next(node.content, key, next)}</div>,
[BLOCKS.UL_LIST]: (node, key, next) => <ul>{next(node.content, key, next)}</ul>,
[BLOCKS.OL_LIST]: (node, key, next) => <ol>{next(node.content, key, next)}</ol>,
[BLOCKS.HEADING_5]: (node, children) => <h5>{children}</h5>,
[BLOCKS.HEADING_6]: (node, children) => <h6>{children}</h6>,
[BLOCKS.EMBEDDED_ENTRY]: (node, children) => <div>{children}</div>,
[BLOCKS.UL_LIST]: (node, children) => <ul>{children}</ul>,
[BLOCKS.OL_LIST]: (node, children) => <ol>{children}</ol>,
[BLOCKS.LIST_ITEM]: (node, children) => <li>{children}</li>,
[BLOCKS.QUOTE]: (node, children) => <blockquote>{children}</blockquote>,
[BLOCKS.HR]: () => <hr>,
[INLINES.ASSET_HYPERLINK]: node => defaultInline(INLINES.ASSET_HYPERLINK, node as Inline),
[INLINES.ENTRY_HYPERLINK]: node => defaultInline(INLINES.ENTRY_HYPERLINK, node as Inline),
[INLINES.EMBEDDED_ENTRY]: node => defaultInline(INLINES.EMBEDDED_ENTRY, node as Inline),
[INLINES.HYPERLINK]: (node, children) => <a href="{node.data.uri}">{children}</a>,
};
const defaultMarkRenderers: RenderMark = {
[MARKS.BOLD]: text => <b>{text}</b>,
[MARKS.ITALIC]: text => <i>{text}</i>,
[MARKS.UNDERLINE]: text => <u>{text}</u>,
[MARKS.CODE]: text => <code>{text}</code>,
};
function defaultInline(type: string, node: Inline): ReactNode {
return (
<span>
type: {node.nodeType} id: {node.data.target.sys.id}
</span>
);
}
export type CommonNode = Text | Block | Inline;
export interface NodeRenderer {
],
nodeType: BLOCKS.HEADING_3
};
export const text = {
data: {},
marks: [],
value: 'This is normal text.',
nodeType: 'text'
};
export const bold = {
data: {},
marks: [
{
type: MARKS.BOLD
}
],
value: 'This is bold text.',
nodeType: 'text'
};
export const italic = {
data: {},
marks: [
{
type: MARKS.ITALIC
}
],
value: 'This is italic text.',
nodeType: 'text'
};
import { INLINES, BLOCKS, MARKS } from '@contentful/rich-text-types';
import InlineEmbedHandler from './InlineEmbedHandler'
const options = {
renderNode: {
[INLINES.EMBEDDED_ENTRY]: (node, key) => (
),
[BLOCKS.PARAGRAPH]: (node, key, next) => (
<p style="{{">
{next(node.content, key, next)}
</p>
)
},
renderMark: {
[MARKS.BOLD]: (text, key) => <strong style="{{">{text}!</strong>
}
}
export default class App extends Component {
render () {
return (
<div style="{{">
</div>
)
}
}
content: [
{
data: {},
marks: [],
value: 'This is a hyperlink.',
nodeType: 'text'
}
],
nodeType: INLINES.HYPERLINK
};
export const boldAndItalic = {
data: {},
marks: [
{
type: MARKS.BOLD
},
{
type: MARKS.ITALIC
}
],
value: 'This is bold and italic text.',
nodeType: 'text'
};
export const paragraph = {
data: {},
content: [text, bold, italic, underline, hyperlink],
nodeType: BLOCKS.PARAGRAPH
};
export const blockquote = {