hanskre / sanity-plugin-html-to-portable-text Goto Github PK

Sanity custom input plugin to convert HTML to Portable Text

TypeScript 96.77% JavaScript 3.23%

sanity-plugin-html-to-portable-text's Introduction

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.

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',
    // 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' },
        ]
      }
    ]
  }
]

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: []
      }
    ]
  }
]

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

sanity-plugin-html-to-portable-text's People

Contributors

Stargazers

Watchers

Forkers

chrispecoraro allcancode isaac-mcfadyen 3200pro

sanity-plugin-html-to-portable-text's Issues

Non-breaking space (U+00A0)

The HTML input fails if the source has a U+00A0 non-breaking space character included. I assume other folks also copy paste things into this field that may include such characters.

Perhaps there's a way to create a block that's just this one character in order to swallow the input, but I double it.

Seems reasonable to drop that type of gremlin.

Fails on ampersand in `<img>` src

This plugin fails when there is an ampersand (query param) in the src url for an image tag.

FAILS
<img src="https://img.example.com/photo-123.png?width=100&quality=80">

FAILS
<img src="https://img.example.com/photo-123.png&">

WORKS
<img src="https://img.example.com/photo-123.png?size=medium">

WORKS
<img src="https://img.example.com/photo-123.png">

How to set type "htmlToPortableText" when posting from API?

I have a minor issue I was hoping you could assist with.

One of my use cases for this is to be able to create documents from form data sent via API. My issue when the form data for this html field is sent to the "htmlToDescription" field it is being sent as type "string." I looked through the source code, but can't find the structure needed to send it as type "htmlToPortableText."

I ran into a similar issue with the "slug" fields where it was sending as "string" instead of the required type "slug." The solution for that was simply to create quick object for type "slug." I was able to find the structure just by viewing it via GROQ in Sanity Vision. However, I can't do that with this because the field isn't actually saved:

const slug = {
   _type: "slug",
   current: tagName,
};
const newTag = {
   _id: tag[0] && tag[0]._id ? tag[0]._id : `drafts.${tagName}`,
   _type: "jobTag",
   tagName: tagName,
   slug: slug,
};

Tables?

Hello,

Can you edit/add tables here as well?

Thanks!

issue with block-type

Hi I have been trying to figure out what is the issue with block-type, I saw on another issue you mention this was a type, I had fixed that type but still having "Schema does not seem to specify a block-type. Please specify a valid block-type to see the output." issue, so below is the code I have for now. What am I missing, would you please let me know.

{ 
  name: 'htmlToArticleBody', 
  title: 'HTML content', 
  type: 'htmlToPortableText' , 
  options: { refblock: 'blockContent' }
},
{ name: "body", type: "blockContent", title: "Body" },

Edit: Actually it works when I place it to type document, but it doesn't work when i use it under subdocuments, or I don't know what they call this popup selectors