This package has been deprecated

    Author message:

    Please use https://www.npmjs.com/package/@contentful/rich-text-html-renderer instead

    @contentful/structured-text-html-serializer
    TypeScript icon, indicating that this package has built-in type declarations

    2.6.0 • Public • Published

    structured-text-html-serializer

    HTML serializer for the Structured Text document.

    Installation

    Using npm:

    npm install @contentful/structured-text-html-serializer

    Using yarn:

    yarn add @contentful/structured-text-html-serializer

    Usage

    import { documentToHtmlString } from '@contentful/structured-text-html-serializer';
     
    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/structured-text-html-serializer';
     
    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/structured-text-types';
    import { documentToHtmlString } from '@contentful/structured-text-html-serializer';
     
    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/structured-text-types';
    import { documentToHtmlString } from '@contentful/structured-text-html-serializer';
     
    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/structured-text-types:

    • 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/structured-text-types:

    • BOLD
    • ITALIC
    • UNDERLINE
    • CODE

    Keywords

    none

    Install

    npm i @contentful/structured-text-html-serializer

    DownloadsWeekly Downloads

    31

    Version

    2.6.0

    License

    MIT

    Unpacked Size

    76.1 kB

    Total Files

    53

    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
    • 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