https://github.com/k11k-labs/strapi-plugin-better-blocks
An enhanced Rich Text (Blocks) editor for Strapi v5 with inline text color, background highlight, and more.
https://github.com/k11k-labs/strapi-plugin-better-blocks
blocks-editor color-picker custom-field headless-cms open-source react rich-text-editor slate strapi strapi-plugin strapi-v5 typescript
Last synced: 3 months ago
JSON representation
An enhanced Rich Text (Blocks) editor for Strapi v5 with inline text color, background highlight, and more.
- Host: GitHub
- URL: https://github.com/k11k-labs/strapi-plugin-better-blocks
- Owner: k11k-labs
- License: mit
- Created: 2026-03-11T10:38:31.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-03-28T11:39:38.000Z (3 months ago)
- Last Synced: 2026-03-28T15:30:39.782Z (3 months ago)
- Topics: blocks-editor, color-picker, custom-field, headless-cms, open-source, react, rich-text-editor, slate, strapi, strapi-plugin, strapi-v5, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@k11k/strapi-plugin-better-blocks
- Size: 558 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Strapi - Better Blocks Plugin
An enhanced Rich Text (Blocks) editor for Strapi v5 with inline text color, background highlight, and more.
---
## Table of Contents
1. [Features](#features)
2. [Compatibility](#compatibility)
3. [Installation](#installation)
4. [Configuration](#configuration)
5. [Usage](#usage)
6. [Custom Color Presets](#custom-color-presets)
7. [Media Embeds (CSP Configuration)](#media-embeds-csp-configuration)
8. [Frontend Rendering](#frontend-rendering)
9. [Contributing](#contributing)
10. [License](#license)
---
## Features
- **Inline Text Color** — Apply foreground color to selected text from a configurable palette
- **Background Highlight** — Apply background color to selected text for highlighting
- **Live Preview Button** — The toolbar button reflects the currently active text and highlight colors
- **Customizable Palettes** — Define custom color presets per field via Content-Type Builder
- **Dark & Light Mode** — Fully compatible with both Strapi themes
- **Drop-in Replacement** — Works as a custom field alongside the native Rich Text (Blocks) field
- **Nested Lists** — Infinitely nestable ordered and unordered lists with per-level format switching (Tab to indent, Shift+Tab to outdent)
- **To-do Lists** — Checkbox list items with click-to-toggle and strikethrough on checked items
- **Tables** — Insert tables with header row, add/remove rows and columns via hover toolbar
- **Media Embeds** — Insert YouTube and Vimeo videos with thumbnail preview in editor (iframe on frontend)
- **Horizontal Line** — Insert `
` dividers between content blocks
- **Text Alignment** — Per-block left, center, right, and justify alignment
- **Undo / Redo** — Toolbar buttons wired to Slate's built-in history
- **Remove Formatting** — One-click button to strip all marks from selected text
- **Link Decorators** — "Open in new tab" option with `target="_blank"` and `rel="noopener noreferrer"`
- **Word & Character Count** — Live counter displayed at the bottom of the editor
- **Line Height** — Per-block line spacing control (1, 1.15, 1.5, 2, 2.5, 3)
- **Indent / Outdent** — Block-level indentation buttons (up to 6 levels)
- **Image Captions** — Editable figcaption below images
- **Image Alignment** — Left, center, and right alignment for images via hover buttons
- **Emoji Picker** — Searchable popup grid with 130+ common emojis
- **Special Characters** — Categorized picker for currency, math, arrows, Greek, legal symbols and more
- **Find and Replace** — Search with real-time highlighting (yellow for all matches, orange for active), prev/next navigation, replace and replace all
- **Font Family** — Inline font family selector (Arial, Georgia, Times New Roman, and more)
- **Font Size** — Inline font size selector (10px to 48px)
- **Slash Commands** — Type `/` to open a block insertion menu with search, arrow key navigation, and Enter to select
- **Auto Text Transformations** — Automatic symbol replacement on space: `(c)` → ©, `1/2` → ½, `--` → —, `->` → →, and more
- **Editor Placeholder** — "Start writing..." placeholder shown when the editor is empty
- **Responsive Toolbar** — Wraps to multiple rows on smaller screens so all buttons remain accessible
- **Full Blocks Editor** — Paragraphs, headings, lists, links, quotes, code blocks, and all standard text modifiers (bold, italic, underline, strikethrough, code, uppercase, superscript, subscript)
## Compatibility
| Strapi Version | Plugin Version |
| -------------- | -------------- |
| v5.x | v0.1.x |
## Installation
```bash
# Using yarn
yarn add @k11k/strapi-plugin-better-blocks
# Using npm
npm install @k11k/strapi-plugin-better-blocks
```
After installation, rebuild your Strapi admin panel:
```bash
yarn build
# or
npm run build
```
## Configuration
### 1. Enable the plugin
Add the plugin to your Strapi configuration in `config/plugins.ts` (or `config/plugins.js`):
```ts
// config/plugins.ts
export default () => ({
'better-blocks': {
enabled: true,
},
});
```
### 2. Restart Strapi
```bash
yarn develop
```
### 3. Add a Better Blocks field
1. Go to **Content-Type Builder**
2. Select or create a content type
3. Click **Add new field**
4. Switch to the **CUSTOM** tab
5. Select **Better Blocks**
6. Configure the field name and color settings
7. Save and wait for Strapi to restart
## Usage
Once added to a content type, the Better Blocks field provides an enhanced Rich Text editor with:
### Text Color
1. Select text in the editor
2. Click the **A** button in the toolbar
3. Switch to the **Text** tab
4. Choose a color from the palette
5. Click **Remove color** to reset
### Background Highlight
1. Select text in the editor
2. Click the **A** button in the toolbar
3. Switch to the **Highlight** tab
4. Choose a background color from the palette
5. Click **Remove highlight** to reset
The toolbar button shows a live preview of the active colors — the icon color reflects the text color, and the button background reflects the highlight color.
## Custom Color Presets
You can customize both text and background color palettes per field in the Content-Type Builder:
### Text Colors
In the field's **Base settings**:
- **Disable default text colors** — Check to replace default colors with your own
- **Custom text color presets** — One color per line in `Label:#HEX` format
Example:
```
Black:#000000
White:#FFFFFF
Brand Red:#E53E3E
Brand Blue:#3182CE
```
### Background Colors
- **Disable default background colors** — Check to replace default highlights with your own
- **Custom background color presets** — One color per line in `Label:#HEX` format
Example:
```
Warning:#FED7D7
Info:#BEE3F8
Success:#C6F6D5
Neutral:#EDF2F7
```
### Default Palettes
**Text colors:** Teal, Dark, Gray, Light Gray, Silver, Medium Gray, White
**Background colors:** Yellow, Green, Blue, Pink, Purple, Orange, Gray, Teal, Red, Cyan
## Media Embeds (CSP Configuration)
If you use the **media embed** feature (YouTube / Vimeo), you need to update your Strapi security middleware to allow loading thumbnails and video iframes.
In `config/middlewares.ts`:
```ts
export default [
'strapi::logger',
'strapi::errors',
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
directives: {
'img-src': ["'self'", 'data:', 'blob:', 'https://img.youtube.com'],
'media-src': ["'self'", 'data:', 'blob:'],
'frame-src': [
"'self'",
'https://www.youtube.com',
'https://player.vimeo.com',
],
},
},
},
},
'strapi::cors',
'strapi::poweredBy',
'strapi::query',
'strapi::body',
'strapi::session',
'strapi::favicon',
'strapi::public',
];
```
Without this, YouTube thumbnails will be blocked by the Content Security Policy in the Strapi admin panel. The `frame-src` directive is needed if you render the embeds as iframes on your frontend while previewing in Strapi.
## Frontend Rendering
To render Better Blocks content in your React frontend, use the companion renderer:
```bash
# Using yarn
yarn add @k11k/better-blocks-react-renderer
# Using npm
npm install @k11k/better-blocks-react-renderer
```
```tsx
import { BlocksRenderer } from '@k11k/better-blocks-react-renderer';
const MyComponent = ({ content }) => {
return ;
};
```
The renderer supports all Better Blocks features including text colors, background highlights, images, and all standard block types.
See the [@k11k/better-blocks-react-renderer](https://github.com/k11k-labs/better-blocks-react-renderer) repository for full documentation.
## Requirements
- **Node.js** ≥ 20.0.0
- **Strapi** v5.x
- **Slate** 0.94.1 (bundled with Strapi)
## Contributing
Contributions are welcome! The easiest way to get started is with Docker:
```bash
# Clone the repository
git clone https://github.com/k11k-labs/strapi-plugin-better-blocks.git
cd strapi-plugin-better-blocks
# Start the playground with Docker
docker compose up
```
This will automatically build the plugin and start a Strapi v5 app (SQLite) at `http://localhost:1337/admin`.
On first launch, create an admin account, then go to **Content-Type Builder** → **Add new field** → **CUSTOM** tab → **Better Blocks** to try it out.
### Development workflow
1. Make changes to the plugin source in `admin/src/` or `server/src/`
2. Restart the container to rebuild and pick up changes:
```bash
docker compose restart
```
### Full reset
To wipe the database and node_modules and start fresh:
```bash
docker compose down -v && docker compose up
```
### Without Docker
```bash
yarn install && yarn build
cd playground/strapi && npm install && npm run develop
```
## Community & Support
- [GitHub Issues](https://github.com/k11k-labs/strapi-plugin-better-blocks/issues) — Bug reports and feature requests
- [GitHub Discussions](https://github.com/k11k-labs/strapi-plugin-better-blocks/discussions) — Questions and ideas
## License
[MIT License](LICENSE) © [k11k-labs](https://github.com/k11k-labs)