How to use the @contentful/rich-text-types.BLOCKS.PARAGRAPH function in @contentful/rich-text-types

To help you get started, we’ve selected a few @contentful/rich-text-types examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github contentful / rich-text / packages / rich-text-html-renderer / src / __test__ / documents / inline-entity.ts View on Github external
marks: [],
                value: '',
                nodeType: 'text',
                data: {},
              },
            ],
            nodeType: inlineType,
          },
          {
            marks: [],
            value: '',
            nodeType: 'text',
            data: {},
          },
        ],
        nodeType: BLOCKS.PARAGRAPH,
      },
    ],
    data: {},
    nodeType: BLOCKS.DOCUMENT,
  } as Document;
}
github connor-baer / rich-text-to-jsx / src / rich-text-to-jsx.spec.js View on Github external
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');
    });
github connor-baer / rich-text-to-jsx / src / rich-text-to-jsx.spec.js View on Github external
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');
    });
  });
github contentful / rich-text / packages / rich-text-links / bin / benchmark / get-rich-text-entity-links.ts View on Github external
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',
github contentful / rich-text / packages / rich-text-from-markdown / src / index.ts View on Github external
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);
github connor-baer / rich-text-to-jsx / src / rich-text-to-jsx.js View on Github external
};

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
github contentful / rich-text / packages / rich-text-react-renderer / src / index.tsx View on Github external
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) =&gt; <p>{children}</p>,
  [BLOCKS.HEADING_1]: (node, children) =&gt; <h1>{children}</h1>,
  [BLOCKS.HEADING_2]: (node, children) =&gt; <h2>{children}</h2>,
  [BLOCKS.HEADING_3]: (node, children) =&gt; <h3>{children}</h3>,
  [BLOCKS.HEADING_4]: (node, children) =&gt; <h4>{children}</h4>,
  [BLOCKS.HEADING_5]: (node, children) =&gt; <h5>{children}</h5>,
  [BLOCKS.HEADING_6]: (node, children) =&gt; <h6>{children}</h6>,
  [BLOCKS.EMBEDDED_ENTRY]: (node, children) =&gt; <div>{children}</div>,
  [BLOCKS.UL_LIST]: (node, children) =&gt; <ul>{children}</ul>,
  [BLOCKS.OL_LIST]: (node, children) =&gt; <ol>{children}</ol>,
  [BLOCKS.LIST_ITEM]: (node, children) =&gt; <li>{children}</li>,
  [BLOCKS.QUOTE]: (node, children) =&gt; <blockquote>{children}</blockquote>,
  [BLOCKS.HR]: () =&gt; <hr>,
  [INLINES.ASSET_HYPERLINK]: node =&gt; defaultInline(INLINES.ASSET_HYPERLINK, node as Inline),
  [INLINES.ENTRY_HYPERLINK]: node =&gt; defaultInline(INLINES.ENTRY_HYPERLINK, node as Inline),
  [INLINES.EMBEDDED_ENTRY]: node =&gt; defaultInline(INLINES.EMBEDDED_ENTRY, node as Inline),
  [INLINES.HYPERLINK]: (node, children) =&gt; <a href="{node.data.uri}">{children}</a>,
github connor-baer / rich-text-to-jsx / src / __fixtures__ / index.js View on Github external
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: {},
github storybynumbers / rich-text-to-react / src / index.js View on Github external
margin: '0px 5px',
    padding: '0 .25rem 0 .75rem',
    border: '1px solid #d3dce0',
    fontFamily: 'monospace'
  }}&gt;inline: {type} , sys.id: {node.data.target.sys.id}
}

const defaultMarkRenderers = {
  [MARKS.BOLD]: (text, key) =&gt; <strong>{text}</strong>,
  [MARKS.ITALIC]: (text, key) =&gt; <em>{text}</em>,
  [MARKS.UNDERLINE]: (text, key) =&gt; <u>{text}</u>,
  [MARKS.CODE]: (text, key) =&gt; <code>{text}</code>
}

