Neatly Positioned Magazines

    @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

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    16

    Version

    6.0.0

    License

    MIT

    Unpacked Size

    68.5 kB

    Total Files

    49

    Last publish

    Collaborators

    • max.cheremisin
    • sofia_margariti
    • dineshswamy_paranthaman
    • dmytro.filippov
    • arjun-londhey
    • eric-miller2129
    • liamstokingercontentful
    • aodhagan-cf
    • vikaskumr
    • dennise917
    • alicankargin
    • cf-aleks
    • jeffm_cf
    • bvkr
    • ebctfl
    • sjouli
    • mayakarabula
    • cf-engit
    • harshil1712
    • paradoja
    • mattvanvoorst-contentful
    • bruce.felt
    • holgerstorm
    • grassator
    • cf-remylenoir
    • mayagillilan
    • ahsen
    • mar.contentful
    • rowadz_contentful
    • edblankenship
    • 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
    • felixboenke
    • farruco.sanjurjo
    • ronaldronson
    • silhoue
    • phbschmidt
    • timbeyer
    • kathrinholzmann
    • inbal.gordon
    • poberherr
    • mikita.savanovich
    • laurenceb
    • stupchiy
    • elblivion
    • fabianheymann
    • it-internal
    • sbezludny
    • medturki
    • danwe
    • marina-cf
    • dlitvakb
    • yann-cf
    • makinwa37
    • diacono
    • whydah-gally
    • tauraz
    • cakejelly
    • martin3walker
    • argvk_cf
    • yiotis
    • leonardofreitass
    • hwartig
    • davidfateh
    • dvasylenko
    • ruderngespra
    • janikomu
    • mshaaban0
    • kdamball
    • burakukula
    • gregferg
    • marcolink
    • gosiaszporer
    • miretxu
    • z0al
    • mspagnolo
    • thomas.spiesser
    • kbarnett
    • jwhiles
    • anho
    • didi96
    • fs
    • cgrabo
    • dana_grn
    • andipaetzold-cf
    • eva.martinez
    • lucabianconi
    • denkristoffer
    • luizfonseca
    • juliabiro
    • vinz93
    • jbourne
    • 0mathcrap
    • damienxy
    • roryscarson
    • m99coder-cf
    • loweisz
    • thomas.contentful
    • marceltoben
    • anwar.ahmad
    • massao
    • bohdan.hutsol
    • contentful-ecosystem
    • vida.momenzadeh
    • yuri.mazursky
    • rebecca.koenig
    • annmary