slate-serializers
View project on npmView project on GitHub

SlateToReact

The <SlateToReact> configuration is a flat object: the same keys as slateToHtml (markMap, elementMap, formatting options, and so on) plus elementTransforms for React output (each function returns a React node, for example JSX or React.createElement).

Default

By default, SlateToReact incorporates transformation rules based on the example in Deserializing | Serializing | Slate.


import { SlateToReact } from '@slate-serializers/react'

const slate = [
  {
    "children": [
      {
        "text": "Heading 1"
      }
    ],
    "type": "h1"
  },
  {
    "children": [
      {
        "text": "Paragraph 1"
      }
    ],
    "type": "p"
  }
]

export default function Page() {
  return <SlateToReact node={slate} />
}

output.html (equivalent)
<h1>Heading 1</h1><p>Paragraph 1</p>

Output

Heading 1

Paragraph 1

Configuration

Slate JS has a schema-less core. It makes few assumptions about the schema of the data you will be transforming. See Principles | Introduction | Slate

As a result, it is likely that you will need to create your own configuration file that implements your schema.

Starting point

Payload CMS

If you are using Slate Rich Text in Payload CMS, a dedicated configuration file is available. See <SlateToReact>: Payload CMS configuration.

Options

markMap

Map Slate JSON properties to HTML formatting element tags.


import { SlateToReact, slateToReactConfig } from '@slate-serializers/react'

const slate = [
  {
    "type": "p",
    "children": [
      {
        "text": "Subscript and bold text",
        "bold": true,
        "subScript": true
      }
    ]
  }
]

const config = {
  ...slateToReactConfig,
  markMap: {
    // bold already in default configuration
    ...slateToReactConfig.markMap,
    subScript: ['sub'],
  },
}

export default function Page() {
  return <SlateToReact node={slate} config={config} />
}

output.html
<p><strong><sub>Subscript and bold text</sub></strong></p>

Output

Subscript and bold text

elementMap

Map Slate JSON type values to HTML element tags.


import { SlateToReact, slateToReactConfig } from '@slate-serializers/react'

const slate = [
  {
    "type": "h1",
    "children": [
      {
        "text": "Heading 1"
      }
    ]
  },
  {
    "type": "heading-one",
    "children": [
      {
        "text": "Heading 1 (identified with our custom type)"
      }
    ]
  }
]

const config = {
  ...slateToReactConfig,
  elementMap: {
    // default configuration includes 'h1'
    ...slateToReactConfig.elementMap,
    ['heading-one']: 'h1',
  },
}

export default function Page() {
  return <SlateToReact node={slate} config={config} />
}

output.html
<h1>Heading 1</h1><h1>Heading 1 (identified with our custom type)</h1>

Output

Heading 1

Heading 1 (identified with our custom type)

markTransforms

Define transform functions for Slate JSON properties.

Custom DOM markTransforms apply to slateToHtml. The <SlateToReact> implementation routes text marks through the DOM pipeline using markMap only; use slateToHtml if you need the full markTransforms behavior shown below.


import { slateToHtml, slateToHtmlConfig } from '@slate-serializers/html'
import { Element } from '@slate-serializers/html'

const slate = [
  {
    "type": "p",
    "children": [
      {
        "bold": true,
        "fontSize": "96px",
        "text": "Paragraph"
      }
    ]
  }
]

const config = {
  ...slateToHtmlConfig,
  markTransforms: {
    ...slateToHtmlConfig.markTransforms,
    fontSize: ({ node }) => {
      return new Element('span', {
        style: `font-size:${node.fontSize};`
      })
    }
  },
}

const serializedToHtml = slateToHtml(slate, config)

output.html
<p><span style="font-size:96px;"><strong>Paragraph</strong></span></p>

elementTransforms

For React, define transforms on config.elementTransforms. Each function returns a React node (for example JSX or React.createElement).


import React from 'react'
import { SlateToReact, slateToReactConfig } from '@slate-serializers/react'

const slate = [
  {
    "type": "p",
    "children": [
      {
        "text": "Paragraph"
      }
    ]
  },
  {
    "type": "image",
    "url": "https://picsum.photos/id/237/200/300"
  }
]

const config = {
  ...slateToReactConfig,
  elementTransforms: {
    ...slateToReactConfig.elementTransforms,
    image: ({ node }) => {
      return React.createElement('img', { src: node?.url ?? '', alt: '' })
    },
  },
}

export default function Page() {
  return <SlateToReact node={slate} config={config} />
}

output.html
<p>Paragraph</p><img src="https://picsum.photos/id/237/200/300">

Output

Paragraph

elementAttributeTransform

Apply attribute transformations to every node.

Formatting

Control the way resulting markup is encoded/formatted.

encodeEntities

See cheeriojs/dom-serializer - encodeEntities.

  • Default: true
alwaysEncodeBreakingEntities

Encode &, < and > regardless of other option settings.

  • Default: false
alwaysEncodeCodeEntities

Encode entities in <pre> tags regardless of other option settings.

  • Default: true
convertLineBreakToBr

Convert \n line breaks in Slate text nodes to an HTML <br> element.

defaultTag

Render a HTML element for Slate nodes that have no type.