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.
• Line height - ability to change line height to predefined values or custom value using input field.
• Font family (coming soon)

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, TextLineHeightFeature } from "payload-lexical-typography";
   
   lexicalEditor({
     features: () => {
       return [
         TextColorFeature({
           colors: ["#FFFFFF", "#000000", "#FF0000", "#00FF00", "#0000FF"],
         }),
         TextSizeFeature(),
         TextLineHeightFeature(),
       ];
     },
   });

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.
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.

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.
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.

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!