Payload Lexical Typography

This plugin extends the default Payload Lexical editor functionality by adding more customization options for text elements.

Core Features 🧩

• Text color - ability to change text color to predefined colors or selected color using color picker.
• Font size - ability to change font size to predefined sizes or custom size using input field.
• Letter spacing - ability to change letter spacing to predefined values or custom value using input field.
• Line height - ability to change line height to predefined values or custom value using input field.
• Font family - ability to change font family to predefined fonts or custom font using input field.

Installation 📦

To get plugin up and running, follow these steps:

1. Install package from NPM:

   pnpm add @renzodas/payload-lexical-typography
   # OR
   npm install @renzodas/payload-lexical-typography

2. Add features you want to include in your lexical editor config, you can also pass additional props:

   import { lexicalEditor } from "@payloadcms/richtext-lexical";
   import {
     TextColorFeature,
     TextSizeFeature,
     TextLetterSpacingFeature,
     TextLineHeightFeature,
     TextFontFamilyFeature,
   } from "@renzodas/payload-lexical-typography";
   
   lexicalEditor({
     features: () => {
       return [
         TextColorFeature({
           colors: ["#FFFFFF", "#000000", "#FF0000", "#00FF00", "#0000FF"],
         }),
         TextSizeFeature(),
         TextLetterSpacingFeature(),
         TextLineHeightFeature(),
         TextFontFamilyFeature(),
       ];
     },
   });

3. Add converters to your RichText component

   ⚠️ Warning: Starting from version 0.1.0, converters must be imported from the /converters submodule instead of /client.

   JSX Converters

   import { TypographyJSXConverters } from "payload-lexical-typography/converters";
   
   const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters }) => ({
     ...defaultConverters,
     ...TypographyJSXConverters,
   });

   HTML Converters

   For HTML converter, use TypographyHTMLConverters instead of TypographyJSXConverters, from /converters submodule.

Configuration 🛠

TextColorFeature

TextSizeFeature

TextLetterSpacingFeature

TextLineHeightFeature

TextFontFamilyFeature

⚠️ Warning: If the fonts aren't default system fonts, you still need to import them to your project layout, if you want to see them in the editor you have to add proper @font-face rules in your custom.scss file too.

Shared Options

License 📜

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing 🤝

If you have any ideas on how this plugin can be improved, please feel free to open an issue or a pull request.

Contact 📧

If you have any questions, feel free to reach out to me at [email protected], or on my Linkedin profile Adrian Maj.

Support the Project

If you find this plugin useful, you can support the project by giving it a ⭐️, or buying me a coffee ☕️, for motivation to keep working on it. Thanks for your support!