Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
it('should render an embedded entry inline override', () => {
const overrides = {
[INLINES.EMBEDDED_ENTRY]: { page: Override }
};
const actual = RichTextService.entryNodeToJsx(embeddedEntryInline, {
...options,
overrides
});
expect(actual).toMatchSnapshot();
});
return marked(content, { renderer: markedRenderer });
}
}
templatesEngine.registerHelper("markdown", markdownHelper);
//////////////////////////////////////////////////////////////////////////////
const documentToHtmlStringOptions = {
renderNode: {
[BLOCKS.EMBEDDED_ASSET]: node => assetHelper(node.data.target),
[INLINES.ASSET_HYPERLINK]: node => (
`<a href="${assetSrcHelper(node.data.target)}">` +
`${documentToHtmlString(node, documentToHtmlStringOptions)}` +
`</a>`
),
[BLOCKS.EMBEDDED_ENTRY]: node => moduleHelper(node.data.target),
[INLINES.EMBEDDED_ENTRY]: node => moduleHelper(node.data.target),
[INLINES.ENTRY_HYPERLINK]: () => ""
}
};
function richTextHelper(document) {
if (!document.nodeType || document.nodeType !== "document") {
throw new Error("Invalid template: helper \"richText\" was passed" +
" an invalid rich text document.");
}
return documentToHtmlString(document, documentToHtmlStringOptions);
}
templatesEngine.registerHelper("richText", richTextHelper);
//////////////////////////////////////////////////////////////////////////////
templatesEngine.registerHelper("json", function(data) {
return JSON.stringify(data, null, " ");
});
value: '',
},
],
},
{
nodeType: BLOCKS.PARAGRAPH,
data: {},
content: [
{
nodeType: 'text',
data: {},
marks: [],
value: 'This book by author ',
},
{
nodeType: INLINES.EMBEDDED_ENTRY,
data: {
target: {
sys: {
id: 'author',
type: 'Link',
linkType: 'Entry',
},
},
},
content: [
{
nodeType: 'text',
data: {},
marks: [],
value: '',
},
[INLINES.EMBEDDED_ENTRY]: node => defaultInline(INLINES.EMBEDDED_ENTRY, node as Inline),
[INLINES.HYPERLINK]: (node, children) => <a href="{node.data.uri}">{children}</a>,
[BLOCKS.PARAGRAPH]: (node, next) => `<p>${next(node.content)}</p>`,
[BLOCKS.HEADING_1]: (node, next) => `<h1>${next(node.content)}</h1>`,
[BLOCKS.HEADING_2]: (node, next) => `<h2>${next(node.content)}</h2>`,
[BLOCKS.HEADING_3]: (node, next) => `<h3>${next(node.content)}</h3>`,
[BLOCKS.HEADING_4]: (node, next) => `<h4>${next(node.content)}</h4>`,
[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 {
[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
};
function isEntryNode(node) {
return entryMap[node.nodeType];
}
function isAssetNode(node) {
return assetMap[node.nodeType];
}
export default function richTextToJsx(richText, options = {}) {
import React, { Component } from 'react'
import RichTextToReact from 'rich-text-to-react'
import SampleData from './data'
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 () {