### Install with npm

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-html-renderer/README.md

Install the package using npm.

```sh
npm install @contentful/rich-text-html-renderer
```

--------------------------------

### Install with yarn

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-html-renderer/README.md

Install the package using yarn.

```sh
yarn add @contentful/rich-text-html-renderer
```

--------------------------------

### Install contentful-slatejs-adapter with npm

Source: https://github.com/contentful/rich-text/blob/master/packages/contentful-slatejs-adapter/README.md

Use this command to install the adapter using npm.

```sh
npm install @contentful/contentful-slatejs-adapter
```

--------------------------------

### Install contentful-slatejs-adapter with yarn

Source: https://github.com/contentful/rich-text/blob/master/packages/contentful-slatejs-adapter/README.md

Use this command to install the adapter using yarn.

```sh
yarn add @contentful/contentful-slatejs-adapter
```

--------------------------------

### Install rich-text-from-markdown with yarn

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-from-markdown/README.md

Install the library using yarn. An alternative package manager for Node.js.

```sh
yarn add @contentful/rich-text-from-markdown
```

--------------------------------

### Install rich-text-from-markdown with npm

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-from-markdown/README.md

Install the library using npm. This is the standard package manager for Node.js.

```sh
npm install @contentful/rich-text-from-markdown
```

--------------------------------

### Install rich-text-react-renderer with npm

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-react-renderer/README.md

Use npm to install the package. This is the standard package manager for Node.js.

```sh
npm install @contentful/rich-text-react-renderer
```

--------------------------------

### Install rich-text-links with yarn

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-links/README.md

Install the package using yarn. An alternative package manager for Node.js projects.

```sh
yarn add @contentful/rich-text-links
```

--------------------------------

### Install rich-text-links with npm

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-links/README.md

Install the package using npm. This is the standard way to add dependencies to your Node.js project.

```sh
npm install @contentful/rich-text-links
```

--------------------------------

### Install rich-text-plain-text-renderer with npm

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-plain-text-renderer/README.md

Install the package using npm. This is the standard way to add Node.js dependencies to your project.

```sh
npm install @contentful/rich-text-plain-text-renderer
```

--------------------------------

### Install rich-text-plain-text-renderer with yarn

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-plain-text-renderer/README.md

Install the package using yarn. This is an alternative package manager for Node.js projects.

```sh
yarn add @contentful/rich-text-plain-text-renderer
```

--------------------------------

### Install rich-text-react-renderer with yarn

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-react-renderer/README.md

Use yarn to install the package. Yarn is an alternative package manager for Node.js.

```sh
yarn add @contentful/rich-text-react-renderer
```

--------------------------------

### Contentful Rich Text Document Structure Example

Source: https://github.com/contentful/rich-text/blob/master/packages/contentful-slatejs-adapter/README.md

This JSON represents a typical Contentful rich text document structure, including different block types and text marks like bold, italic, and underlined.

```json
{
  "category": "document",
  "content": [
    {
      "category": "block",
      "type": "header-one",
      "content": [
        {
          "category": "text",
          "type": "text",
          "value": "This is a headline!",
          "marks": [
            {
              "object": "mark",
              "type": "bold",
              "data": {}
            }
          ]
        }
      ]
    },
    {
      "category": "block",
      "type": "paragraph",
      "content": [
        {
          "category": "text",
          "type": "text",
          "value": "",
          "marks": [
            {
              "object": "mark",
              "type": "bold",
              "data": {}
            }
          ]
        }
      ]
    },
    {
      "category": "block",
      "type": "paragraph",
      "content": [
        {
          "category": "text",
          "type": "text",
          "value": "and this is a bold text",
          "marks": [
            {
              "object": "mark",
              "type": "bold",
              "data": {}
            }
          ]
        },
        {
          "category": "text",
          "type": "text",
          "value": " but now i am not bold anymore. ",
          "marks": []
        },
        {
          "category": "text",
          "type": "text",
          "value": "However, ",
          "marks": [
            {
              "object": "mark",
              "type": "italic",
              "data": {}
            }
          ]
        },
        {
          "category": "text",
          "type": "text",
          "value": " i am now ",
          "marks": []
        },
        {
          "category": "text",
          "type": "text",
          "value": "underlined with shit. ",
          "marks": [
            {
              "object": "mark",
              "type": "underlined",
              "data": {}
            }
          ]
        }
      ]
    }
  ]
}
```

