he introduction of the Lexical editor allows developers to create custom plugins for rich text editing in Payload CMS. This article explains how to add custom toolbar buttons and new block types.
Key Features:
- Creating a custom Lexical editor plugin
- Adding new toolbar actions
- Extending block elements
Example: Custom Toolbar Button in Lexical Editor
Adding a custom highlight button to the Lexical editor:
import { $createTextNode, $getSelection } from ‘lexical’;
const highlightCommand = {
execute: () => {
const selection = $getSelection();
if (selection) {
selection.insertNodes([$createTextNode(‘🔥 Highlighted Text 🔥’)]);
}
},
};
export default highlightCommand;
Registering it in the Payload CMS config:
import highlightCommand from ‘./highlightCommand’;
export default {
components: {
beforeLexicalToolbar: [highlightCommand],
},
};