F
Filament•3mo ago
howdu

v4 testing RichEditor inside form

Is there a simpler way of populating the editor inside fillForm? Without the array you get error from the beforeStateDehydrated
TypeError: Filament\Forms\Components\RichEditor::{closure:Filament\Forms\Components\RichEditor::setUp():303}(): Argument #2 ($rawState) must be of type ?array, string given 
<?php

use Filament\Forms\Components\RichEditor;
use Filament\Schemas\Schema;
use Filament\Tests\Fixtures\Livewire\Livewire;
use Filament\Tests\TestCase;

use Illuminate\Support\Str;
use function Filament\Tests\livewire;

uses(TestCase::class);

it('tests rich editor', function (): void {
    $text = Str::random();
    livewire(TestComponentWithRichEditor::class)
        ->fillForm([
            'content' => ['type' => 'doc', 'content' => [['type' => 'paragraph', 'content' => [['type' => 'text', 'text' => $text]]]]]
        ])
        ->call('save')
        ->assertSet('data', [
            'content' => '<p>' . $text . '</p>',
        ]);
});

class TestComponentWithRichEditor extends Livewire
{
    public $data = [];

    public function form(Schema $form): Schema
    {
        return $form
            ->schema([
                RichEditor::make('content')
                    ->required(),
            ])
            ->statePath('data');
    }

    public function save(): void
    {
        $this->data = $this->form->getState();
    }
}
<?php

use Filament\Forms\Components\RichEditor;
use Filament\Schemas\Schema;
use Filament\Tests\Fixtures\Livewire\Livewire;
use Filament\Tests\TestCase;

use Illuminate\Support\Str;
use function Filament\Tests\livewire;

uses(TestCase::class);

it('tests rich editor', function (): void {
    $text = Str::random();
    livewire(TestComponentWithRichEditor::class)
        ->fillForm([
            'content' => ['type' => 'doc', 'content' => [['type' => 'paragraph', 'content' => [['type' => 'text', 'text' => $text]]]]]
        ])
        ->call('save')
        ->assertSet('data', [
            'content' => '<p>' . $text . '</p>',
        ]);
});

class TestComponentWithRichEditor extends Livewire
{
    public $data = [];

    public function form(Schema $form): Schema
    {
        return $form
            ->schema([
                RichEditor::make('content')
                    ->required(),
            ])
            ->statePath('data');
    }

    public function save(): void
    {
        $this->data = $this->form->getState();
    }
}
2 Replies
howdu
howduOP•2mo ago
Bump
awcodes
awcodes•2mo ago
The form field has to be in the correct array structure that tiptap is expecting. So, not really an easy way. I am working on a plugin to add some missing features to the rich editor which will include the faker and converter functionality from my Tiptap editor plugin. But it’s not ready yet.

Did you find this page helpful?