Block editor style renders as normal `<p>` tag instead of custom component

I see what's happening here! The blockEditor configuration you've added only affects how the decorator appears in the Sanity Studio editor - it doesn't affect the actual data structure or how it renders on your frontend.

The decorator configuration in the Studio is working correctly - it's storing the mark in your Portable Text data. However, when you fetch and render that data on your frontend, you need to configure your Portable Text renderer to handle the custom small decorator.

Here's what you need to do on your frontend:

If you're using @portabletext/react:

import { PortableText } from '@portabletext/react'

const components = {
  marks: {
    small: ({children}) => <small>{children}</small>,
  }
}

<PortableText 
  value={yourPortableTextData} 
  components={components}
/>

If you're using the older @sanity/block-content-to-react:

import BlockContent from '@sanity/block-content-to-react'

const serializers = {
  marks: {
    small: ({children}) => <small>{children}</small>,
  }
}

<BlockContent 
  blocks={yourPortableTextData} 
  serializers={serializers}
/>

The key point is that custom decorators need to be defined in two places:

1. In your Studio schema (which you've already done) - this controls the editing experience
2. In your frontend renderer (which you need to add) - this controls how the data is displayed

Your Portable Text data structure includes the decorator marks, but without telling your renderer what to do with the small value, it just renders the default <p> tag. Once you add the custom component/serializer on the frontend, your <small> tags will appear correctly!

You can read more about this in the decorators documentation and see similar examples in this answer about custom decorators.