Payload CMS Rich Text That Editors Control

Our editorial crew wanted more control inside Payload CMS but we had to respect the design system. Turning the rich text editor into a guided experience solved the impasse.

We started by auditing what editors actually published: pull quotes, inline code, callout cards, and link buttons. Each became a controlled block or mark.

• Marks handle inline styles like code and keyboard shortcuts.

• Blocks capture editorial patterns like callouts and gallery embeds.

1import type { CollectionConfig } from "payload";
2
3export const Articles: CollectionConfig = {
4  slug: "articles",
5  fields: [
6    {
7      name: "content",
8      type: "richText",
9      required: true,
10      editor: {
11        features: ({ defaultFeatures }) => [
12          ...defaultFeatures,
13          "blockquote",
14          "code",
15          {
16            name: "callout",
17            button: {
18              label: "Callout",
19              icon: "⭐"
20            }
21          }
22        ]
23      },
24      blocks: ["callout", "imageGallery"],
25      admin: {
26        elements: {
27          h2: { className: "wysiwyg-heading" }
28        }
29      }
30    }
31  ]
32};
Copy

Training took twenty minutes because editors now see only the controls we support. The content API stays predictable and front-end renders stay on brand.

We review the rich text configuration every quarter and adjust based on real posts, not hypothetical edge cases. Editors feel heard and the codebase stays calm.