pt-string

A single line portable text input.

This is a Sanity Studio v3 plugin.

Installation

npm install sanity-plugin-pt-string

Usage

Add it as a plugin in sanity.config.ts (or .js):

import {defineConfig} from 'sanity'
import {ptString} from 'sanity-plugin-pt-string'

export default defineConfig({
  //...
  plugins: [ptString()],
})

Use in your schema:

import {defineType} from 'sanity'

export default defineType({
  name: 'myType',
  type: 'document',
  fields: [
    {
      name: 'myField',
      type: 'pt-string',
      title: 'My Field',
    },
  ],
})

Preview

Add a preview config your schema type: schemaTypes/schema.ts:

import {defineType, defineField} from 'sanity'
import {ptStringPreview} from 'sanity-plugin-pt-string'

export default defineType({
  name: 'myType',
  type: 'document',
  fields: [
    defineField({
      name: 'myField',
      type: 'pt-string',
      title: 'My Field',
      preview: ptStringPreview,
    }),
  ],
  preview: ptStringPreview('myField'),
})

Options

Customize decorators by passing an object with the following properties:

import {defineType} from 'sanity'

export default defineType({
  name: 'myType',
  type: 'document',
  fields: [
    {
      name: 'myField',
      type: 'pt-string',
      title: 'My Field',
      options: {
        decorators: [
          {title: 'Strong', value: 'strong'},
          {title: 'Emphasis', value: 'em'},
          {title: 'Code', value: 'code'},
          {title: 'Underline', value: 'underline'},
          {title: 'Strike', value: 'strike-through'},
        ],
      },
    },
  ],
})

Add your own custom decorators:

import { defineType } from 'sanity';
import { HighlightIcon } from '@sanity/icons';

const HighlightDecorator = (props) => <span style={{ backgroundColor: '#ff0', color: '#000' }}>{props.children}</span>;

export default defineType({
  name: 'myType',
  type: 'document',
  fields: [
    {
      name: 'myField',
      type: 'pt-string',
      title: 'My Field',
      options: {
        decorators: [
          { title: 'Strong', value: 'strong' },
          { title: 'Emphasis', value: 'em' },
          { title: 'Code', value: 'code' },
          { title: 'Underline', value: 'underline' },
          { title: 'Strike', value: 'strike-through' },
          // Custom highlight decorator
          {
            title: 'Highlight',
            value: 'highlight',
            icon: HighlightIcon,
            component: HighlightDecorator,
          },
        ],
      },
    },
  ],
});

Usage

The data is output as a Portable Text block. You can use the PortableText component from @portabletext/react to render it in React:

import {PortableText} from '@portabletext/react'

const PortableTextParagraph = (props) => {
  return <PortableText value={props.value} />
}

If you want to customize the rendering of the blocks, you can pass a components prop to the PortableText component. Following is an example of how to render your content within a h2 tag:

import {PortableText} from '@portabletext/react'

const components = {
  block: {
    normal: ({ children }) => <h2>{children}</h2>
  }
}

const PortableTextHeading = (props) => {
  return <PortableText value={props.value} components={components} />
}

Migrations

See the migration script inside ./migrations/transformStringToPortableText.js of this Repo.

Follow the instructions inside the script and set the _type and field name you wish to target.

Please take a backup first!

License

MIT © Rostislav Melkumyan

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.