Lexical Typography

About

payload-lexical-typography extends Payload's Lexical editor with typography controls that the default editor lacks. It ships five independent features you register through `lexicalEditor({ features })`: `TextColorFeature`, `TextSizeFeature`, `TextLetterSpacingFeature`, `TextLineHeightFeature`, and `TextFontFamilyFeature`. Each is built with Payload's `createServerFeature` helper and renders a toolbar dropdown in the admin rich text field. Each feature accepts a preset list plus a custom input. `TextColorFeature` takes a `colors` array (plain strings or `{value,label}` pairs), can switch between grid and list views, and can hide the native color picker to restrict authors to the predefined palette. The size, letter spacing, and line height features accept labeled presets with a `method` option of `"replace"` or `"combine"` to control whether custom values override or extend defaults, a `scroll` toggle for long preset lists, and a flag to disable the freeform input field. `TextFontFamilyFeature` lets you register font families, though you remain responsible for loading the corresponding web fonts and `@font-face` rules in your project. Rendering the styled markup outside the editor requires the bundled converters. From version 0.1.0 onward they live in the `/converters` submodule, not `/client`, and you spread `TypographyJSXConverters` or `TypographyHTMLConverters` into your existing converter functions. The color picker UI is powered by `react-colorful`. Peer dependencies target Payload 3.43 and React 19, and the package is MIT licensed.

Package info

Package name

payload-lexical-typography

Latest version

0.5.2

Unpacked size

458 kB

License

MIT

Weekly downloads

1.7k

Last publish

Nov 4, 2025