Laravel filament livewireコンポーネント内でRichEditorを使用する

概要

Laravel filamentの使用でRichEditorを適切な場所に配置したり、デザイン面の実装で必要なため調査

前提

Laravel filamentのインストールとLivewireコンポーネントを用意する必要がある。

実装手順

1.Livewireコンポーネント内でRichEditorの使用を明記とInteractsWithFormsトレイトを使用。(use文で記載)

// Livewireコンポーネントの作成 コマンド
php artisan make:livewire CustomerChat // 今回はCustomerChatという名前(適切な名前)で作成 

namespace App\Livewire; 
use Livewire\Component;
use Filament\Forms\Components\RichEditor;

class CustomerChat extends Component implements HasForms
{
    use InteractsWithForms;
     
    protected function getFormSchema(): array
    {
        return [
            RichEditor::make('message')
                ->label('label文字設定')
                ->placeholder('フォーム内の文字を自由に入力')
                ->required(), // フォームに空白を許容しない設定
        ];
    }
}

2.renderメソッド内でビューにフォーム情報を渡す。

       public function render()
   {
       return view('livewire.指定ファイル名', ['form' => $this->form]);
   }

3.ビューファイルで呼び出して使用する。

// 対象ファイル例 resources/views/filament/chat-resource/pages/ファイル.blade.php に記載
  @livewire('livewire内の対象ファイル') 

// 対象ファイル例 resources/views/livewire/ファイル.blade.php に記載
  {{ $this->form }}

4.対象ページで表示の確認

5.投稿できるか確認
投稿はできましたが、タグも表示される現象発生。
ChatAIで確認すると、「RichEditorコンポーネントはデフォルトでHTMLを生成するため、入力内容が<P>タグで囲まれます。」とのこと。

6.リッチテキストの設定が保存されるようにフォーム処理にフォント対応した処理を追加。<P>タグで囲まれる現象とフォントの変更可能に改善

    
    protected function getFormSchema(): array
    {
        return [
            RichEditor::make('message')
                ->label('')
                ->placeholder('メッセージを入力してください。')
                ->toolbarButtons(['bold', 'italic', 'underline', 'strike', 'link', 'heading', 'quote', 'code', 'bulletedList', 'numberedList', 'blockQuote', 'horizontalRule', 'undo', 'redo', 'fontColor', 'fontBackGroundColor', 'fontSize', 'fontFamily'])
                ->required(),
        ];
    }

       public function submit()
    {
        $validatedData = $this->validate();

        Chat::create([
            'user_id' => auth()->id(),
            'message' =>  $validatedData['message'],
        ]);

        $this->reset('message');

        session()->flash('success', 'メッセージが送信されました。');
    }

余談

下記のようにFilamentフレームワークを使用してフォームを定義すると登録処理は可能でデザインも適用されますが、カスタマイズするには制限がある模様。

use Filament\Forms\Form;
use Filament\Forms\Components\RichEditor;

class CustomerResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Components\TextInput::make('カラム名')->label('名前(性)')->required(),
                Components\TextInput::make('カラム名')->label('名前(名)')->required(),
                Components\RichEditor::make('カラム名')->label('コンテキスト')->required(),
        ]);
    }
}

まとめ

今回の記事はRichEditorの場合にしていますが、通常フォームや他の項目でも応用できるのではと思います。
近頃Laravel filamentのキャッチアップを進めており工数の削減などに役立つと感じる反面、カスタマイズをするには工夫などが必要なため使うにはちゃんと知見を溜めていく必要があると感じました。