{"id":17705096,"url":"https://github.com/alessiogr/payload-plugin-lexical","last_synced_at":"2025-07-29T09:34:19.710Z","repository":{"id":63737934,"uuid":"570326999","full_name":"AlessioGr/payload-plugin-lexical","owner":"AlessioGr","description":"Extends payload CMS with Meta's lexical RichText editor - a much more advanced and customizable richtext editor","archived":false,"fork":false,"pushed_at":"2024-01-11T10:12:31.000Z","size":3016,"stargazers_count":184,"open_issues_count":18,"forks_count":9,"subscribers_count":10,"default_branch":"develop","last_synced_at":"2025-07-10T21:28:17.959Z","etag":null,"topics":["cms","lexical","payload","payload-plugin","payloadcms","richtext","richtexteditor"],"latest_commit_sha":null,"homepage":"","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/AlessioGr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["AlessioGr"]}},"created_at":"2022-11-24T22:53:46.000Z","updated_at":"2025-07-08T19:17:05.000Z","dependencies_parsed_at":"2024-01-11T12:30:56.085Z","dependency_job_id":"eca0b059-3545-4224-8c11-2ed661ae129c","html_url":"https://github.com/AlessioGr/payload-plugin-lexical","commit_stats":{"total_commits":134,"total_committers":3,"mean_commits":"44.666666666666664","dds":"0.27611940298507465","last_synced_commit":"21b8224bd49382f03655505eafed929df8cefb00"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AlessioGr/payload-plugin-lexical","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlessioGr%2Fpayload-plugin-lexical","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlessioGr%2Fpayload-plugin-lexical/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlessioGr%2Fpayload-plugin-lexical/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlessioGr%2Fpayload-plugin-lexical/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlessioGr","download_url":"https://codeload.github.com/AlessioGr/payload-plugin-lexical/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlessioGr%2Fpayload-plugin-lexical/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267662789,"owners_count":24123937,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["cms","lexical","payload","payload-plugin","payloadcms","richtext","richtexteditor"],"created_at":"2024-10-24T22:06:19.882Z","updated_at":"2025-07-29T09:34:19.608Z","avatar_url":"https://github.com/AlessioGr.png","language":"TypeScript","funding_links":["https://github.com/sponsors/AlessioGr"],"categories":[],"sub_categories":[],"readme":"# Payload Lexical Plugin ![GitHub Repo stars](https://img.shields.io/github/stars/AlessioGr/payload-plugin-lexical?label=Star%20this%20plugin%20%3C3\u0026style=social)\n\n![npm](https://img.shields.io/npm/v/payload-plugin-lexical?style=flat)\n![npm](https://img.shields.io/npm/dt/payload-plugin-lexical?style=flat)\n![NPM](https://img.shields.io/npm/l/payload-plugin-lexical)\n\nA plugin for [Payload CMS](https://github.com/payloadcms/payload) whichs adds a [lexical](https://lexical.dev/)-based richtext editor. Lexical is a lot nicer to use than Slate \u0026 more modern - it's also maintained by Meta.\n\nThis plugin only supports payload 1.x - not 2.x. While this plugin can still be used if you need extra features (tables, color picker, collapsibles etc. etc.), it will not receive further development or support. This plugin is also a **great reference for building new Features in the new Lexical editor in Payload core 2.0**. It has the same features as the lexical playground, but its API is closer to the [new Lexical Payload 2.0](https://github.com/payloadcms/payload/tree/main/packages/richtext-lexical) API (which was inspired by this plugin), which makes porting over Features easier.\n\n\u003e **Note: This plugin and the new lexical in Payload 2.0**\n\u003e Lexical is powering the [next richtext editor in Payload 2.0](https://github.com/payloadcms/payload/tree/main/packages/richtext-lexical) (I'm calling it Lexical core here). Future development is focused on the new lexical editor rather than the older Slate-based editor.\n\u003e\n\u003e There is a converter you can use to migrate everything from this plugin to the new lexical core. You can find more info about it here: https://payloadcms.com/docs/rich-text/lexical#migrating-from-payload-plugin-lexical\n\u003e\n\u003e Please note that this migrator only migrates **data**, not **features**. While lexical core is more stable and carefully crafted than this plugin, this plugin still has more features which lexical core does not have - for example tables or collapsibles.\n\u003e\n\u003e If you use these features, the data can be migrated over, but it will not be displayed inside the core lexical editor until you migrate the Feature over from this plugin to lexical core as well.\n\u003e \n\u003e Lexical 2.0 core will eventually get all the missing features, and thus the missing converters. The main focus right now is stability\n\nThis plugin already comes packed with a ton of features which the original 1.0 Slate editor doesn't have (from tables \u0026 markdown to stuff like speech-to-tech) - all customizable. It's also a lot easier to extend this editor and add new stuff to it!\n\n## Installation / How to use\n\nInstall the plugin using `yarn add payload-plugin-lexical`. You can find examples of how to use it below.\n\n**Minimum required payload version: 1.6.32**\n\n## Screenshots\n\n![203127349-2be29de4-aff3-4e13-9ebe-56be5fc3fc97 (1)](https://user-images.githubusercontent.com/70709113/204068103-a09f39e1-14e4-45fc-868a-68558380b74e.png)\n![203127640-caa1f279-1555-48e6-9465-8c441ea65149](https://user-images.githubusercontent.com/70709113/204068104-8dcf337a-b18e-47b8-8ba3-3e777a1f834c.png)\n\n### How I'm using it in production - customized \u0026 with some features turned on or off:\n\n![Arc 2023-03-20 at 01 34 05@2x](https://user-images.githubusercontent.com/70709113/226221050-f411c82c-6a66-49d0-94ef-1a7e9c1fdd22.jpg)\n\nhttps://user-images.githubusercontent.com/70709113/226221855-08e2efe3-3624-45a1-9ad2-8ff5cddbc843.mp4\n\n## Example - Basic\n\npayload.config.ts:\n\n```ts\nimport { buildConfig } from 'payload/config';\nimport { LexicalPlugin } from \"payload-plugin-lexical\";\n\nexport default buildConfig({\n  ...\n  plugins: [\n    LexicalPlugin({\n      // Only set this if you want to use the the AISuggest Feature\n      ai: {\n        openai_key: process.env.OPENAI_KEY,\n      },\n    }),\n  ],\n  typescript: {\n    outputFile: path.resolve(__dirname, 'payload-types.ts'),\n  },\n});\n\n```\n\nCollection config:\n\n```ts\nimport { CollectionConfig } from 'payload/types';\nimport { lexicalRichTextField } from 'payload-plugin-lexical';\n\nconst Lexical: CollectionConfig = {\n  slug: 'lexicalRichText',\n  admin: {\n    useAsTitle: 'title',\n  },\n  fields: [\n    {\n      name: 'title',\n      type: 'text',\n      required: true,\n    },\n    lexicalRichTextField({\n      name: 'lexicalRichTextEditor',\n      label: 'Lexical Rich Text Editor',\n    }),\n  ],\n};\n\nexport default Lexical;\n```\n\n## Example - more customization and own, custom node:\n\n```ts\nimport { CollectionConfig } from 'payload/types';\nimport {\n  lexicalRichTextField,\n  EquationsFeature,\n  EmojisFeature,\n  EmojiPickerFeature,\n  HorizontalRuleFeature,\n  FigmaFeature,\n  YouTubeFeature,\n  TwitterFeature,\n  SpeechToTextFeature,\n  ImportFeature,\n  ExportFeature,\n  ClearEditorFeature,\n  ReadOnlyModeFeature,\n  ConvertFromMarkdownFeature,\n  MentionsFeature,\n  TreeViewFeature,\n  KeywordsFeature,\n  AutoCompleteFeature,\n  CollapsibleFeature,\n  TypingPerfFeature,\n  PasteLogFeature,\n  TestRecorderFeature,\n  LinkFeature,\n  TableOfContentsFeature,\n  AISuggestFeature,\n} from 'payload-plugin-lexical';\n\nconst Lexical: CollectionConfig = {\n  slug: 'lexicalRichText',\n  admin: {\n    useAsTitle: 'title',\n  },\n  fields: [\n    {\n      name: 'title',\n      type: 'text',\n      required: true,\n    },\n    lexicalRichTextField({\n      name: 'lexicalRichTextEditor',\n      label: 'cool richtext editor',\n      localized: true,\n      editorConfigModifier: (defaultEditorConfig) =\u003e {\n        defaultEditorConfig.debug = false;\n        defaultEditorConfig.toggles.textColor.enabled = false;\n        defaultEditorConfig.toggles.textBackground.enabled = false;\n        defaultEditorConfig.toggles.fontSize.enabled = false;\n        defaultEditorConfig.toggles.font.enabled = false;\n        defaultEditorConfig.toggles.align.enabled = false;\n        defaultEditorConfig.toggles.tables.enabled = true;\n        defaultEditorConfig.toggles.tables.display = false;\n\n        // Optional: these are the default features. Feel free to customize them or remove the ones you do not like!\n        defaultEditorConfig.features = [\n          EquationsFeature({}), // LaTex (well KaTeX) equations\n          EmojisFeature({}), // Adds new Emoji nodes with new, different-looking emojis\n          EmojiPickerFeature({}), // Use in combination with EmojisPlugin. When you start typing \":\" it will show you different emojis you can use. They also look different!\n          HorizontalRuleFeature({}), // Horizontal rule in the editor.\n          FigmaFeature({}), // Figma Embed\n          YouTubeFeature({}), // YouTube Embed\n          TwitterFeature({}), // Twitter Embed\n          SpeechToTextFeature({}), // Adds a Speech-to-text button in the Actions menu (bottom right of the editor). When you click on it and speak, it converts the speech into text\n          ImportFeature({}), // Acion button: import\n          ExportFeature({}), // Acion button: export\n          ClearEditorFeature({}), // Adds a button in the action menu which clears the editor\n          ReadOnlyModeFeature({}), // Acion button: toggle read-only mode on or off\n          ConvertFromMarkdownFeature({}), // Acion button: convert from markdown\n          MentionsFeature({}), // Ability to mention someone when you type \"@\"\n          TreeViewFeature({ enabled: defaultEditorConfig.debug }), // If enabled, will show the node representation of the editor under the editor. Good for debugging\n          KeywordsFeature({}), // Highlights certain words\n          AutoCompleteFeature({}), // Autocompletes certain words while typing\n          CollapsibleFeature({}), // Adds a \"collapsible\" node\n          TypingPerfFeature({ enabled: defaultEditorConfig.debug }), // Some debug tool for performance testing\n          PasteLogFeature({ enabled: defaultEditorConfig.debug }), // Another debug tool\n          TestRecorderFeature({ enabled: defaultEditorConfig.debug }), // Another debug tool used for lexical core development, with which you can automatically generate tests\n          LinkFeature({}), // Obvious: hyperlinks! This includes the AutoLink plugin.\n          TableOfContentsFeature({ enabled: false }), // Shows a table of contents on the right hand-side of the screen\n          AISuggestFeature({}), // Make sure you set your openai key in the plugin config to be able to use it\n        ];\n\n        // A feature can consist of nodes, plugins, modals, toolbar elements and more! YourOwnCustomFeature must be of type \"Feature\"\n        defaultEditorConfig.features.push(YourOwnCustomFeature({}));\n\n        return defaultEditorConfig;\n      },\n    }),\n  ],\n};\n\nexport default Lexical;\n```\n\nThis example can also be found in the demo!\n\n## Serializing\n\nFeel free to use my serializer in the [serialize-example](https://github.com/AlessioGr/payload-plugin-lexical/tree/master/serialize-example) folder of this repo. Lexical is using bitwise operations for the node formats.\n\nThis currently serialized the most important stuff, but not everything. Feel free to contribute to it if you add more!\n\n## Idea list:\n\n- [x] Update slash commands to reflect the toolbar\n- [x] Add wordcount, charactercount \u0026 preview to the json output\n- [x] Commenting functionality\n- [x] Upload plugin/node captions\n- [ ] Ability to add custom fields to uploads like captions\n- [ ] (relationship node?)\n- [x] Fix internal collection search for internal link editor\n- [ ] Edit Upload Button\n- [ ] Improve design \u0026 UX of links. For example, clicking on the link button should open the link drawer immediately\n- [ ] (maybe?) lazy loading lexical editor to reduce load times. or maybe just the images?\n- [ ] New format/node: \"highlight\"/\"mark\" (WILL BE ADDED NATIVELY BY LEXICAL IN 0.7.8)\n- [x] Increase customizability \u0026 DX. Plugins should all be set in the config. Slash commands \u0026 Toolbar items should come from the same place.\n- [ ] Add ExcaliDraw\n- [x] Take a closer look at AutoLink. Is it necessary and what does it do?\n- [x] Make extranodes, extraplugins ... config options hold the ENTIRE nodes, and rename to just \"nodes\" and \"plugins\". Makes it easier to remove them and start from scratch, or to insert one at a special position, instead of just pushing it to the end. Especially useful for the Toolbar plugin.\n- [x] extraFloatingToolbarElements\n- [ ] Implement [Table Cell Background Color PR](https://github.com/facebook/lexical/commit/6a239b6ae1807e9dae1b434482b5ecd9513e77fa#diff-72b3aff11ff90536142b8a0276cfaabb008ba453bea2f992f7fdb173a8d1c516)\n\n## Updating lexical\n\nSince this is based on their playground, you gotta upstream their changes. Then, the following is additionally copied over outside of the playground package - needs to be considered in lexical updates as well:\n\n- https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/LexicalOnChangePlugin.ts\n- https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/LexicalLinkPlugin.ts\n- https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/LexicalAutoLinkPlugin.ts\n- https://github.com/facebook/lexical/tree/main/packages/shared\n- https://github.com/facebook/lexical/blob/main/packages/lexical-link/src/index.ts\n- And of course their playground package\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falessiogr%2Fpayload-plugin-lexical","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falessiogr%2Fpayload-plugin-lexical","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falessiogr%2Fpayload-plugin-lexical/lists"}