htmlToSlate: 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 { htmlToSlate, payloadHtmlToSlateConfig } from '@slate-serializers/html'
const html = <h1>Heading 1</h1>
const serializedToSlate = slateToHtml(slate, payloadHtmlToSlateConfig)
output.json
[
{
"type": "h1",
"children": [
{
"text": "Heading 1"
}
]
}
]
The following example demonstrates the conversion of HTML generated in slateToHtml: Payload CMS configuration back to a Slate JSON object.
Note that the relationship field is not converted to HTML. To support relationships, add elementTransforms to your configuration.
import { htmlToSlate, payloadHtmlToSlateConfig } from '@slate-serializers/html'
const 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">`
const serializedToSlate = slateToHtml(slate, payloadHtmlToSlateConfig)
output.json
[
{
"type": "h1",
"children": [
{
"text": "Heading 1: Payload CMS Slate Example Content"
}
]
},
{
"type": "h2",
"children": [
{
"text": "Heading 2: Text formatting"
}
]
},
{
"type": "p",
"children": [
{
"text": "Some "
},
{
"text": "bold text",
"bold": true
},
{
"text": " in a sentence."
}
]
},
{
"type": "p",
"children": [
{
"text": "Underlined text",
"underline": true
},
{
"text": " and "
},
{
"text": "italic text",
"italic": true
},
{
"text": "."
}
]
},
{
"type": "h3",
"children": [
{
"text": "Heading 3: Formatting combinations"
}
]
},
{
"type": "p",
"children": [
{
"text": "Combine "
},
{
"text": "all three",
"bold": true,
"underline": true,
"italic": true
},
{
"text": " of the aforementioned tags. Throw a "
},
{
"text": "strikethrough",
"strikethrough": true
},
{
"text": " in there too."
}
]
},
{
"type": "h4",
"children": [
{
"text": "Heading 4: Code"
}
]
},
{
"type": "p",
"children": [
{
"text": "Code block",
"code": true
}
]
},
{
"type": "h5",
"children": [
{
"text": "Heading 5: Text indent"
}
]
},
{
"type": "p",
"children": [
{
"text": "Indented text."
}
]
},
{
"type": "p",
"children": [
{
"text": "Indented text in indented text."
}
]
},
{
"type": "h6",
"children": [
{
"text": "Heading 6: More combinations"
}
]
},
{
"type": "p",
"children": [
{
"type": "link",
"linkType": "custom",
"newTab": false,
"url": "https://github.com/thompsonsj",
"children": [
{
"text": "A link in bold",
"bold": true
}
]
},
{
"text": ". "
},
{
"type": "link",
"linkType": "custom",
"newTab": true,
"url": "https://github.com/thompsonsj",
"children": [
{
"text": "A link with a new tab"
}
]
},
{
"text": "."
}
]
},
{
"type": "h2",
"children": [
{
"text": "Lists"
}
]
},
{
"type": "ul",
"children": [
{
"type": "li",
"children": [
{
"text": "Unordered List Item 1"
}
]
},
{
"type": "li",
"children": [
{
"text": "Unordered List Item 2"
}
]
}
]
},
{
"type": "ol",
"children": [
{
"type": "li",
"children": [
{
"text": "Ordered list item 1"
}
]
},
{
"type": "li",
"children": [
{
"text": "Ordered list item 2"
}
]
},
{
"type": "li",
"children": [
{
"text": "Ordered list item 3"
}
]
}
]
}
]