rich-text-solid-renderer

Solid-js renderer for contentful rich text.

Installation

Using npm:

``sh
npm install rich-text-solid-renderer
`

Using yarn:

`sh
yarn add rich-text-solid-renderer
`

Usage

`typescript
import {ParentComponent} from 'solid-js';
import SolidRichText from '@joeldsouzax/rich-text-solid-renderer';

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

const Parent: ParentComponent = (props) => {
return
}; // ->

Hello world!


`

`typescript
import {ParentComponent} from 'solid-js';
import SolidRichText from '@joeldsouzax/rich-text-solid-renderer';

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


const Parent: ParentComponent = (props) => {
return
};
// ->

Hello world!


`

You can also pass custom renderers for both marks and nodes as an optional parameter like so:

`javascript
import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import {ParentComponent} from 'solid-js';
import SolidRichText, { NodeRendererProps } from '@joeldsouzax/rich-text-solid-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 = (props) =>

{props.children}

;

const Text = (props) =>

{props.children}

;

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

const Parent: ParentComponent = (props) => {
return
};
// ->

Hello

world?

`

Last, but not least, you can pass a custom rendering component for an embedded entry:

`typescript
import { BLOCKS } from '@contentful/rich-text-types';
import SolidRichText from '@joeldsouzax/rich-text-solid-renderer';

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

const CustomComponent = (props) => (


);

const options = {
renderNode: {
[BLOCKS.EMBEDDED_ENTRY]: (props) => {
return
}
}
};

const Parent: ParentComponent = (props) => {
return
};
// ->

[title]

[description]

`

The renderNode keys should be one of the following BLOCKS and INLINES properties as defined in @contentful/rich-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
- EMBEDDED_ENTRY
- EMBEDDED_ASSET

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

- BOLD
- ITALIC
- UNDERLINE
- CODE

The renderText callback is a function that has a single string argument and returns a React node. Each text node is evaluated individually by this callback. A possible use case for this is to replace instances of \n produced by Shift + Enter with
React elements. This could be accomplished in the following way:

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