README

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

⚖️ License

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

pdik / filamenteditorjs

Maintainers

Details