Filament Editorjs Laravel Package

Getting Started

rahmanramsi/filament-editorjs provides an Editor.js block-editor field for Filament forms. Treat v2.0.0-beta.2 as a pre-release: pin the exact version and verify compatibility with your Filament major version before adopting it in production.

Minimal setup:

composer require rahmanramsi/filament-editorjs:2.0.0-beta.2
php artisan vendor:publish --tag=filament-editorjs-config
php artisan filament:assets
php artisan optimize:clear

Look first at:

1. The package README for the current field namespace and config options.
2. composer.json for Filament/PHP version constraints.
3. The published config file for profiles, tools, and upload settings.
4. The field class itself if you need to verify statePath behavior in nested forms.

First use case: replace a plain textarea or rich-text field with block-based content in a Filament resource form.

use RahmanRamsi\FilamentEditorjs\Forms\Components\EditorJs;

EditorJs::make('content')
    ->label('Body')
    ->required();

Store Editor.js output as JSON:

// migration
$table->json('content')->nullable();

// model
protected $casts = [
    'content' => 'array',
];

Implementation Patterns

Basic resource form field

Use the package field directly in a Filament resource form. Keep the model attribute JSON-castable so Filament can hydrate and dehydrate the block document cleanly.

public static function form(Form $form): Form
{
    return $form->schema([
        EditorJs::make('content')
            ->label('Article body')
            ->columnSpanFull(),
    ]);
}

Store JSON, render server-side

Editor.js persists a document shape such as { "time": ..., "blocks": [...], "version": ... }. Do not assume it is HTML. Render blocks explicitly or use an Editor.js renderer on the frontend.

@foreach (($article->content['blocks'] ?? []) as $block)
    @switch($block['type'])
        @case('paragraph')
            <p>{!! $block['data']['text'] ?? '' !!}</p>
            @break

        @case('header')
            <h2>{!! $block['data']['text'] ?? '' !!}</h2>
            @break
    @endswitch
@endforeach

Sanitize any HTML-bearing block data before output.

Profiles and custom tools

Use package profiles/config to define which Editor.js tools are available per field. Keep separate profiles for simple article bodies versus richer pages with embeds, lists, or uploads. If you add custom Editor.js tools, register their JS assets and validate their stored block shapes server-side.

Nested forms, repeaters, and builders

The v2.0.0-beta.2 release restores statePath, which is the Filament mechanism that binds a field to the correct nested state path. If you use this field inside repeaters, builders, relation forms, or custom nested layouts, use beta.2 or newer rather than beta.1. Test hydration and dehydration explicitly in those layouts.

Actions and modals

The field can be used inside Filament action forms and modal forms, but verify asset loading and state binding there. Editor.js is a JS-heavy field; modal reopen cycles can expose stale-instance or missing-state issues.

Testing

In Livewire/Filament tests, assert the stored JSON structure rather than exact editor HTML. For nested forms, assert that the value lands under the expected state path after submit.

Livewire::test(ArticleResource\Pages\CreateArticle::class)
    ->fillForm([
        'content' => [
            'blocks' => [
                ['type' => 'paragraph', 'data' => ['text' => 'Hello']],
            ],
        ],
    ])
    ->call('create')
    ->assertHasNoFormErrors();

Gotchas and Tips

• Pin the beta version. v2.0.0-beta.2 is pre-release software. Use 2.0.0-beta.2 exactly, or a stable v1 release if you do not need v2.
• statePath regression fixed. The only listed change in beta.2 is restoring statePath. If you tried beta.1 and saw values not binding correctly in nested forms, repeaters, or custom layouts, retest on beta.2.
• Do not treat content as HTML. Editor.js stores structured JSON. Rendering it as raw HTML will produce empty or broken output. Parse blocks and render each block type.
• Sanitize block output. Paragraph/header/list block data may contain user-authored markup. Use a sanitizer before rendering, especially for text fields.
• Validate meaningful content. An empty Editor.js document can still be a non-null JSON object. Add a custom rule if a field must contain at least one non-empty block.
• Handle null and legacy data. Existing records may have null, plain HTML, or old JSON shapes. Normalize before passing data to the field or renderer.
• Publish and rebuild assets. After install or upgrade, run php artisan filament:assets and clear cached config/views. Missing Editor.js JS/CSS usually shows up as an empty editor shell.
• Check CSP and asset URLs. Strict Content Security Policy or non-standard asset hosting can block Editor.js scripts, tools, or upload endpoints.
• File uploads need extra configuration. If you enable image/file blocks, configure storage disk, upload endpoint, validation, and public URLs. Test uploads outside the editor as well.
• Config cache quirks. After changing the package config, run php artisan config:clear or php artisan optimize:clear; stale config is a common source of “my profile/tool change did nothing.”
• Upgrade from v1 carefully. There is no detailed migration note in this release. Back up content, test field hydration, and compare stored JSON shapes before rolling v2 across existing data.
• Debug in the browser first. For editor rendering issues, inspect browser console and network requests for missing assets. For persistence issues, inspect the Livewire component payload and confirm the expected statePath.
• Extension points to watch. Profiles/tools config, custom Editor.js tool registration, upload settings, and custom Blade rendering are the main places to adapt the package rather than editing vendor files.