{"id":23501357,"url":"https://github.com/rubn-g/payloadcms-lexical-ext","last_synced_at":"2025-04-09T12:03:56.630Z","repository":{"id":269584327,"uuid":"907855621","full_name":"rubn-g/payloadcms-lexical-ext","owner":"rubn-g","description":"Extended lexical editor features for Payload CMS (Text color, highlight, block background, embeds)","archived":false,"fork":false,"pushed_at":"2025-01-27T21:41:08.000Z","size":1631,"stargazers_count":41,"open_issues_count":14,"forks_count":9,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-02T11:07:58.270Z","etag":null,"topics":["headless-cms","lexical","lexical-editor","payload","payload-plugin","payloadcms","plugin","richtext"],"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/rubn-g.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2024-12-24T15:02:29.000Z","updated_at":"2025-03-28T22:28:37.000Z","dependencies_parsed_at":"2025-01-27T22:24:57.139Z","dependency_job_id":"f8b4d0a2-227f-4f3a-b58f-3b74ca819f19","html_url":"https://github.com/rubn-g/payloadcms-lexical-ext","commit_stats":null,"previous_names":["rubn-g/payloadcms-lexical-ext"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubn-g%2Fpayloadcms-lexical-ext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubn-g%2Fpayloadcms-lexical-ext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubn-g%2Fpayloadcms-lexical-ext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubn-g%2Fpayloadcms-lexical-ext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rubn-g","download_url":"https://codeload.github.com/rubn-g/payloadcms-lexical-ext/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036064,"owners_count":21037092,"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":["headless-cms","lexical","lexical-editor","payload","payload-plugin","payloadcms","plugin","richtext"],"created_at":"2024-12-25T07:15:53.986Z","updated_at":"2025-04-09T12:03:56.590Z","avatar_url":"https://github.com/rubn-g.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Payload CMS lexical editor extend\n\n## 🚀 Overview\n\nIdeal for content creators and developers who want to enrich their text content with more visual appeal.\u003cbr /\u003e\n\nThis plugin adds new features to the **Payload CMS lexical editor**. You can use any of the features on its own or all of them togehter:\n\n- **Text Color** – Customize the color of selected text.\n- **Text Highlight** – Highlight text with a background color.\n- **Block Background Color** – Apply background colors to entire blocks of content.\n- **Embed videos** - Add embedded youtube or vimeo videos to the content of the editor\n\n**New features will be added** - Create issues for new features or create them yourself and create a PR to share it with the community\n\n## 📸 Screenshots\n### Text Color Feature\n![Text Color Example](https://raw.githubusercontent.com/rubn-g/payloadcms-lexical-ext/refs/heads/main/screenshots/screenshot-3.png)\n\n### Text Highlight Feature\n![Text Highlight Example](https://raw.githubusercontent.com/rubn-g/payloadcms-lexical-ext/refs/heads/main/screenshots/screenshot-2.png)\n\n### Block Background Feature\n![Block Background Example](https://raw.githubusercontent.com/rubn-g/payloadcms-lexical-ext/refs/heads/main/screenshots/screenshot-1.png)\n\n### Embed Video Feature\n![Embed Video Example](https://raw.githubusercontent.com/rubn-g/payloadcms-lexical-ext/refs/heads/main/screenshots/screenshot-4.png)\n\n## 📦 Installation\n```bash\nnpm install payloadcms-lexical-ext\n```\n\nor\n\n```bash\nyarn add payloadcms-lexical-ext\n```\n\n## 🛠️ Usage\n1. Import the features you want to use:\n```javascript\nimport { BgColorFeature, HighlightColorFeature, TextColorFeature, YoutubeFeature, VimeoFeature } from 'payloadcms-lexical-ext';\n```\n\n2. If you're using any of the color features, import required css\n```javascript\nimport 'payloadcms-lexical-ext/client/client.css'\n```\n\n3. Add features to your lexical editor configuration:\n```javascript\nlexicalEditor({\n\tfeatures: [\n\t\t...defaultEditorFeatures,\n\t\t...YourFeatures...\n\t\tTextColorFeature(),\n\t\tHighlightColorFeature(),\n\t\tBgColorFeature(),\n\t\tYoutubeFeature(),\n\t\tVimeoFeature()\n\t]\n});\n```\n\n4. Add JSX or HTML converters\n\n\t4.1 JSX Converters\n\n\tcomponents/RichText/index.tsx\n\n\t```javascript\n\timport { JSXConverters } from 'payloadcms-lexical-ext'\n\n\tconst jsxConverters: JSXConvertersFunction\u003cNodeTypes\u003e = ({ defaultConverters }) =\u003e ({\n\t\t...defaultConverters,\n\t\t...JSXConverters\n\t})\n\t```\n\n\t4.2 HTML Converters\n\n\t```javascript\n\timport { consolidateHTMLConverters, convertLexicalToHTML, sanitizeServerEditorConfig } from '@payloadcms/richtext-lexical'\n\timport { HTMLConverters } from 'payloadcms-lexical-ext'\n\n\t...\n\n\tconst sanitizedEditorConfig = await sanitizeServerEditorConfig(editorConfig, req.payload.config)\n\n\tawait convertLexicalToHTML({\n\t\tconverters: [\n\t\t\t...HTMLConverters,\n\t\t\t...consolidateHTMLConverters({ editorConfig: sanitizedEditorConfig })\n\t\t],\n\t\tdata: jsonEditorContent,\n\t\treq,\n\t})\n\t```\n\n## ⚙️ Configuration Options\nThe plugin comes with several customizable options:\n\n```javascript\nTextColorFeature({\n\tcolors: [{\n\t\ttype: 'button',\n\t\tlabel: 'Custom color',\n\t\tcolor: '#1155aa'\n\t}]\n});\n```\n\n## 🧑‍💻 Contributing\nContributions are welcome! To get started:\n1. Fork the repository.\n2. Create a new branch for your feature.\n3. Submit a pull request.\n\n## 📝 License\nThis project is licensed under the [MIT License](./LICENSE).\n\n## 📬 Contact\nFor questions or suggestions, feel free to open an issue or reach out to the Payload CMS community.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubn-g%2Fpayloadcms-lexical-ext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frubn-g%2Fpayloadcms-lexical-ext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubn-g%2Fpayloadcms-lexical-ext/lists"}