Skip to content

3200pro/sanity-plugin-html-to-portable-text

 
 

Repository files navigation

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: 'htmlToPortableText',
  {
    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: 'htmlToPortableText',
    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: '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: () => <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

About

Sanity custom input plugin to convert HTML to Portable Text

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 96.7%
  • JavaScript 3.3%