# 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:** ```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 }) => ({ ...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](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 [adrianmaj1122@gmail.com](mailto:adrianmaj1122@gmail.com), or on my Linkedin profile [Adrian Maj](https://www.linkedin.com/in/adrianmaj/). ## Support the Project If you find this plugin useful, you can support the project by giving it a ⭐️, or [buying me a coffee ☕️](https://buymeacoffee.com/adrianmaj), for motivation to keep working on it. Thanks for your support!

Editors Plugins