Filament EditorJS

A FilamentPHP custom form field that brings the power of Editor.js into your admin panel. This field gives you a clean, structured, block-style content editor that stores data as JSON — perfect for building rich, flexible, and API-friendly content.

Ideal for use cases like blog posts, lesson content, FAQs, or any interface where structured content matters.

---

✨ Features

• ⚡ Block-style editing with Editor.js
• 🔌 Drop-in Filament form component
• 🧱 Configurable tools (header, paragraph, image, list, and more)
• 💾 Stores content as JSON
• 🎨 Built for the TALL stack (Livewire + Alpine.js)
• 🔧 Publishable config and views for customization

---

📦 Installation

Install via composer:

composer require pdik/filamenteditorjs

Optional:

php artisan vendor:publish --tag="filamenteditorjs-config"
php artisan vendor:publish --tag="filamenteditorjs-views"

---

🛠 Usage

Inside a Filament form:

use Pdik\FilamentEditorJs\Forms\Components\EditorJs;

\Pdik\FilamentEditorJs\FilamentEditorJs::make('content')
    ->label('Content')
    ->tools(['header', 'paragraph', 'list', 'image']) // Optional: configure active tools
    ->required(),

The field will save content as Editor.js-compatible JSON. You can render it on the frontend with the official Editor.js renderer or any custom solution. Soon there will be a Entry Field to Render the content

🧪 Testing

composer test

---

🗺 Coming Soon

• 🧾 EditorJS Entries Viewer – Easily preview and manage stored Editor.js content inside your Filament panel
• 🧩 Tool plugin registration via config
• 🛡️ Validation support for Editor.js blocks
• 📄 Blade component renderer for frontend use

---

📜 Changelog

Please see CHANGELOG for more information on what has changed recently.

---

🤝 Contributing

Please see CONTRIBUTING for details.

---

🔐 Security

Please review our security policy for guidelines on reporting vulnerabilities.

---

👥 Credits

• Pepijn Dik
• All Contributors

---

⚖️ License

The MIT License (MIT). See License File for more information.