https://github.com/rubn-g/payloadcms-lexical-ext
Extended lexical editor features for Payload CMS (Text color, highlight, block background, embeds)
https://github.com/rubn-g/payloadcms-lexical-ext
headless-cms lexical lexical-editor payload payload-plugin payloadcms plugin richtext
Last synced: 6 months ago
JSON representation
Extended lexical editor features for Payload CMS (Text color, highlight, block background, embeds)
- Host: GitHub
- URL: https://github.com/rubn-g/payloadcms-lexical-ext
- Owner: rubn-g
- License: mit
- Created: 2024-12-24T15:02:29.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-01-27T21:41:08.000Z (8 months ago)
- Last Synced: 2025-04-02T11:07:58.270Z (6 months ago)
- Topics: headless-cms, lexical, lexical-editor, payload, payload-plugin, payloadcms, plugin, richtext
- Language: TypeScript
- Homepage:
- Size: 1.56 MB
- Stars: 41
- Watchers: 4
- Forks: 9
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Payload CMS lexical editor extend
## 🚀 Overview
Ideal for content creators and developers who want to enrich their text content with more visual appeal.
This 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:
- **Text Color** – Customize the color of selected text.
- **Text Highlight** – Highlight text with a background color.
- **Block Background Color** – Apply background colors to entire blocks of content.
- **Embed videos** - Add embedded youtube or vimeo videos to the content of the editor
**New features will be added** - Create issues for new features or create them yourself and create a PR to share it with the community
## 📸 Screenshots
### Text Color Feature
### Text Highlight Feature
### Block Background Feature
### Embed Video Feature
## 📦 Installation
```bash
npm install payloadcms-lexical-ext
```
or
```bash
yarn add payloadcms-lexical-ext
```
## 🛠️ Usage
1. Import the features you want to use:
```javascript
import { BgColorFeature, HighlightColorFeature, TextColorFeature, YoutubeFeature, VimeoFeature } from 'payloadcms-lexical-ext';
```
2. If you're using any of the color features, import required css
```javascript
import 'payloadcms-lexical-ext/client/client.css'
```
3. Add features to your lexical editor configuration:
```javascript
lexicalEditor({
features: [
...defaultEditorFeatures,
...YourFeatures...
TextColorFeature(),
HighlightColorFeature(),
BgColorFeature(),
YoutubeFeature(),
VimeoFeature()
]
});
```
4. Add JSX or HTML converters
4.1 JSX Converters
components/RichText/index.tsx
```javascript
import { JSXConverters } from 'payloadcms-lexical-ext'
const jsxConverters: JSXConvertersFunction = ({ defaultConverters }) => ({
...defaultConverters,
...JSXConverters
})
```
4.2 HTML Converters
```javascript
import { consolidateHTMLConverters, convertLexicalToHTML, sanitizeServerEditorConfig } from '@payloadcms/richtext-lexical'
import { HTMLConverters } from 'payloadcms-lexical-ext'
...
const sanitizedEditorConfig = await sanitizeServerEditorConfig(editorConfig, req.payload.config)
await convertLexicalToHTML({
converters: [
...HTMLConverters,
...consolidateHTMLConverters({ editorConfig: sanitizedEditorConfig })
],
data: jsonEditorContent,
req,
})
```
## ⚙️ Configuration Options
The plugin comes with several customizable options:
```javascript
TextColorFeature({
colors: [{
type: 'button',
label: 'Custom color',
color: '#1155aa'
}]
});
```
## 🧑💻 Contributing
Contributions are welcome! To get started:
1. Fork the repository.
2. Create a new branch for your feature.
3. Submit a pull request.
## 📝 License
This project is licensed under the [MIT License](./LICENSE).
## 📬 Contact
For questions or suggestions, feel free to open an issue or reach out to the Payload CMS community.