{"id":29027992,"url":"https://github.com/adrianmaj/payload-lexical-typography","last_synced_at":"2025-06-26T07:05:16.598Z","repository":{"id":279252272,"uuid":"938188280","full_name":"AdrianMaj/payload-lexical-typography","owner":"AdrianMaj","description":"Payload plugin for extending lexical typography options (Text color, Font size, Letter spacing, Line height, Font Family)","archived":false,"fork":false,"pushed_at":"2025-06-25T20:01:57.000Z","size":206,"stargazers_count":74,"open_issues_count":3,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-25T20:04:30.403Z","etag":null,"topics":["lexical","mit","mit-license","nextjs","open-source","payload","payload-plugin","payloadcms","react","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/payload-lexical-typography","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AdrianMaj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-24T15:02:55.000Z","updated_at":"2025-06-25T19:59:54.000Z","dependencies_parsed_at":"2025-02-24T16:40:54.676Z","dependency_job_id":"e062dbc5-b545-4475-b737-8c921bb74b40","html_url":"https://github.com/AdrianMaj/payload-lexical-typography","commit_stats":null,"previous_names":["adrianmaj/payload-lexical-typography"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AdrianMaj/payload-lexical-typography","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianMaj%2Fpayload-lexical-typography","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianMaj%2Fpayload-lexical-typography/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianMaj%2Fpayload-lexical-typography/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianMaj%2Fpayload-lexical-typography/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AdrianMaj","download_url":"https://codeload.github.com/AdrianMaj/payload-lexical-typography/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianMaj%2Fpayload-lexical-typography/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262018773,"owners_count":23245622,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lexical","mit","mit-license","nextjs","open-source","payload","payload-plugin","payloadcms","react","typescript"],"created_at":"2025-06-26T07:05:15.991Z","updated_at":"2025-06-26T07:05:16.587Z","avatar_url":"https://github.com/AdrianMaj.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/adrianmaj"],"categories":[],"sub_categories":[],"readme":"# Payload Lexical Typography\n\nThis plugin extends the default Payload Lexical editor functionality by adding more customization options for text elements.\n\n## Core Features 🧩\n\n- **Text color** - ability to change text color to predefined colors or selected color using color picker.\n- **Font size** - ability to change font size to predefined sizes or custom size using input field.\n- **Letter spacing** - ability to change letter spacing to predefined values or custom value using input field.\n- **Line height** - ability to change line height to predefined values or custom value using input field.\n- **Font family** - ability to change font family to predefined fonts or custom font using input field.\n\n## Installation 📦\n\nTo get plugin up and running, follow these steps:\n\n1. **Install package from NPM:**\n\n   ```bash\n   pnpm add payload-lexical-typography\n   # OR\n   npm install payload-lexical-typography\n   ```\n\n2. **Add features you want to include in your lexical editor config, you can also pass additional props:**\n\n   ```ts\n   import { lexicalEditor } from \"@payloadcms/richtext-lexical\";\n   import {\n     TextColorFeature,\n     TextSizeFeature,\n     TextLetterSpacingFeature,\n     TextLineHeightFeature,\n     TextFontFamilyFeature,\n   } from \"payload-lexical-typography\";\n\n   lexicalEditor({\n     features: () =\u003e {\n       return [\n         TextColorFeature({\n           colors: [\"#FFFFFF\", \"#000000\", \"#FF0000\", \"#00FF00\", \"#0000FF\"],\n         }),\n         TextSizeFeature(),\n         TextLetterSpacingFeature(),\n         TextLineHeightFeature(),\n         TextFontFamilyFeature(),\n       ];\n     },\n   });\n   ```\n\n3. **Add converters to your RichText component**\n\n   ⚠️ Warning: Starting from version **0.1.0**, converters **must** be imported from the `/converters` submodule instead of `/client`.\n\n   ### JSX Converters\n\n   ```tsx\n   import { TypographyJSXConverters } from \"payload-lexical-typography/converters\";\n\n   const jsxConverters: JSXConvertersFunction\u003cNodeTypes\u003e = ({ defaultConverters }) =\u003e ({\n     ...defaultConverters,\n     ...TypographyJSXConverters,\n   });\n   ```\n\n   ### HTML Converters\n\n   For HTML converter, use `TypographyHTMLConverters` instead of `TypographyJSXConverters`, from `/converters` submodule.\n\n## Configuration 🛠\n\n### TextColorFeature\n\n\u003ctable style=\"width: 100%\"\u003e\n  \u003ctr\u003e\n    \u003cth style=\"width: 15%\"\u003eOption\u003c/th\u003e\n    \u003cth style=\"width: 25%\"\u003eType\u003c/th\u003e\n    \u003cth style=\"width: 25%\"\u003eDefault\u003c/th\u003e\n    \u003cth style=\"width: 40%\"\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ecolors\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eArray\u0026lt;string\u0026gt; | Array\u003c{value: string, label: string}\u003e\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e[]\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eDefines 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.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ecolorPicker\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eBy setting this to \u003ccode\u003efalse\u003c/code\u003e, you can hide the color picker, limiting users to selecting only from the predefined colors.\u003c/td\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003elistView\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eAllows you to manually switch from list to grid view and vice versa. It has higher priority than colors array type.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### TextSizeFeature\n\n\u003ctable style=\"width: 100%\"\u003e\n  \u003ctr\u003e\n    \u003cth style=\"width: 15%\"\u003eOption\u003c/th\u003e\n    \u003cth style=\"width: 25%\"\u003eType\u003c/th\u003e\n    \u003cth style=\"width: 25%\"\u003eDefault\u003c/th\u003e\n    \u003cth style=\"width: 40%\"\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003esizes\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eArray\u0026lt;{value: string, label: string}\u0026gt;\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e[]\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eSpecifies the font size presets available in the size picker. Each size needs both a display label and CSS value.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003emethod\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e\"replace\" | \"combine\"\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e\"replace\"\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eDetermines whether custom sizes replace the defaults (\u003ccode\u003e\"replace\"\u003c/code\u003e) or are added to them (\u003ccode\u003e\"combine\"\u003c/code\u003e).\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003escroll\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, sizes over the first 4 will be accessible via scrolling within a fixed container height. If \u003ccode\u003efalse\u003c/code\u003e, the picker will expand vertically to accommodate all size options.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ecustomSize\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eBy setting this to \u003ccode\u003efalse\u003c/code\u003e, you hide the custom size input field, limiting users to selecting only from the predefined size options.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### TextLetterSpacingFeature\n\n\u003ctable style=\"width: 100%\"\u003e\n  \u003ctr\u003e\n    \u003cth style=\"width: 15%\"\u003eOption\u003c/th\u003e\n    \u003cth style=\"width: 25%\"\u003eType\u003c/th\u003e\n    \u003cth style=\"width: 25%\"\u003eDefault\u003c/th\u003e\n    \u003cth style=\"width: 40%\"\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003espacings\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eArray\u0026lt;{value: string, label: string}\u0026gt;\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e[]\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eSpecifies the letter spacing presets available in the letter spacing picker. Each spacing needs both a display label and CSS value.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003emethod\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e\"replace\" | \"combine\"\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e\"replace\"\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eDetermines whether custom spacings replace the defaults (\u003ccode\u003e\"replace\"\u003c/code\u003e) or are added to them (\u003ccode\u003e\"combine\"\u003c/code\u003e).\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003escroll\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, spacings over the first 4 will be accessible via scrolling within a fixed container height. If \u003ccode\u003efalse\u003c/code\u003e, the picker will expand vertically to accommodate all spacing options.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ecustomSpacing\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eBy setting this to \u003ccode\u003efalse\u003c/code\u003e, you hide the custom letter spacing input field, limiting users to selecting only from the predefined spacing options.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### TextLineHeightFeature\n\n\u003ctable style=\"width: 100%\"\u003e\n  \u003ctr\u003e\n    \u003cth style=\"width: 15%\"\u003eOption\u003c/th\u003e\n    \u003cth style=\"width: 25%\"\u003eType\u003c/th\u003e\n    \u003cth style=\"width: 25%\"\u003eDefault\u003c/th\u003e\n    \u003cth style=\"width: 40%\"\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003elineHeights\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eArray\u0026lt;{value: string, label: string}\u0026gt;\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e[]\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eSpecifies the line height presets available in the line height picker. Each line height needs both a display label and CSS value.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003emethod\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e\"replace\" | \"combine\"\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e\"replace\"\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eDetermines whether custom sizes replace the defaults (\u003ccode\u003e\"replace\"\u003c/code\u003e) or are added to them (\u003ccode\u003e\"combine\"\u003c/code\u003e).\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003escroll\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, line heights over the first 4 will be accessible via scrolling within a fixed container height. If \u003ccode\u003efalse\u003c/code\u003e, the picker will expand vertically to accommodate all line height options.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ecustomLineHeight\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eBy setting this to \u003ccode\u003efalse\u003c/code\u003e, you hide the custom line height input field, limiting users to selecting only from the predefined line height options.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### TextFontFamilyFeature\n\n⚠️ **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.\n\n\u003ctable style=\"width: 100%\"\u003e\n  \u003ctr\u003e\n    \u003cth style=\"width: 15%\"\u003eOption\u003c/th\u003e\n    \u003cth style=\"width: 25%\"\u003eType\u003c/th\u003e\n    \u003cth style=\"width: 25%\"\u003eDefault\u003c/th\u003e\n    \u003cth style=\"width: 40%\"\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003efontFamilies\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eArray\u0026lt;{value: string, label: string}\u0026gt;\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e[]\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eSpecifies the font family presets available in the font family picker. Each font family needs both a display label and CSS value.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003emethod\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e\"replace\" | \"combine\"\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e\"replace\"\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eDetermines whether custom font families replace the defaults (\u003ccode\u003e\"replace\"\u003c/code\u003e) or are added to them (\u003ccode\u003e\"combine\"\u003c/code\u003e).\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003escroll\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eIf \u003ccode\u003etrue\u003c/code\u003e, font families over the first 4 will be accessible via scrolling within a fixed container height. If \u003ccode\u003efalse\u003c/code\u003e, the picker will expand vertically to accommodate all font family options.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ecustomFontFamily\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eBy setting this to \u003ccode\u003efalse\u003c/code\u003e, you hide the custom font family input field, limiting users to selecting only from the predefined font family options.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Shared Options\n\n\u003ctable style=\"width: 100%\"\u003e\n  \u003ctr\u003e\n    \u003cth style=\"width: 15%\"\u003eOption\u003c/th\u003e\n    \u003cth style=\"width: 25%\"\u003eType\u003c/th\u003e\n    \u003cth style=\"width: 25%\"\u003eDefault\u003c/th\u003e\n    \u003cth style=\"width: 40%\"\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ehideAttribution\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eControls visibility of attribution. \u003cstrong\u003eIf using in commercial products or for profit\u003c/strong\u003e, consider \u003ca href=\"#support-the-project\"\u003esupporting the author\u003c/a\u003e or keeping the attribution.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## License 📜\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Contributing 🤝\n\nIf you have any ideas on how this plugin can be improved, please feel free to open an issue or a pull request.\n\n## Contact 📧\n\nIf 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/).\n\n## Support the Project\n\nIf 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!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrianmaj%2Fpayload-lexical-typography","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrianmaj%2Fpayload-lexical-typography","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrianmaj%2Fpayload-lexical-typography/lists"}