PayloadCMS lexical-editor typography extension plugin
npm install payload-lexical-typographyThis plugin extends the default Payload Lexical editor functionality by adding more customization options for text elements.
- 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.
To get plugin up and running, follow these steps:
1. Install package from NPM:
``bash`
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:
`ts
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
`tsx
import { TypographyJSXConverters } from "payload-lexical-typography/converters";
const jsxConverters: JSXConvertersFunction
...defaultConverters,
...TypographyJSXConverters,
});
`
### HTML Converters
For HTML converter, use TypographyHTMLConverters instead of TypographyJSXConverters, from /converters submodule.
| 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. |
| 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. |
| 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. |
| 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. |
ā ļø 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. |
| 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. |
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any ideas on how this plugin can be improved, please feel free to open an issue or a pull request.
If you have any questions, feel free to reach out to me at adrianmaj1122@gmail.com, or on my Linkedin profile Adrian Maj.
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!