@contentful/rich-text-html-renderer--demo
TypeScript icon, indicating that this package has built-in type declarations

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

Readme

Keywords

none

Package Sidebar

Install

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

Weekly Downloads

0

Version

6.0.0

License

MIT

Unpacked Size

68.5 kB

Total Files

49

Last publish

Collaborators

  • eozelius
  • fisher-contentful
  • jonathanstoye
  • trburgess
  • 2wce
  • tnugmanov-contentful
  • primeinteger
  • david-shibley-contentful
  • jjolton_contentful
  • nealdavies
  • dkim-cf
  • t-col
  • chasepoirier
  • ryunsong-contentful
  • elylucas
  • fidanism
  • jsdalton
  • lewiscowper
  • rafafelix0
  • felixboenke
  • lillianbitner
  • mateojgordo
  • brettjackson
  • brnrossi
  • julija.a
  • doetter
  • jose.medrano
  • jonathan-contentful
  • georgechios.contentful
  • inbal.gordon
  • anwar.ahmad
  • ghepting
  • camposcontentful
  • benjaminrobertlees
  • whitelisab
  • mgoudy_contentful
  • marcopieatcontentful
  • jbcontentful
  • floriank
  • pkeavenycontentful
  • msieroslawska
  • miguelcrespo
  • chrishelgert
  • cdun.ctfl
  • asleepysamurai
  • budimir.budimir.cf
  • seth-carter-contentful
  • bhekanik
  • konstantinminster
  • invalid_json
  • douglasnsovenhi
  • dropecostareis
  • lorenzonibrunno
  • baskiers
  • dancontentful
  • ivo-contentful
  • thy.pham
  • adrian-contentful
  • alvinometric
  • dimitrycf
  • cormac.debarra
  • jites
  • nhanlon-cf
  • cbentham-cf
  • cempesket
  • jfctfl
  • nkoyo.ating
  • evgeniip
  • max.cheremisin
  • sofia_margariti
  • dineshswamy_paranthaman
  • dmytro.filippov
  • arjun-londhey
  • eric-miller2129
  • liamstokingercontentful
  • aodhagan-cf
  • vikaskumr
  • dennise917
  • alicankargin
  • cf-aleks
  • bvkr
  • ebctfl
  • sjouli
  • mayakarabula
  • cf-engit
  • harshil1712
  • paradoja
  • mattvanvoorst-contentful
  • holgerstorm
  • cf-remylenoir
  • mayagillilan
  • ahsen
  • mar.contentful
  • rowadz_contentful
  • kiyutink_contentful
  • roosterhack
  • kurtulus-contentful
  • omasopust-cf
  • cemre.yuksel
  • peacemukke
  • sophiiistika
  • stephanleece
  • dogukano
  • 3b3ziz
  • or_yoffe_contentful
  • hennadii.shymanskyi
  • m.bensalem
  • sxagoraris
  • stathis.xagoraris
  • andreascful
  • richard_moran
  • yvesrijckaert_contentful
  • mehdi_contentful
  • georgpanok
  • riqwan.thahamir
  • piotr.ciazynski
  • farruco.sanjurjo
  • ronaldronson
  • silhoue
  • phbschmidt
  • kathrinholzmann
  • poberherr
  • mikita.savanovich
  • laurenceb
  • elblivion
  • fabianheymann
  • it-internal
  • sbezludny
  • medturki
  • danwe
  • yann-cf
  • makinwa37
  • diacono
  • whydah-gally
  • tauraz
  • cakejelly
  • martin3walker
  • argvk_cf
  • yiotis
  • leonardofreitass
  • hwartig
  • davidfateh
  • dvasylenko
  • ruderngespra
  • mshaaban0
  • kdamball
  • marcolink
  • gosiaszporer
  • z0al
  • mspagnolo
  • thomas.spiesser
  • anho
  • didi96
  • fs
  • cgrabo
  • dana_grn
  • andipaetzold-cf
  • denkristoffer
  • luizfonseca
  • juliabiro
  • vinz93
  • jbourne
  • 0mathcrap
  • damienxy
  • roryscarson
  • m99coder-cf
  • loweisz
  • thomas.contentful
  • marceltoben
  • massao
  • bohdan.hutsol
  • contentful-ecosystem
  • vida.momenzadeh
  • yuri.mazursky
  • rebecca.koenig
  • annmary