Sanity Library Reference Docs
    Preparing search index...

    Interface BlockDecoratorDefinition

    Schema definition for text block decorators.

    {
      name: 'blockContent',
      title: 'Content',
      type: 'array',
      of: [
        {
          type: 'block',
          marks: {
            decorators: [
              {title: 'Strong', value: 'strong'},
              {title: 'Emphasis', value: 'em'},
              {title: 'Underline', value: 'underline'},
              {title: 'Strike', value: 'strike'},
              {title: 'Code', value: 'code'},
            ]
          }
        }
      ]
    }
    interface BlockDecoratorDefinition {
        component?: ComponentType<BlockDecoratorProps>;
    }
    Index

    Properties

    component?

    Properties

    component?: ComponentType<BlockDecoratorProps>

    Component for rendering a decorator.

    See also BlockDecoratorProps

    • Try not to hard code CSS properties that could be derived from @sanity/ui. This will make sure your rendering looks good independent of the theme context it appears in.
    • Don't render arbitrary text nodes as this will confuse the editor with what is editable text and not. If you need arbitrary text, make sure to wrap them in in a container with contentEditable={false}.

    Example: Example of rendering custom decorator that highlights text.

    const Highlight = (props: BlockDecoratorProps) => (
      <span style={{backgroundColor: '#ff0'}}>
        {props.children}
      </span>
    )

    Settings

    Member Visibility

    On This Page

    Properties