rich-text-plain-text-renderer

Plain text renderer for the Rich Text document.

Installation

Using npm:

npm install rich-text-plain-text-renderer

Using yarn:

yarn add rich-text-plain-text-renderer

Usage

import { render } from 'rich-text-plain-text-renderer';

const richText = {
  value: {
    schema: 'rast',
    document: {
      type: 'root',
      children: [
        {
          type: 'heading',
          level: 1,
          children: [
            {
              type: 'span',
              value: 'This\nis a\ntitle!',
            },
          ],
        },
      ],
    },
  },
};

render(richText); // -> "This is a title!"

You can also pass custom renderers for entryLink, inlineEntry, block as optional parameters like so:

import { render } from 'rich-text-plain-text-renderer';

const graphqlResponse = {
  value: {
    schema: 'rast',
    document: {
      type: 'root',
      children: [
        {
          type: 'paragraph',
          children: [
            {
              type: 'span',
              value: 'A ',
            },
            {
              type: 'entryLink',
              entry: '344312',
              children: [
                {
                  type: 'span',
                  value: 'record hyperlink',
                },
              ],
            },
            {
              type: 'span',
              value: ' and an inline record: ',
            },
            {
              type: 'inlineEntry',
              entry: '344312',
            },
          ],
        },
        {
          type: 'block',
          entry: '812394',
        },
      ],
    },
  },
  blocks: [
    {
      id: '812394',
      image: { url: 'http://www.assets.com/1312/image.png' },
    },
  ],
  links: [{ id: '344312', title: 'Foo', slug: 'foo' }],
};

const options = {
  renderBlock({ record }) {
    return `[Image ${record.image.url}]`;
  },
  renderInlineRecord({ record, adapter: { renderNode } }) {
    return `[Inline ${record.slug}]${children}[/Inline]`;
  },
  renderLinkToRecord({ record, children, adapter: { renderNode } }) {
    return `[Link to ${record.slug}]${children}[/Link]`;
  },
};

render(document, options);
// -> A [Link to foo]record hyperlink[/Link] and an inline record: [Inline foo]Foo[/Inline]
//    [Image http://www.assets.com/1312/image.png]