Sanity Plugin HTML to Portable Text

This plugin is a custom input component which converts HTML into Portable Text on the fly.

Sanity is using the Portable Text-format whenever you use the block-type.

In Sanity-Studio there is a WYSIWYG-Block Content Editor which makes editing very convenient. But if you are just migrating to sanity and your source is HTML, this plugin may come in handy.

Your schema needs to define at least one block-type field to allow persisting to your schema.

!Demo

Installation

Install the Sanity Plugin HTML to Portable Text with the sanity CLI

``bash
sanity install sanity-plugin-html-to-portable-text
`

Usage

Just add a field of htmlPortableText-type to your fields-array.

$3

`js
fields: [
{
name: 'htmlToArticleBody',
title: 'HTML to Article Body',
type: 'htmlToPortableText',
{
name: 'articleBody',
title: 'Article Body',
type: 'array',
of: [ { type: 'block' } ]
}
]
`

$3

If you have multiple block-type fields, you may want to have one selected as the default.

$3

`js
options: { defaultrefblock: '' },
`

| Parameter | Type | Description | Default |
| :---------------- | :------- | :------------------------------------- | :------------------------------------------- |
| defaultrefblock | string | Optional. Name of referenced block | First block-type as defined in your schema |

`js
fields: [
{
name: 'htmlToArticleBody',
title: 'HTML to Article Body',
type: 'htmlToPortableText',
// no need to reference the block
// all block-types get picked up automatically
// but you can specify which one is pre-selected
{
name: 'articleBody',
title: 'Article Body',
type: 'array',
of: [
{
type: 'block',
styles: [
// enable only below styles
{ title: 'Unstyled', value: 'normal' },
{ title: 'H1', value: 'h1' },
{ title: 'H2', value: 'h2' },
]
}
]
}
]
`

$3

This example show how you may radically limit the available styles in Portable Text.

`js
fields: [
{
name: 'htmlToArticleBody',
title: 'HTML to Article Body',
type: 'htmlToPortableText',
},
{
name: 'articleBody',
title: 'Article Body',
type: 'array',
of: [
{
type: 'block',
// Disallow all styles
styles: [],
// Disallow all lists
lists: [],
marks: {
// Only allow these decorators
decorators: [
{ title: 'Bold', value: 'strong' },
{
title: 'Superscript',
value: 'sup',
// Define custom icon and renderer for the blockEditor
blockEditor: {
icon: () =>

,
render: ({ children }) => {children}
}
},
],
// disallow links
annotations: []
}
]
}
]
`

Further reading

- Introduction to Portable Text
- Using Portable Text in React

Features

- provides a custom input component
- converts HTML into Portable Text on the fly
- introspects the schema of the parent document and finds all block-type fields
- persist converted HTML to selected block-type field of your schema`