Text/Image alignment in Sanity.io portable text rich text editor

Question

Is there an option to align text (and also an image) to the center in sanity.io's rich text editor (Portable text)? Couldn't find anything in the docs

Answer 1

No, there is not yet an out-of-the-box solution. Sanity has many requests for this. But you could make one yourself based on css. More info on it here. You might get quicker support on the Sanity Slack channels though. There are also a few existing community align approaches if you use search there.

Answer 2

Unfortunately, this is a known (current) limitation of the Portable Text editor. As per the Stanity documentation:

There will be situations where the line between meaning and presentations isn't clear cut. Take text alignment. In many cases this can be a concern of the stylesheet to where the content is rendered. But there are cases where you would want control over text-alignment to be able to reproduce certain representations of text, like poems or the like. In this case we would suggest either adding a custom type, or creating a separate style that would also embed that usecase more specifically.

Solutions:

1. Make a Custom Type

{
  name: 'textAlignment',
  type: 'object',
  title: 'Text Alignment',
  fields: [
    {
      title: 'Content',
      name: 'text',
      type: 'portableText'
    },
    {
      title: 'Alignment',
      name: 'alignment',
      type: 'string',
      options: {
        list: [
          {title: 'Left', value: 'left'},
          {title: 'Right', value: 'right'},
          {title: 'Center', value: 'center'},
        ],
      }
    }
  ]
}

2. Make a custom Style

e.g. normal+right and implement alignment in your frontend with the block serializer. The downside here is that you can't combine this with other styles. Eg. you can't have a H1 block with text alignment.

Answer 3

I've created a custom input component that allows you to align the content within the block editor preview, I've only tested this with text but I'm sure it could be customised to work with images too.

// schemas/components/AlignBlock.js
import React from "react";
import { BlockEditor } from "part:@sanity/form-builder";

function AlignBlock(props) {
    const options = props.type.options.align;
    const alignment = () => {
        switch (options) {
            case "right":
                return (
                    <div style={{ textAlign: "right" }}>
                        <BlockEditor {...props} />
                    </div>
                );
            case "center":
                return (
                    <div style={{ textAlign: "center" }}>
                        <BlockEditor {...props} />
                    </div>
                );
            default:
                return <BlockEditor {...props} />;
        }
    };
    return alignment();
}

export default AlignBlock;

And then to use this within a specific block editor, import AlignBlock as an inputComponent and pass in either align: center or align: right under options.

import AlignBlock from "../components/AlignBlock";

export default {
    title: "Content",
    name: "content",
    type: "document",
    fields: [
        {
            title: "Splashscreen",
            name: "splashscreen",
            type: "array",
            inputComponent: AlignBlock,
            options: { align: "center" },
            of: [
                {
                    type: "block",
                    styles: [],
                    lists: [],
                    marks: {
                        decorators: [],
                        annotations: [],
                    },
                },
            ],
        },
    ],
};