import { buildConfig } from 'payload/config'; import { LexicalPlugin } from "payload-plugin-lexical"; export default buildConfig({ ... plugins: [ LexicalPlugin({ // Only set this if you want to use the the AISuggest Feature ai: { openai_key: process.env.OPENAI_KEY, }, }), ], typescript: { outputFile: path.resolve(__dirname, 'payload-types.ts'), }, });

import { CollectionConfig } from 'payload/types'; import { lexicalRichTextField } from 'payload-plugin-lexical'; const Lexical: CollectionConfig = { slug: 'lexicalRichText', admin: { useAsTitle: 'title', }, fields: [ { name: 'title', type: 'text', required: true, }, lexicalRichTextField({ name: 'lexicalRichTextEditor', label: 'Lexical Rich Text Editor', }), ], }; export default Lexical;

import { CollectionConfig } from 'payload/types'; import { lexicalRichTextField, EquationsFeature, EmojisFeature, EmojiPickerFeature, HorizontalRuleFeature, FigmaFeature, YouTubeFeature, TwitterFeature, SpeechToTextFeature, ImportFeature, ExportFeature, ClearEditorFeature, ReadOnlyModeFeature, ConvertFromMarkdownFeature, MentionsFeature, TreeViewFeature, KeywordsFeature, AutoCompleteFeature, CollapsibleFeature, TypingPerfFeature, PasteLogFeature, TestRecorderFeature, LinkFeature, TableOfContentsFeature, AISuggestFeature, } from 'payload-plugin-lexical'; const Lexical: CollectionConfig = { slug: 'lexicalRichText', admin: { useAsTitle: 'title', }, fields: [ { name: 'title', type: 'text', required: true, }, lexicalRichTextField({ name: 'lexicalRichTextEditor', label: 'cool richtext editor', localized: true, editorConfigModifier: (defaultEditorConfig) => { defaultEditorConfig.debug = false; defaultEditorConfig.toggles.textColor.enabled = false; defaultEditorConfig.toggles.textBackground.enabled = false; defaultEditorConfig.toggles.fontSize.enabled = false; defaultEditorConfig.toggles.font.enabled = false; defaultEditorConfig.toggles.align.enabled = false; defaultEditorConfig.toggles.tables.enabled = true; defaultEditorConfig.toggles.tables.display = false; // Optional: these are the default features. Feel free to customize them or remove the ones you do not like! defaultEditorConfig.features = [ EquationsFeature({}), // LaTex (well KaTeX) equations EmojisFeature({}), // Adds new Emoji nodes with new, different-looking emojis EmojiPickerFeature({}), // Use in combination with EmojisPlugin. When you start typing ":" it will show you different emojis you can use. They also look different! HorizontalRuleFeature({}), // Horizontal rule in the editor. FigmaFeature({}), // Figma Embed YouTubeFeature({}), // YouTube Embed TwitterFeature({}), // Twitter Embed SpeechToTextFeature({}), // Adds a Speech-to-text button in the Actions menu (bottom right of the editor). When you click on it and speak, it converts the speech into text ImportFeature({}), // Acion button: import ExportFeature({}), // Acion button: export ClearEditorFeature({}), // Adds a button in the action menu which clears the editor ReadOnlyModeFeature({}), // Acion button: toggle read-only mode on or off ConvertFromMarkdownFeature({}), // Acion button: convert from markdown MentionsFeature({}), // Ability to mention someone when you type "@" TreeViewFeature({ enabled: defaultEditorConfig.debug }), // If enabled, will show the node representation of the editor under the editor. Good for debugging KeywordsFeature({}), // Highlights certain words AutoCompleteFeature({}), // Autocompletes certain words while typing CollapsibleFeature({}), // Adds a "collapsible" node TypingPerfFeature({ enabled: defaultEditorConfig.debug }), // Some debug tool for performance testing PasteLogFeature({ enabled: defaultEditorConfig.debug }), // Another debug tool TestRecorderFeature({ enabled: defaultEditorConfig.debug }), // Another debug tool used for lexical core development, with which you can automatically generate tests LinkFeature({}), // Obvious: hyperlinks! This includes the AutoLink plugin. TableOfContentsFeature({ enabled: false }), // Shows a table of contents on the right hand-side of the screen AISuggestFeature({}), // Make sure you set your openai key in the plugin config to be able to use it ]; // A feature can consist of nodes, plugins, modals, toolbar elements and more! YourOwnCustomFeature must be of type "Feature" defaultEditorConfig.features.push(YourOwnCustomFeature({})); return defaultEditorConfig; }, }), ], }; export default Lexical;