Custom Lexical Feature Toolbar Button Not Appearing (Payload 3.33.0)

[AdonisVillanueva]

Hello Payload CMS community,

I'm trying to add a custom feature with a toolbar button to the Lexical rich text editor in my Payload 3.33.0 project, but the button is not appearing in the Lexical Editor toolbar. I've followed the documentation for creating server and client features and linking them.

I've created the following files for a simple "Test" feature:
src/fields/lexical/features/TestFeature.tsx (Server Feature)

import { createServerFeature } from '@payloadcms/richtext-lexical';

export const TestFeature = createServerFeature({
  key: 'test-feature',
  feature: () => {
    console.log('Processing TestFeature');
    return {
      ClientFeature: '@/fields/lexical/features/TestFeature.client#TestClientFeature',
      plugins: undefined,
      nodes: undefined,
      toolbar: undefined,
    };
  },
});

src/fields/lexical/features/TestFeature.client.tsx (Client Feature)

'use client';

import { createClientFeature, toolbarFeatureButtonsGroupWithItems } from '@payloadcms/richtext-lexical/client';
import TestButton from '../toolbar/TestButton';

export const TestClientFeature = createClientFeature({
  plugins: [],
  nodes: [],
  toolbarFixed: {
    groups: [
      {
        ...toolbarFeatureButtonsGroupWithItems([
          TestButton,
        ]),
        key: 'test-button-group',
      },
    ],
  },
});

src/fields/lexical/toolbar/TestButton.tsx (Toolbar Button Component)

import React from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import type { ToolbarGroupItem } from '@payloadcms/richtext-lexical';
import type { LexicalEditor } from 'lexical';

const TestButtonComponent: React.FC = () => {
  console.log('TestButtonComponent loaded and rendering');
  return (
    <button
      title="Test Button"
      aria-label="Test Button"
      type="button"
      className="toolbar-item"
    >
      Test
    </button>
  );
};

const TestToolbarItem: ToolbarGroupItem = {
  key: 'test-button',
  Component: TestButtonComponent,
  onSelect: ({ editor }: { editor: LexicalEditor }) => {
    console.log('Test button clicked!');
  },
};

export default TestToolbarItem;

src/fields/defaultLexical.ts (Including the feature)
I'm including the feature in the features array using the recommended function approach with defaultFeatures:

import type { TextFieldSingleValidation } from 'payload'
import {
  lexicalEditor,
  type LinkFields,
  // ... other imports
} from '@payloadcms/richtext-lexical'

import { TestFeature } from '@/fields/lexical/features/TestFeature';

export const defaultLexical = lexicalEditor({
  features: ({ defaultFeatures }) => [
    ...defaultFeatures, // Include all default features
    TestFeature(),
  ],
})

(Note: I have other standard features and a custom LinkFeature config explicitly listed in my actual defaultLexical.ts, but I've also tried the ...defaultFeatures approach as shown above, and the custom button still doesn't appear. When explicitly listing features, I encountered "type not found" errors for standard nodes like "link" and "horizontalrule").

The server starts without errors related to these files, but the "Test" button simply does not render in the fixed toolbar in the editor. The console logs inside TestButtonComponent and onSelect are not triggered, suggesting the component is not being loaded or registered correctly on the client side.

This issue seems potentially related to the client-side bundling or registration of custom features and their components. I saw a related discussion about Lexical client-side issues here: #11337

Any guidance or suggestions on how to troubleshoot this further would be greatly appreciated!

"react": "19.1.0",
"@lexical/react": "0.28.0",
"payload-vercel-website-template": "link:",
"@payloadcms/ui": "3.33.0",
"@payloadcms/richtext-lexical": "3.33.0",

[AdonisVillanueva]

I got it to show up in both inline and fixed toolbar, now got another issue of it not triggering.

[jakubperdoch]

Nice work getting it to show in both the inline and fixed toolbars! How did you set that up?