Center or right align text in Sanity rich text editor

The built-in Portable Text Editor in Sanity doesn't have native support for text alignment (center, right, or justify) as a standard feature. However, you have a few options to achieve this:

1. Custom Decorators (Quick but Limited)

You can add custom decorators for alignment, though this is semantically not ideal since decorators are meant for inline text styling rather than block-level properties:

{
  name: "content",
  type: "array",
  of: [
    {
      type: "block",
      marks: {
        decorators: [
          {
            title: "Center",
            value: "center",
            icon: () => "C",
            component: ({children}) => <span style={{textAlign: 'center', display: 'block'}}>{children}</span>
          }
        ]
      }
    }
  ]
}

Downside: This approach treats alignment as an inline mark rather than a block property, which isn't semantically correct.

2. Custom Block Styles (Better Approach)

A more appropriate solution is to use custom block styles, which apply to the entire paragraph:

{
  type: "block",
  styles: [
    {title: 'Normal', value: 'normal'},
    {title: 'Centered', value: 'center'},
    {title: 'Right Aligned', value: 'right'},
  ]
}

Then when rendering, map these styles to appropriate CSS:

// Using @portabletext/react
const components = {
  block: {
    center: ({children}) => <p style={{textAlign: 'center'}}>{children}</p>,
    right: ({children}) => <p style={{textAlign: 'right'}}>{children}</p>,
  }
}

Downside: Users can only have one style per block (can't have a centered heading, for example).

3. Custom Object with Alignment Field (Most Flexible)

For the most control, create a custom block type that includes an alignment field:

{
  name: 'alignedText',
  type: 'object',
  fields: [
    {
      name: 'text',
      type: 'array',
      of: [{type: 'block'}]
    },
    {
      name: 'alignment',
      type: 'string',
      options: {
        list: ['left', 'center', 'right']
      }
    }
  ]
}

This gives you full control but requires editors to explicitly choose when to use aligned text blocks.

The community generally agrees that text alignment isn't a standard feature because it's often considered a presentation concern rather than content structure. However, these workarounds are commonly used when alignment is genuinely a content requirement rather than just a styling preference. The custom block styles approach (option 2) tends to be the most popular balance between usability and semantic correctness.