const defaultNodeRenderers = {
  [BLOCKS.PARAGRAPH]: (node, key, next) =&gt; <p>{next(node.content, key, next)}</p>,
  [BLOCKS.HEADING_1]: (node, key, next) =&gt; <h1>{next(node.content, key, next)}</h1>,
  [BLOCKS.HEADING_2]: (node, key, next) =&gt; <h2>{next(node.content, key, next)}</h2>,
  [BLOCKS.HEADING_3]: (node, key, next) =&gt; <h3>{next(node.content, key, next)}</h3>,
  [BLOCKS.HEADING_4]: (node, key, next) =&gt; <h4>{next(node.content, key, next)}</h4>,
  [BLOCKS.HEADING_5]: (node, key, next) =&gt; <h5>{next(node.content, key, next)}</h5>,
  [BLOCKS.HEADING_6]: (node, key, next) =&gt; <h6>{next(node.content, key, next)}</h6>,
  [BLOCKS.EMBEDDED_ENTRY]: (node, key, next) =&gt; <div>{next(node.content, key, next)}</div>,
  [BLOCKS.UL_LIST]: (node, key, next) =&gt; <ul>{next(node.content, key, next)}</ul>,
  [BLOCKS.OL_LIST]: (node, key, next) =&gt; <ol>{next(node.content, key, next)}</ol>,
  [BLOCKS.LIST_ITEM]: (node, key, next) =&gt; <li>{next(node.content, key, next)}</li>,
  [BLOCKS.QUOTE]: (node, key, next) =&gt; <blockquote>{next(node.content, key, next)}</blockquote>,
  [BLOCKS.HR]: (node, key) =&gt; <hr>,
  [INLINES.ASSET_HYPERLINK]: (node, key) =&gt; defaultInline(INLINES.ASSET_HYPERLINK, node, key),
  [INLINES.ENTRY_HYPERLINK]: (node, key) =&gt; defaultInline(INLINES.ENTRY_HYPERLINK, node, key),
  [INLINES.EMBEDDED_ENTRY]: (node, key) =&gt; defaultInline(INLINES.EMBEDDED_ENTRY, node, key),
  [INLINES.HYPERLINK]: (node, key, next) =&gt; {
github contentful / rich-text / packages / rich-text-html-renderer / src / index.ts View on Github external
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) =&gt; `<p>${next(node.content)}</p>`,
  [BLOCKS.HEADING_1]: (node, next) =&gt; `<h1>${next(node.content)}</h1>`,
  [BLOCKS.HEADING_2]: (node, next) =&gt; `<h2>${next(node.content)}</h2>`,
  [BLOCKS.HEADING_3]: (node, next) =&gt; `<h3>${next(node.content)}</h3>`,
  [BLOCKS.HEADING_4]: (node, next) =&gt; `<h4>${next(node.content)}</h4>`,
  [BLOCKS.HEADING_5]: (node, next) =&gt; `<h5>${next(node.content)}</h5>`,
  [BLOCKS.HEADING_6]: (node, next) =&gt; `<h6>${next(node.content)}</h6>`,
  [BLOCKS.EMBEDDED_ENTRY]: (node, next) =&gt; `<div>${next(node.content)}</div>`,
  [BLOCKS.UL_LIST]: (node, next) =&gt; `<ul>${next(node.content)}</ul>`,
  [BLOCKS.OL_LIST]: (node, next) =&gt; `<ol>${next(node.content)}</ol>`,
  [BLOCKS.LIST_ITEM]: (node, next) =&gt; `<li>${next(node.content)}</li>`,
  [BLOCKS.QUOTE]: (node, next) =&gt; `<blockquote>${next(node.content)}</blockquote>`,
  [BLOCKS.HR]: () =&gt; '<hr>',
  [INLINES.ASSET_HYPERLINK]: node =&gt; defaultInline(INLINES.ASSET_HYPERLINK, node as Inline),
  [INLINES.ENTRY_HYPERLINK]: node =&gt; defaultInline(INLINES.ENTRY_HYPERLINK, node as Inline),
  [INLINES.EMBEDDED_ENTRY]: node =&gt; defaultInline(INLINES.EMBEDDED_ENTRY, node as Inline),
  [INLINES.HYPERLINK]: (node, next) =&gt; `<a href="${node.data.uri}">${next(node.content)}</a>`,