--------------------------------

### Basic Rendering

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-html-renderer/README.md

Render a simple rich text document to an HTML string.

```javascript
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello world!',
          marks: [],
        },
      ],
    },
  ],
};

documentToHtmlString(document); // -> <p>Hello world!</p>
```

--------------------------------

### Custom Renderer with Key Prop

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-react-renderer/README.md

Demonstrates how to add a `key` prop to custom renderers, using the embedded entry's target ID. Appending a non-numeric character prevents clashes with default renderers.

```javascript
const options = {
  renderMark: {
    [MARKS.BOLD]: (text) => {
      return <b key={`${text}-key`}>{text}</b>;
    },
  },
};
```

--------------------------------

### Custom Node and Mark Rendering

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-html-renderer/README.md

Use custom renderers for specific nodes and marks.

```javascript
import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      data:{},
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
          data: {}
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }]
          data: {}
        },
      ],
    },
  ]
};

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

--------------------------------

### Render basic Contentful rich text document

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-react-renderer/README.md

Renders a simple rich text document with a single paragraph and text. Ensure the document structure matches Contentful's rich text format.

```javascript
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      data: {},
      content: [
        {
          nodeType: 'text',
          value: 'Hello world!',
          marks: [],
          data: {},
        },
      ],
    },
  ],
};

documentToReactComponents(document); // -> <p>Hello world!</p>
```

--------------------------------

### Handle Unsupported Markdown Nodes

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-from-markdown/README.md

Convert markdown to Rich Text, providing a callback function to handle unsupported nodes like images. The callback defines the Rich Text representation for these nodes.

```js
const { richTextFromMarkdown } = require('@contentful/rich-text-from-markdown');

// define your own type for unsupported nodes like asset
const document = await richTextFromMarkdown(
  "![image]('https://example.com/image.jpg')",
  (node) => ({
    nodeType: 'embedded-[entry|asset]-[block|inline]',
    content: [],
    data: {
      target: {
        sys: {
          type: 'Link',
          linkType: 'Entry|Asset',
          id: '.........',
        },
      },
    },
  }),
);
```

--------------------------------

### Rendering with Marks

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-html-renderer/README.md

Render rich text with bold and italic marks.

```javascript
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
        },
      ],
    },
  ],
};

documentToHtmlString(document); // -> <p><b>Hello</b><u> world!</u></p>
```

--------------------------------

### Basic Markdown to Rich Text Conversion

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-from-markdown/README.md

Convert a simple markdown string to a Contentful Rich Text document. Requires the `richTextFromMarkdown` function.

```js
const { richTextFromMarkdown } = require('@contentful/rich-text-from-markdown');

const document = await richTextFromMarkdown('# Hello World');
```

--------------------------------

### Render Contentful rich text with custom options

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-react-renderer/README.md

Customizes the rendering of marks, nodes, and text by providing custom render functions. This allows for advanced styling and behavior.

```javascript
import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
        },
      ],
    },
  ],
};

const Bold = ({ children }) => <p className="bold">{children}</p>;

const Text = ({ children }) => <p className="align-center">{children}</p>;

const options = {
  renderMark: {
    [MARKS.BOLD]: (text) => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
  },
  renderText: (text) => text.replace('!', '?'),
};

documentToReactComponents(document, options);
// -> <p class="align-center"><p class="bold">Hello</p><u> world?</u></p>
```

--------------------------------

### Custom Embedded Entry Rendering

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-html-renderer/README.md

Provide a custom rendering component for embedded entries.

```javascript
import { BLOCKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      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>
```

--------------------------------

### Preserving Whitespace in Rich Text

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-react-renderer/README.md

Shows how to use the `preserveWhitespace` option to maintain multiple spaces and line breaks in rich text content by replacing spaces with `&nbsp;` and line breaks with `<br />`.

```javascript
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello     world!',
          marks: [],
        },
      ],
    },
  ],
};

