Sanity Library Reference Docs
    Preparing search index...

    Interface BlockDefinition

    Schema definition for text blocks.

    {
      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'},
            ],
            annotations: [
              {
                type: 'object',
                name: 'link',
                fields: [
                  {
                    type: 'string',
                    name: 'href',
                  },
                ],
              },
            ]
          },
          styles: [
            {title: 'Normal', value: 'normal'},
            {title: 'H1', value: 'h1'},
            {title: 'H2', value: 'h2'},
            {title: 'H3', value: 'h3'},
            {title: 'H4', value: 'h4'},
            {title: 'H5', value: 'h5'},
            {title: 'H6', value: 'h6'},
            {title: 'Quote', value: 'blockquote'}
          ],
          lists: [
            {title: 'Bullet', value: 'bullet'},
            {title: 'Number', value: 'number'},
          ],
        },
      ]
    }
    interface BlockDefinition {
        components?: { block?: ComponentType<BlockProps> };
    }

    Hierarchy (View Summary)

    Index

    Properties

    components?

    Properties

    components?: { block?: ComponentType<BlockProps> }

    Components for the block schema type

    • This only applies to the block text type, and not block object types (like images).
    • Don't render arbitrary text nodes inside regular text blocks, as this will confuse the editor with what is editable text and not. Make sure to wrap all nodes which are NOT part of the edited text inside a container with contentEditable={false} and with style={{userSelection: 'none'}} so that the editor can distinguish between editable text and non-editable text.
    {
      block: (blockProps) => {
        return (
          <Flex>
            <Box flex={1}>{blockProps.renderDefault(blockProps)}</Box>
            <Box contentEditable={false} style={{userSelect: 'none'}}>
              <Button
                icon={TrashIcon}
                onClick={(event) => {
                  event.preventDefault()
                  blockProps.onRemove()
                 }}
                />
            </Box>
          </Flex>
        )
      },
    },

    Settings

    Member Visibility

    On This Page

    Properties