Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

Sanity Plugin HTML to Portable Text

By Hans

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

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

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

Usage

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

Basic Usage

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

Example with pre-selected block

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

Parameters

  options: { defaultrefblock: '<name>' },

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

fields: [
  {
    name: 'htmlToArticleBody',
    title: 'HTML to Article Body',
    type: 'htmlToProtableText',
    options: { refblock: 'articleBody' },
  {
    name: 'articleBody',
    title: 'Article Body',
    type: 'array',
    of: [
      {
        type: 'block',
        styles: [
          // we only want couple of styles to be available
          { title: 'Unstyled', value: 'normal' },
          { title: 'H1', value: 'h1' },
          { title: 'H2', value: 'h2' },
        ]
      }
    ]
  }
]

Advanced Example

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

fields: [
  {
    name: 'htmlToArticleBody',
    title: 'HTML to Article Body',
    type: 'htmlToProtableText',
  },
  {
    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: () => <div></div>,
                      render: ({ children }) => <span><sup>{children}</sup></span>
                  }
              },
          ],
          // disallow links
          annotations: []
      }
    ]
  }
]

Further reading

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

Roadmap

  • Add unit tests, since this is a delicate functionality

Install command

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

Contributor

Hans

Technology enthusiast and huge fan of sanity.io

Hans is located at Stuttgart / Germany
Visit Hans's profile

Other plugins by author