Production Guides & Recipes

Built-In Presets Catalog

@nexload-sdk/payload-editor provides five curated presets designed for distinct content creation needs:

Preset Name	Target Use Case	Included Highlights
`compact`	Comments, brief bios, small callouts	Bold, italic, underline, link, inline toolbar only. No headings or blocks.
`standard`	General descriptions, standard rich-text	Paragraphs, lists, blockquotes, links, basic formatting with sticky toolbar.
`structured-content`	Marketing landing pages, documentation	Headings (H1-H6), horizontal rules, image/file uploads, alignment tools.
`article`	Full blog posts, publications	Structured content plus inline code blocks, relationship embeds, and sub/superscript.
`product-description`	E-commerce product catalogs	Constrained headings (H2-H4), bullet lists, links, image gallery embeds.

import { createEditor } from "@nexload-sdk/payload-editor";

export const standardEditor = createEditor({ preset: "standard" });
export const articleEditor = createEditor({ preset: "article" });

Defining an Organization Preset

Standardize rich-text behavior across multiple projects or collections using defineEditorPreset:

import { createEditor, defineEditorPreset } from "@nexload-sdk/payload-editor";

// 1. Create a reusable corporate preset
export const corporateArticlePreset = defineEditorPreset({
  features: {
    paragraph: true,
    heading: {
      sizes: ["h2", "h3"], // Forbid H1 to maintain page SEO hierarchy
    },
    bold: true,
    italic: true,
    link: {
      autoLink: true,
      maxDepth: 1,
    },
    upload: {
      allowedCollections: ["media"],
      maxDepth: 1,
    },
    blockquote: true,
  },
});

// 2. Consume across collections
export const editor = createEditor({ preset: corporateArticlePreset });

Extending with Native Lexical Blocks

When you need custom Lexical features that aren’t part of the core preset (such as Payload’s native BlocksFeature), use extendFeatures:

import { BlocksFeature } from "@payloadcms/richtext-lexical";
import { createEditor } from "@nexload-sdk/payload-editor";
import { CalloutBlock, GalleryBlock } from "@/blocks";

export const richArticleEditor = createEditor({
  preset: "article",
  extendFeatures: [
    BlocksFeature({
      blocks: [CalloutBlock, GalleryBlock],
    }),
  ],
});

extendFeatures appends providers after managed features. If a native provider replaces a built-in feature, set the managed key to false in features.

Troubleshooting & Common Pitfalls

1. Editor Renders with Default Payload Controls Instead of Preset

Ensure you assign the returned editor provider to the editor property of the richText field or Payload’s root editor configuration:
```
{
  name: "content",
  type: "richText",
  editor: myConfiguredEditor, // Must be assigned here
}
```

Remember that arrays in features replace rather than concatenate:

// Toolbar will ONLY offer H2 and H3
features: {
  heading: { sizes: ["h2", "h3"] },
}

3. Missing Peer Dependency Error

@payloadcms/richtext-lexical must be explicitly installed in your application:

pnpm add @payloadcms/richtext-lexical

Ensure its version matches your payload core version (3.85.0 or higher).