Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
marks: [],
value: '',
nodeType: 'text',
data: {},
},
],
nodeType: inlineType,
},
{
marks: [],
value: '',
nodeType: 'text',
data: {},
},
],
nodeType: BLOCKS.PARAGRAPH,
},
],
data: {},
nodeType: BLOCKS.DOCUMENT,
} as Document;
}
it('should return an HTML tag if no override matches', () => {
const type = BLOCKS.PARAGRAPH;
const overrides = { foo: { component: Override } };
const actual = RichTextService.getElement(type, overrides);
expect(actual).toBe('p');
});
it('should return an override by the node type', () => {
const type = BLOCKS.PARAGRAPH;
const overrides = { [BLOCKS.PARAGRAPH]: 'foo' };
const actual = RichTextService.getOverride(type, overrides);
expect(actual).toBe('foo');
});
});
import { Document, BLOCKS, INLINES } from '@contentful/rich-text-types';
import richTextLinks from '../../src/index';
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',
import markdown from 'remark-parse';
import {
Document,
Node,
Block,
BLOCKS,
TopLevelBlock,
INLINES,
Hyperlink,
Text,
Inline,
} from '@contentful/rich-text-types';
import { MarkdownNode, MarkdownLinkNode, MarkdownTree } from './types';
const markdownNodeTypes = new Map([
['paragraph', BLOCKS.PARAGRAPH],
['heading', 'heading'],
['text', 'text'],
['emphasis', 'text'],
['strong', 'text'],
['delete', 'text'],
['inlineCode', 'text'],
['link', INLINES.HYPERLINK],
['thematicBreak', BLOCKS.HR],
['blockquote', BLOCKS.QUOTE],
['list', 'list'],
['listItem', BLOCKS.LIST_ITEM],
]);
const nodeTypeFor = (node: MarkdownNode) => {
const nodeType = markdownNodeTypes.get(node.type);
};
const assetElementMap = {
image: Image,
video: Video,
audio: Audio
};
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
import React, { ReactNode } from 'react';
import { Block, BLOCKS, Document, Inline, INLINES, MARKS, Text } from '@contentful/rich-text-types';
import { nodeToReactComponent } from './util/nodeListToReactComponents';
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>,
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 = {
data: {},
content: [paragraph],
nodeType: BLOCKS.QUOTE
};
export const listItem = {
data: {},
content: [paragraph],
nodeType: BLOCKS.LIST_ITEM
};
export const unorderedList = {
data: {},
margin: '0px 5px',
padding: '0 .25rem 0 .75rem',
border: '1px solid #d3dce0',
fontFamily: 'monospace'
}}>inline: {type} , sys.id: {node.data.target.sys.id}
}
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.LIST_ITEM]: (node, key, next) => <li>{next(node.content, key, next)}</li>,
[BLOCKS.QUOTE]: (node, key, next) => <blockquote>{next(node.content, key, next)}</blockquote>,
[BLOCKS.HR]: (node, key) => <hr>,
[INLINES.ASSET_HYPERLINK]: (node, key) => defaultInline(INLINES.ASSET_HYPERLINK, node, key),
[INLINES.ENTRY_HYPERLINK]: (node, key) => defaultInline(INLINES.ENTRY_HYPERLINK, node, key),
[INLINES.EMBEDDED_ENTRY]: (node, key) => defaultInline(INLINES.EMBEDDED_ENTRY, node, key),
[INLINES.HYPERLINK]: (node, key, next) => {
import escape from 'escape-html';
import {
Document,
Mark,
Text,
BLOCKS,
MARKS,
INLINES,
Block,
Inline,
helpers,
} from '@contentful/rich-text-types';
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>`,