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 asset hyperlink override', () => {
const overrides = {
[INLINES.ASSET_HYPERLINK]: { image: Override }
};
const actual = RichTextService.assetNodeToJsx(assetHyperlink, {
...options,
overrides
});
expect(actual).toMatchSnapshot();
});
const fileName = href.substring(href.lastIndexOf("/") + 1);
return `<img alt="${text}" src="/${config.assetsPath}/${fileName}">`;
};
}
function markdownHelper(content) {
if (content) {
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);
}
[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 = {}) {
if (!richText) {
return null;
}
return nodeListToJsx(richText.content, { ...defaultOptions, ...options });
}
const richTextField: Document = {
nodeType: BLOCKS.DOCUMENT,
data: {},
content: [
{
nodeType: BLOCKS.PARAGRAPH,
data: {},
content: [
{
nodeType: 'text',
data: {},
marks: [],
value: '',
},
{
nodeType: INLINES.ASSET_HYPERLINK,
data: {
target: {
sys: {
id: 'cover',
type: 'Link',
linkType: 'Asset',
},
},
},
content: [
{
nodeType: 'text',
data: {},
marks: [],
value: 'Cover',
},
[INLINES.ASSET_HYPERLINK]: (node, key) => defaultInline(INLINES.ASSET_HYPERLINK, node, key),
[INLINES.ENTRY_HYPERLINK]: (node, key) => defaultInline(INLINES.ENTRY_HYPERLINK, node, key),
const defaultNodeRenderers: RenderNode = {
[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;
const defaultNodeRenderers: RenderNode = {
[BLOCKS.DOCUMENT]: (node, children) => children,
[BLOCKS.PARAGRAPH]: (node, children) => <p>{children}</p>,
[BLOCKS.HEADING_1]: (node, children) => <h1>{children}</h1>,
[BLOCKS.HEADING_2]: (node, children) => <h2>{children}</h2>,
[BLOCKS.HEADING_3]: (node, children) => <h3>{children}</h3>,
[BLOCKS.HEADING_4]: (node, children) => <h4>{children}</h4>,
[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>
nodeType: BLOCKS.EMBEDDED_ASSET
};
export const assetHyperlink = {
data: {
target: image
},
content: [
{
data: {},
marks: [],
value: 'ham hock',
nodeType: 'text'
}
],
nodeType: INLINES.ASSET_HYPERLINK
};
export const entryLink = {
sys: {
id: '9mpxT4zsRi6Iwukey8KeM',
link: 'Link',
linkType: 'Entry'
}
};
const entry = {
sys: {
id: '32v7TZ7YQEaugOeew4SymY',
contentType: { sys: { id: 'page' } },
updatedAt: '2019-01-18T14:37:30.221Z'
},