{"id":47699175,"url":"https://github.com/k11k-labs/strapi-plugin-better-blocks","last_synced_at":"2026-04-02T17:02:13.748Z","repository":{"id":343782433,"uuid":"1178757715","full_name":"k11k-labs/strapi-plugin-better-blocks","owner":"k11k-labs","description":"An enhanced Rich Text (Blocks) editor for Strapi v5 with inline text color, background highlight, and more.","archived":false,"fork":false,"pushed_at":"2026-03-28T11:39:38.000Z","size":571,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-28T15:30:39.782Z","etag":null,"topics":["blocks-editor","color-picker","custom-field","headless-cms","open-source","react","rich-text-editor","slate","strapi","strapi-plugin","strapi-v5","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@k11k/strapi-plugin-better-blocks","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/k11k-labs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-11T10:38:31.000Z","updated_at":"2026-03-28T11:38:41.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/k11k-labs/strapi-plugin-better-blocks","commit_stats":null,"previous_names":["k11k-labs/strapi-plugin-better-blocks"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/k11k-labs/strapi-plugin-better-blocks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k11k-labs%2Fstrapi-plugin-better-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k11k-labs%2Fstrapi-plugin-better-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k11k-labs%2Fstrapi-plugin-better-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k11k-labs%2Fstrapi-plugin-better-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/k11k-labs","download_url":"https://codeload.github.com/k11k-labs/strapi-plugin-better-blocks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k11k-labs%2Fstrapi-plugin-better-blocks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31311012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["blocks-editor","color-picker","custom-field","headless-cms","open-source","react","rich-text-editor","slate","strapi","strapi-plugin","strapi-v5","typescript"],"created_at":"2026-04-02T17:01:14.981Z","updated_at":"2026-04-02T17:02:13.741Z","avatar_url":"https://github.com/k11k-labs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eStrapi - Better Blocks Plugin\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eAn enhanced Rich Text (Blocks) editor for Strapi v5 with inline text color, background highlight, and more.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@k11k/strapi-plugin-better-blocks\"\u003e\n    \u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/@k11k/strapi-plugin-better-blocks.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@k11k/strapi-plugin-better-blocks\"\u003e\n    \u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/@k11k/strapi-plugin-better-blocks.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/k11k-labs/strapi-plugin-better-blocks/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"license\" src=\"https://img.shields.io/npm/l/@k11k/strapi-plugin-better-blocks.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./docs/better-blocks-demo.gif\" alt=\"Better Blocks Demo\" width=\"800\" /\u003e\n\u003c/p\u003e\n\n---\n\n## Table of Contents\n\n1. [Features](#features)\n2. [Compatibility](#compatibility)\n3. [Installation](#installation)\n4. [Configuration](#configuration)\n5. [Usage](#usage)\n6. [Custom Color Presets](#custom-color-presets)\n7. [Media Embeds (CSP Configuration)](#media-embeds-csp-configuration)\n8. [Frontend Rendering](#frontend-rendering)\n9. [Contributing](#contributing)\n10. [License](#license)\n\n---\n\n## Features\n\n- **Inline Text Color** \u0026mdash; Apply foreground color to selected text from a configurable palette\n- **Background Highlight** \u0026mdash; Apply background color to selected text for highlighting\n- **Live Preview Button** \u0026mdash; The toolbar button reflects the currently active text and highlight colors\n- **Customizable Palettes** \u0026mdash; Define custom color presets per field via Content-Type Builder\n- **Dark \u0026 Light Mode** \u0026mdash; Fully compatible with both Strapi themes\n- **Drop-in Replacement** \u0026mdash; Works as a custom field alongside the native Rich Text (Blocks) field\n- **Nested Lists** \u0026mdash; Infinitely nestable ordered and unordered lists with per-level format switching (Tab to indent, Shift+Tab to outdent)\n- **To-do Lists** \u0026mdash; Checkbox list items with click-to-toggle and strikethrough on checked items\n- **Tables** \u0026mdash; Insert tables with header row, add/remove rows and columns via hover toolbar\n- **Media Embeds** \u0026mdash; Insert YouTube and Vimeo videos with thumbnail preview in editor (iframe on frontend)\n- **Horizontal Line** \u0026mdash; Insert `\u003chr\u003e` dividers between content blocks\n- **Text Alignment** \u0026mdash; Per-block left, center, right, and justify alignment\n- **Undo / Redo** \u0026mdash; Toolbar buttons wired to Slate's built-in history\n- **Remove Formatting** \u0026mdash; One-click button to strip all marks from selected text\n- **Link Decorators** \u0026mdash; \"Open in new tab\" option with `target=\"_blank\"` and `rel=\"noopener noreferrer\"`\n- **Word \u0026 Character Count** \u0026mdash; Live counter displayed at the bottom of the editor\n- **Line Height** \u0026mdash; Per-block line spacing control (1, 1.15, 1.5, 2, 2.5, 3)\n- **Indent / Outdent** \u0026mdash; Block-level indentation buttons (up to 6 levels)\n- **Image Captions** \u0026mdash; Editable figcaption below images\n- **Image Alignment** \u0026mdash; Left, center, and right alignment for images via hover buttons\n- **Emoji Picker** \u0026mdash; Searchable popup grid with 130+ common emojis\n- **Special Characters** \u0026mdash; Categorized picker for currency, math, arrows, Greek, legal symbols and more\n- **Find and Replace** \u0026mdash; Search with real-time highlighting (yellow for all matches, orange for active), prev/next navigation, replace and replace all\n- **Font Family** \u0026mdash; Inline font family selector (Arial, Georgia, Times New Roman, and more)\n- **Font Size** \u0026mdash; Inline font size selector (10px to 48px)\n- **Slash Commands** \u0026mdash; Type `/` to open a block insertion menu with search, arrow key navigation, and Enter to select\n- **Auto Text Transformations** \u0026mdash; Automatic symbol replacement on space: `(c)` \u0026rarr; \u0026copy;, `1/2` \u0026rarr; \u0026frac12;, `--` \u0026rarr; \u0026mdash;, `-\u003e` \u0026rarr; \u0026rarr;, and more\n- **Editor Placeholder** \u0026mdash; \"Start writing...\" placeholder shown when the editor is empty\n- **Responsive Toolbar** \u0026mdash; Wraps to multiple rows on smaller screens so all buttons remain accessible\n- **Full Blocks Editor** \u0026mdash; Paragraphs, headings, lists, links, quotes, code blocks, and all standard text modifiers (bold, italic, underline, strikethrough, code, uppercase, superscript, subscript)\n\n## Compatibility\n\n| Strapi Version | Plugin Version |\n| -------------- | -------------- |\n| v5.x           | v0.1.x         |\n\n## Installation\n\n```bash\n# Using yarn\nyarn add @k11k/strapi-plugin-better-blocks\n\n# Using npm\nnpm install @k11k/strapi-plugin-better-blocks\n```\n\nAfter installation, rebuild your Strapi admin panel:\n\n```bash\nyarn build\n# or\nnpm run build\n```\n\n## Configuration\n\n### 1. Enable the plugin\n\nAdd the plugin to your Strapi configuration in `config/plugins.ts` (or `config/plugins.js`):\n\n```ts\n// config/plugins.ts\nexport default () =\u003e ({\n  'better-blocks': {\n    enabled: true,\n  },\n});\n```\n\n### 2. Restart Strapi\n\n```bash\nyarn develop\n```\n\n### 3. Add a Better Blocks field\n\n1. Go to **Content-Type Builder**\n2. Select or create a content type\n3. Click **Add new field**\n4. Switch to the **CUSTOM** tab\n5. Select **Better Blocks**\n6. Configure the field name and color settings\n7. Save and wait for Strapi to restart\n\n## Usage\n\nOnce added to a content type, the Better Blocks field provides an enhanced Rich Text editor with:\n\n### Text Color\n\n1. Select text in the editor\n2. Click the **A** button in the toolbar\n3. Switch to the **Text** tab\n4. Choose a color from the palette\n5. Click **Remove color** to reset\n\n### Background Highlight\n\n1. Select text in the editor\n2. Click the **A** button in the toolbar\n3. Switch to the **Highlight** tab\n4. Choose a background color from the palette\n5. Click **Remove highlight** to reset\n\nThe toolbar button shows a live preview of the active colors \u0026mdash; the icon color reflects the text color, and the button background reflects the highlight color.\n\n## Custom Color Presets\n\nYou can customize both text and background color palettes per field in the Content-Type Builder:\n\n### Text Colors\n\nIn the field's **Base settings**:\n\n- **Disable default text colors** \u0026mdash; Check to replace default colors with your own\n- **Custom text color presets** \u0026mdash; One color per line in `Label:#HEX` format\n\nExample:\n\n```\nBlack:#000000\nWhite:#FFFFFF\nBrand Red:#E53E3E\nBrand Blue:#3182CE\n```\n\n### Background Colors\n\n- **Disable default background colors** \u0026mdash; Check to replace default highlights with your own\n- **Custom background color presets** \u0026mdash; One color per line in `Label:#HEX` format\n\nExample:\n\n```\nWarning:#FED7D7\nInfo:#BEE3F8\nSuccess:#C6F6D5\nNeutral:#EDF2F7\n```\n\n### Default Palettes\n\n**Text colors:** Teal, Dark, Gray, Light Gray, Silver, Medium Gray, White\n\n**Background colors:** Yellow, Green, Blue, Pink, Purple, Orange, Gray, Teal, Red, Cyan\n\n## Media Embeds (CSP Configuration)\n\nIf you use the **media embed** feature (YouTube / Vimeo), you need to update your Strapi security middleware to allow loading thumbnails and video iframes.\n\nIn `config/middlewares.ts`:\n\n```ts\nexport default [\n  'strapi::logger',\n  'strapi::errors',\n  {\n    name: 'strapi::security',\n    config: {\n      contentSecurityPolicy: {\n        directives: {\n          'img-src': [\"'self'\", 'data:', 'blob:', 'https://img.youtube.com'],\n          'media-src': [\"'self'\", 'data:', 'blob:'],\n          'frame-src': [\n            \"'self'\",\n            'https://www.youtube.com',\n            'https://player.vimeo.com',\n          ],\n        },\n      },\n    },\n  },\n  'strapi::cors',\n  'strapi::poweredBy',\n  'strapi::query',\n  'strapi::body',\n  'strapi::session',\n  'strapi::favicon',\n  'strapi::public',\n];\n```\n\nWithout 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.\n\n## Frontend Rendering\n\nTo render Better Blocks content in your React frontend, use the companion renderer:\n\n```bash\n# Using yarn\nyarn add @k11k/better-blocks-react-renderer\n\n# Using npm\nnpm install @k11k/better-blocks-react-renderer\n```\n\n```tsx\nimport { BlocksRenderer } from '@k11k/better-blocks-react-renderer';\n\nconst MyComponent = ({ content }) =\u003e {\n  return \u003cBlocksRenderer content={content} /\u003e;\n};\n```\n\nThe renderer supports all Better Blocks features including text colors, background highlights, images, and all standard block types.\n\nSee the [@k11k/better-blocks-react-renderer](https://github.com/k11k-labs/better-blocks-react-renderer) repository for full documentation.\n\n## Requirements\n\n- **Node.js** \u0026ge; 20.0.0\n- **Strapi** v5.x\n- **Slate** 0.94.1 (bundled with Strapi)\n\n## Contributing\n\nContributions are welcome! The easiest way to get started is with Docker:\n\n```bash\n# Clone the repository\ngit clone https://github.com/k11k-labs/strapi-plugin-better-blocks.git\ncd strapi-plugin-better-blocks\n\n# Start the playground with Docker\ndocker compose up\n```\n\nThis will automatically build the plugin and start a Strapi v5 app (SQLite) at `http://localhost:1337/admin`.\n\nOn first launch, create an admin account, then go to **Content-Type Builder** \u0026rarr; **Add new field** \u0026rarr; **CUSTOM** tab \u0026rarr; **Better Blocks** to try it out.\n\n### Development workflow\n\n1. Make changes to the plugin source in `admin/src/` or `server/src/`\n2. Restart the container to rebuild and pick up changes:\n   ```bash\n   docker compose restart\n   ```\n\n### Full reset\n\nTo wipe the database and node_modules and start fresh:\n\n```bash\ndocker compose down -v \u0026\u0026 docker compose up\n```\n\n### Without Docker\n\n```bash\nyarn install \u0026\u0026 yarn build\ncd playground/strapi \u0026\u0026 npm install \u0026\u0026 npm run develop\n```\n\n## Community \u0026 Support\n\n- [GitHub Issues](https://github.com/k11k-labs/strapi-plugin-better-blocks/issues) \u0026mdash; Bug reports and feature requests\n- [GitHub Discussions](https://github.com/k11k-labs/strapi-plugin-better-blocks/discussions) \u0026mdash; Questions and ideas\n\n## License\n\n[MIT License](LICENSE) \u0026copy; [k11k-labs](https://github.com/k11k-labs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk11k-labs%2Fstrapi-plugin-better-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fk11k-labs%2Fstrapi-plugin-better-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk11k-labs%2Fstrapi-plugin-better-blocks/lists"}