defaultFeatures in lexicalEditor only shows basic features (bold, italic, underline, link)

[cdudek]

Description

I'm using Payload CMS with @payloadcms/richtext-lexical to configure a rich text editor in my project. However, the defaultFeatures only include bold, italic, underline, and link. I'm using payload cms 3.0 with the website template.

Even when I manually import and add more features, they do not appear in the Payload CMS admin panel.

---

Steps to Reproduce

1. Installed the latest versions of payload and @payloadcms/richtext-lexical.

2. Configured the editor like this:

   // src/blocks/Content/config.ts
   import type { Field } from 'payload'
   import {
     FixedToolbarFeature,
     HeadingFeature,
     InlineToolbarFeature,
     ParagraphFeature,
     lexicalEditor,
   } from '@payloadcms/richtext-lexical'
   
   import { linkGroup } from '@/fields/linkGroup'
   
   export const hero: Field = {
       // ...
       {
         name: 'richText',
         type: 'richText',
         editor: lexicalEditor({
           features: ({ defaultFeatures }) => {
             return [
               ...defaultFeatures,
               HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
               ParagraphFeature(),
               FixedToolbarFeature(),
               InlineToolbarFeature(),
             ]
           },
         }),
         label: false,
       },
       // ...
   }

3. Inside Payload CMS, only the basic formatting options appear:

   • ✅ Bold, Italic, Underline, Link
   • ❌ Missing: Alignment, Block Quotes, Lists, all other defaultFeatures, etc.

---

What I Tried

• Logged defaultFeatures inside the features function:

  features: ({ defaultFeatures }) => {
    console.log('defaultFeatures:', defaultFeatures);
    return [
      ...defaultFeatures,
      HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
      ParagraphFeature(),
      FixedToolbarFeature(),
      InlineToolbarFeature(),
    ]
  },

  • Result: defaultFeatures only contains bold, italic, underline, and link.

• Manually imported and added missing features (e.g., ParagraphFeature, HeadingFeature).

• Tried importing defaultFeatures manually:

  import { defaultFeatures } from '@payloadcms/richtext-lexical'

  • Result: No change.

• Checked package versions (package.json):

  "@payloadcms/richtext-lexical": "latest",
  "payload": "latest",
  "react": "^19.0.0",

• Updated everything (pnpm update).

• Cleared cache and reinstalled node_modules (rm -rf node_modules && pnpm install).

---

Expected Behavior

When using defaultFeatures in lexicalEditor, it should include more than just bold, italic, underline, and link.

Manually adding features like HeadingFeature and ParagraphFeature should make them show up in the rich text editor inside Payload CMS.

---

Actual Behavior

Only basic formatting options (bold, italic, underline, link) appear in the rich text editor, even though other features are explicitly added.

---

Environment

• Payload Version: "latest"
• @payloadcms/richtext-lexical Version: "latest"
• React Version: "^19.0.0"
• Node Version: "^18.20.2 || >=20.9.0"
• Package Manager: pnpm

---

Questions

• Is there something missing in my lexicalEditor setup?
• Should defaultFeatures contain more than just the basic features?
• Is there a known issue with @payloadcms/richtext-lexical in recent versions?

Any help what I'm doing wrong would be greatly appreciated! Thanks!

[BayuPrasetyaUtomo]

Hi, I'm using the latest version of payload (3.24.0) and looking at your setup, the default features should include everything listed as the default feature here.
However, in the website template the default lexical is overwritten by the defaultLexical imported to payload.config.ts from src/fields/richtext/index.ts which only include the features you've seen there.

You can change this by changing the defaultLexical in the src/fields/richtext/index.ts or manually adding feature you need where you need it. defaultLexical in the payload.config.ts will be the default features included in the defaultFeatures wherever you add richtext field throughout your application without extending them.

I hope my explanation is easy to understand.

snippet from the source code:

• payload.config.ts
• defaultLexical

// payload.config.ts
// change this
import { defaultLexical } from '@/fields/defaultLexical'

export default buildConfig({
  // your other config...
  editor: defaultLexical,
  // your other config...
  }

import {
  FixedToolbarFeature,
  lexicalEditor,
} from '@payloadcms/richtext-lexical';

export const defaultLexical = lexicalEditor({
  // inline toolbar should be included by default, so you only need to add fixedtoolbar
  features: ({ defaultFeatures }) => [...defaultFeatures, FixedToolbarFeature()],
});