Using Paver as a Filament custom field

Today I wanted to see if I could get Paver working within Filament. It was pretty easy, let's go through the steps.

Install and setup Paver

First, you install and setup Paver as you would for any Laravel application.

Creating a Filament custom form field

Once you have done that, you can create a custom Filament form field:

php artisan make:form-field PaverEditor

Filament will generate a field component class and a view template. The latter should have the following contents:

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        wire:model="{{ $getStatePath() }}"
        x-modelable="_content"
        x-data="{
            _content: '',
            init() {
                document.addEventListener('paver-change', (event) => {
                    this._content = event.detail.content
                })
            }
        }" x-ref="paver" class="border rounded-lg bg-white text-gray-950" wire:ignore>
        <x-paver :config="['showSaveButton' => false]" :content="json_decode($getRecord()->{$field->getName()} ?? '', true)" />
    </div>
</x-dynamic-component>

Fixing issue with Alpine.js

Lastly, both Paver and Filament (through Livewire) use Alpine.js. To prevent it from being loaded twice, we need to disable it in the Paver config file. You can do that by setting alpine to false in the paver config file.

An unfortunate side effect is that Alpine is now not loaded in the editor frame anymore, but we still need it there. I recommend adding it through the frame head HTML. You can do this by creating a Blade view template and setting that as the head_template in the Paver config file.