This plugin extends the default Payload Lexical editor functionality by adding more customization options for text elements.
To get plugin up and running, follow these steps:
bash
pnpm add payload-lexical-typography
# OR
npm install payload-lexical-typography
```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(), ]; }, }); ```
⚠️ 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 }) => ({ ...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!
$ claude mcp add payload-lexical-typography \
-- python -m otcore.mcp_server <graph>