slateToHtml: Payload CMS configuration
If you are using Slate Rich Text in Payload CMS, import the Payload configuration file and pass it as a parameter to the serializer.
import { slateToHtml, payloadSlateToHtmlConfig } from '@slate-serializers/html'
const slate = [
{
"children": [
{
"text": "Heading 1"
}
],
"type": "h1"
}
]
const serializedToHtml = slateToHtml(slate, payloadSlateToHtmlConfig)
output.html
<h1>Heading 1</h1>
The following example demonstrates the conversion of a Slate JSON object taken from the API of a Payload CMS document. The default Slate Rich Text editor configuration was used in a Payload CMS v2.30.0 installation.
Note that the relationship field is not converted to HTML. To support relationships, add elementTransforms to your configuration.
import { slateToHtml, payloadSlateToHtmlConfig } from '@slate-serializers/html'
const slate = [
{
"children": [
{
"text": "Heading 1: Payload CMS Slate Example Content"
}
],
"type": "h1"
},
{
"type": "h2",
"children": [
{
"text": "Heading 2: Text formatting"
}
]
},
{
"children": [
{
"text": "Some "
},
{
"text": "bold text",
"bold": true
},
{
"text": " in a sentence."
}
]
},
{
"children": [
{
"text": "Underlined text",
"underline": true
},
{
"text": " and "
},
{
"text": "italic text",
"italic": true
},
{
"text": "."
}
]
},
{
"children": [
{
"text": "Heading 3: Formatting combinations"
}
],
"type": "h3"
},
{
"children": [
{
"text": "Combine "
},
{
"text": "all three",
"bold": true,
"italic": true,
"underline": true
},
{
"text": " of the aforementioned tags. Throw a "
},
{
"text": "strikethrough",
"strikethrough": true
},
{
"text": " in there too."
}
]
},
{
"children": [
{
"text": "Heading 4: Code"
}
],
"type": "h4"
},
{
"children": [
{
"text": "Code block",
"code": true
}
]
},
{
"children": [
{
"text": "Heading 5: Text indent"
}
],
"type": "h5"
},
{
"type": "indent",
"children": [
{
"children": [
{
"text": "Indented text."
}
]
},
{
"children": [
{
"children": [
{
"text": "Indented text in indented text."
}
]
}
],
"type": "indent"
}
]
},
{
"children": [
{
"text": "Heading 6: More combinations"
}
],
"type": "h6"
},
{
"children": [
{
"text": "",
"bold": true
},
{
"children": [
{
"text": "A link in bold",
"bold": true
}
],
"linkType": "custom",
"type": "link",
"url": "https://github.com/thompsonsj"
},
{
"text": ". "
},
{
"children": [
{
"text": "A link with a new tab"
}
],
"linkType": "custom",
"newTab": true,
"type": "link",
"url": "https://github.com/thompsonsj"
},
{
"text": "."
}
]
},
{
"children": [
{
"text": "Lists"
}
],
"type": "h2"
},
{
"type": "ul",
"children": [
{
"children": [
{
"text": "Unordered List Item 1"
}
],
"type": "li"
},
{
"children": [
{
"text": "Unordered List Item 2"
}
],
"type": "li"
}
]
},
{
"children": [
{
"children": [
{
"text": "Ordered list item 1"
}
],
"type": "li"
},
{
"children": [
{
"text": "Ordered list item 2"
}
],
"type": "li"
},
{
"children": [
{
"text": "Ordered list item 3"
}
],
"type": "li"
}
],
"type": "ol"
},
{
"children": [
{
"text": ""
}
],
"relationTo": "images",
"type": "upload",
"value": {
"id": "671a3ba6d67ea175ada76456",
"originalFileName": "31 Bottles on a Wall",
"filename": "31.png",
"mimeType": "image/png",
"filesize": 8965070,
"width": 2400,
"height": 1600,
"focalX": 50,
"focalY": 50,
"sizes": {
"thumbnail": {
"width": 400,
"height": 300,
"mimeType": "image/png",
"filesize": 298073,
"filename": "31-400x300.png",
"url": "/images/31-400x300.png"
},
"small": {
"width": 640,
"height": 427,
"mimeType": "image/png",
"filesize": 651050,
"filename": "31-640x427.png",
"url": "/images/31-640x427.png"
},
"mediumAvif": {
"width": 1200,
"height": 800,
"mimeType": "image/avif",
"filesize": 235740,
"filename": "31-1200x800.avif",
"url": "/images/31-1200x800.avif"
},
"medium": {
"width": 1200,
"height": 800,
"mimeType": "image/png",
"filesize": 2298396,
"filename": "31-1200x800.png",
"url": "/images/31-1200x800.png"
},
"large": {
"width": 2048,
"height": 1365,
"mimeType": "image/png",
"filesize": 6724053,
"filename": "31-2048x1365.png",
"url": "/images/31-2048x1365.png"
},
"share": {
"width": 1200,
"height": 630,
"mimeType": "image/png",
"filesize": 1908917,
"filename": "31-1200x630.png",
"url": "/images/31-1200x630.png"
}
},
"createdAt": "2024-10-24T12:20:54.642Z",
"updatedAt": "2024-10-24T12:20:54.642Z",
"url": "/images/31.png"
}
},
{
"children": [
{
"text": ""
}
],
"relationTo": "youtube-videos",
"type": "relationship",
"value": {
"id": "671a9003910b067fc9bafa92",
"videoId": "jNQXAC9IVRw",
"title": "Me at the zoo",
"aspectRatio": 1.3333333333333333,
"width": 200,
"height": 150,
"thumbnailUrl": "https://i.ytimg.com/vi/jNQXAC9IVRw/hqdefault.jpg",
"oembed": {
"title": "Me at the zoo",
"author_name": "jawed",
"author_url": "https://www.youtube.com/@jawed",
"type": "video",
"height": 150,
"width": 200,
"version": "1.0",
"provider_name": "YouTube",
"provider_url": "https://www.youtube.com/",
"thumbnail_height": 360,
"thumbnail_width": 480,
"thumbnail_url": "https://i.ytimg.com/vi/jNQXAC9IVRw/hqdefault.jpg",
"html": "<iframe width=\"200\" height=\"150\" src=\"https://www.youtube.com/embed/jNQXAC9IVRw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen title=\"Me at the zoo\"></iframe>"
},
"createdAt": "2024-10-24T18:20:51.757Z",
"updatedAt": "2024-10-24T18:20:51.757Z"
}
}
]
const serializedToHtml = slateToHtml(slate, payloadSlateToHtmlConfig)
output.html
<h1>Heading 1: Payload CMS Slate Example Content</h1><h2>Heading 2: Text formatting</h2><p>Some <strong>bold text</strong> in a sentence.</p><p><u>Underlined text</u> and <i>italic text</i>.</p><h3>Heading 3: Formatting combinations</h3><p>Combine <strong><u><i>all three</i></u></strong> of the aforementioned tags. Throw a <s>strikethrough</s> in there too.</p><h4>Heading 4: Code</h4><p><pre><code>Code block</code></pre></p><h5>Heading 5: Text indent</h5><p>Indented text.</p><p>Indented text in indented text.</p><h6>Heading 6: More combinations</h6><p><strong></strong><a href="https://github.com/thompsonsj" data-link-type="custom"><strong>A link in bold</strong></a>. <a href="https://github.com/thompsonsj" data-link-type="custom" target="_blank">A link with a new tab</a>.</p><h2>Lists</h2><ul><li>Unordered List Item 1</li><li>Unordered List Item 2</li></ul><ol><li>Ordered list item 1</li><li>Ordered list item 2</li><li>Ordered list item 3</li></ol><img src="/images/31.png">