Nestable Processes Mutate

npm

Need private packages and team management tools?Check out npm Orgs. »

@contentful/rich-text-html-renderer--demo

6.0.0 • Public • Published

rich-text-html-renderer--demo

HTML renderer for the Rich Text document.

Installation

Using npm:

npm install @contentful/rich-text-html-renderer--demo

Using yarn:

yarn add @contentful/rich-text-html-renderer--demo

Usage

import { documentToHtmlString } from '@contentful/rich-text-html-renderer--demo';
 
const document = {
  nodeType: 'document',
  nodeClass: 'document',
  content: [
    {
      nodeClass: 'block',
      nodeType: 'paragraph',
      content: [
        {
          nodeClass: 'text',
          nodeType: 'text',
          value: 'Hello world!',
          marks: [],
        },
      ],
    },
  ]
};
 
documentToHtmlString(document); // -> <p>Hello world!</p>
import { documentToHtmlString } from '@contentful/rich-text-html-renderer--demo';
 
const document = {
  nodeType: 'document',
  nodeClass: 'document',
  content: [
    {
      nodeClass: 'block',
      nodeType: 'paragraph',
      content: [
        {
          nodeClass: 'text',
          nodeType: 'text',
          value: 'Hello',
          marks: [{ nodeType: 'bold' }]
        },
        {
          nodeClass: 'text',
          nodeType: 'text',
          value: ' world!',
          marks: [{ nodeType: 'italic' }]
        },
      ],
    },
  ]
};
 
documentToHtmlString(document); // -> <p><b>Hello</b><u> world!</u></p>

You can also pass custom renderers for both marks and nodes as an optional parameter like so:

import { BLOCKS.PARAGRAPH, MARKS.BOLD } from '@contentful/rich-text-types--demo';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer--demo';
 
const document = {
  nodeType: 'document',
  nodeClass: 'document',
  content: [
    {
      nodeClass: 'block',
      nodeType: 'paragraph',
      content: [
        {
          nodeClass: 'text',
          nodeType: 'text',
          value: 'Hello',
          marks: [{ nodeType: 'bold' }]
        },
        {
          nodeClass: 'text',
          nodeType: 'text',
          value: ' world!',
          marks: [{ nodeType: 'italic' }]
        },
      ],
    },
  ]
};
 
const options = {
  renderMark: {
    [MARKS.BOLD]: text => `<custom-bold>${text}<custom-bold>`
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, next) => `<custom-paragraph>${next(node.content)}</custom-paragraph>`
  }
}
 
documentToHtmlString(document, options);
// -> <custom-paragraph><custom-bold>Hello</custom-bold><u> world!</u></custom-paragraph>

Last, but not least, you can pass a custom rendering component for an embedded entry:

import { BLOCKS.EMBEDDED_ENTRY } from '@contentful/rich-text-types--demo';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer--demo';
 
const document = {
  nodeType: 'document',
  nodeClass: 'document',
  content: [
    {
      nodeClass: 'block',
      nodeType: 'embedded-entry-block',
      data: {
        target: (...)Link<'Entry'>(...);
      },
    },
  ]
};
 
const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => `<custom-component>${customComponentRenderer(node)}</custom-component>`
  }
}
 
documentToHtmlString(document, options);
// -> <custom-component>(...)Link<'Entry'>(...)</custom-component>

The renderNode keys should be one of the following BLOCKS and INLINES properties as defined in @contentful/rich-text-types--demo:

  • BLOCKS
    • DOCUMENT
    • PARAGRAPH
    • HEADING_1
    • HEADING_2
    • HEADING_3
    • HEADING_4
    • HEADING_5
    • HEADING_6
    • UL_LIST
    • OL_LIST
    • LIST_ITEM
    • QUOTE
    • HR
    • EMBDEDDED_ENTRY
  • INLINES
    • EMBEDDED_ENTRY (this is different from the BLOCKS.EMBEDDED_ENTRY)
    • HYPERLINK
    • ENTRY_HYPERLINK
    • ASSET_HYPERLINK

The renderMark keys should be one of the following MARKS properties as defined in @contentful/rich-text-types--demo:

  • BOLD
  • ITALIC
  • UNDERLINE
  • CODE

Keywords

none

install

npm i @contentful/rich-text-html-renderer--demo

Downloadsweekly downloads

8

version

6.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability