Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/adrianmaj/payload-lexical-typography

Payload plugin for extending lexical typography options (Text color, Font size, Letter spacing, Line height, Font Family)
https://github.com/adrianmaj/payload-lexical-typography

lexical mit mit-license nextjs open-source payload payload-plugin payloadcms react typescript

Last synced: 3 months ago
JSON representation

Payload plugin for extending lexical typography options (Text color, Font size, Letter spacing, Line height, Font Family)

Awesome Lists containing this project

README 

          
# 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!