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 payload-lexical-typography
   # OR
   npm install 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 "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

Option	Type	Default	Description
colors	Array<string> | Array<{value: string, label: string}>	[]	Defines the color palette available in the color picker's predefined section. Each color should be a valid CSS color value (hex, RGB, etc.). If you pass values with label, it will automatically switch to list view instead.
colorPicker	boolean	true	By setting this to false, you can hide the color picker, limiting users to selecting only from the predefined colors.
listView	boolean	undefined	Allows you to manually switch from list to grid view and vice versa. It has higher priority than colors array type.

TextSizeFeature

Option	Type	Default	Description
sizes	Array<{value: string, label: string}>	[]	Specifies the font size presets available in the size picker. Each size needs both a display label and CSS value.
method	"replace" | "combine"	"replace"	Determines whether custom sizes replace the defaults ("replace") or are added to them ("combine").
scroll	boolean	true	If true, sizes over the first 4 will be accessible via scrolling within a fixed container height. If false, the picker will expand vertically to accommodate all size options.
customSize	boolean	true	By setting this to false, you hide the custom size input field, limiting users to selecting only from the predefined size options.

TextLetterSpacingFeature

Option	Type	Default	Description
spacings	Array<{value: string, label: string}>	[]	Specifies the letter spacing presets available in the letter spacing picker. Each spacing needs both a display label and CSS value.
method	"replace" | "combine"	"replace"	Determines whether custom spacings replace the defaults ("replace") or are added to them ("combine").
scroll	boolean	true	If true, spacings over the first 4 will be accessible via scrolling within a fixed container height. If false, the picker will expand vertically to accommodate all spacing options.
customSpacing	boolean	true	By setting this to false, you hide the custom letter spacing input field, limiting users to selecting only from the predefined spacing options.

TextLineHeightFeature

Option	Type	Default	Description
lineHeights	Array<{value: string, label: string}>	[]	Specifies the line height presets available in the line height picker. Each line height needs both a display label and CSS value.
method	"replace" | "combine"	"replace"	Determines whether custom sizes replace the defaults ("replace") or are added to them ("combine").
scroll	boolean	true	If true, line heights over the first 4 will be accessible via scrolling within a fixed container height. If false, the picker will expand vertically to accommodate all line height options.
customLineHeight	boolean	true	By setting this to false, you hide the custom line height input field, limiting users to selecting only from the predefined line height options.

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.

Option	Type	Default	Description
fontFamilies	Array<{value: string, label: string}>	[]	Specifies the font family presets available in the font family picker. Each font family needs both a display label and CSS value.
method	"replace" | "combine"	"replace"	Determines whether custom font families replace the defaults ("replace") or are added to them ("combine").
scroll	boolean	true	If true, font families over the first 4 will be accessible via scrolling within a fixed container height. If false, the picker will expand vertically to accommodate all font family options.
customFontFamily	boolean	true	By setting this to false, you hide the custom font family input field, limiting users to selecting only from the predefined font family options.

Shared Options

Option	Type	Default	Description
hideAttribution	boolean	false	Controls visibility of attribution. If using in commercial products or for profit, consider supporting the author or keeping the attribution.

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!