const options = {
  preserveWhitespace: true,
};

documentToReactComponents(document, options);
// -> <p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world!</p>
```

--------------------------------

### Render Contentful rich text with marks

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-react-renderer/README.md

Renders rich text content with applied marks like bold and italic. The renderer automatically applies default HTML tags for these marks.

```javascript
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
        },
      ],
    },
  ],
};

documentToReactComponents(document);
// -> <p><b>Hello</b><u> world!</u></p>
```

--------------------------------

### Render embedded entry with custom component

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-react-renderer/README.md

Renders an embedded entry using a custom React component. This is useful for displaying complex data structures within the rich text.

```javascript
import { BLOCKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'embedded-entry-block',
      data: {
        target: (...)Link<'Entry'>(...);
      },
    },
  ]
};

const CustomComponent = ({ title, description }) => (
  <div>
    <h2>{title}</h2>
    <p>{description}</p>
  </div>
);

const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => {
      const { title, description } = node.data.target.fields;
      return <CustomComponent title={title} description={description} />
    }
  }
};

documentToReactComponents(document, options);
// -> <div><h2>[title]</h2><p>[description]</p></div>
```

--------------------------------

### Handle newlines with custom text renderer

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-react-renderer/README.md

Replaces newline characters ('\n') with React `<br/>` elements for proper display of line breaks. This is useful for text entered with Shift+Enter.

```javascript
const options = {
  renderText: (text) => {
    return text.split('\n').reduce((children, textSegment, index) => {
      return [...children, index > 0 && <br key={index} />, textSegment];
    }, []);
  },
};
```

--------------------------------

### Preserving Whitespace

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-html-renderer/README.md

Use the preserveWhitespace flag to maintain original spacing and line breaks.

```javascript
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello     world!',
          marks: [],
        },
      ],
    },
  ],
};

const options = {
  preserveWhitespace: true,
};

documentToHtmlString(document, options);
// -> <p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world!</p>
```

--------------------------------

### Render Rich Text document to plain text

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-plain-text-renderer/README.md

Use the documentToPlainTextString function to convert a Rich Text JSON document into a plain text string. The function processes the document structure and text content, including basic formatting like bold and italic.

```javascript
import { documentToPlainTextString } from '@contentful/rich-text-plain-text-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      data: {},
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
          data: {},
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
          data: {},
        },
      ],
    },
  ],
};

documentToPlainTextString(document); // -> Hello world!
```

--------------------------------

### Extract Entity Links from Rich Text Document

Source: https://github.com/contentful/rich-text/blob/master/packages/rich-text-links/README.md

Use the `getRichTextEntityLinks` function to extract all embedded entry and asset links from a Contentful rich text document. The function returns an object categorized by link type.

```javascript
import { getRichTextEntityLinks } from '@contentful/rich-text-links';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      data: {},
      content: [
        {
          nodeType: 'embedded-entry-block',
          data: {
            target: {
              sys: {
                linkType: 'Entry',
                type: 'Link',
                id: 'yXmVKmaDBm8tRfQMwA0e',
              },
            },
          },
          content: [],
        },
        {
          nodeType: 'embedded-asset-block',
          data: {
            target: {
              sys: {
                linkType: 'Asset',
                type: 'Link',
                id: 'jNhaW0aSc6Hu74SHVMtq',
              },
            },
          },
          content: [],
        },
      ],
    },
  ],
};

getRichTextEntityLinks(document);
/**
 * ->
 * {
 *   Entry: [
 *     { linkType: 'Entry', type: 'Link', id: 'yXmVKmaDBm8tRfQMwA0e' }
 *   ],
 *   Asset: [
 *     { linkType: 'Asset', type: 'Link', id: 'jNhaW0aSc6Hu74SHVMtq' }
 *   ]
 * }
 */
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.