Filament•4mo ago

v4 Rich Text Editor

First off, I am very excited about the v4 release. Big kudos to all the hard work from the Filament team. I watched Nuno's livestream with Dan today and all the updates are awesome. I am very excited for the new Rich Text editor and custom blocks. I migrated an app I am working on to v4 today and dropped the new Rich Text editor in and created a custom block. It's looking great, but there were a couple issues. By default the Rich Text Editor doesn't render a toolbar. I had to specify a toolbar to get it to show. Also, If you include a custom block, it breaks when you try to render it. The editor and form work fine and save, it's just the rendering. I have this on my model:

public function setUpRichContent(): void
{
    $this->registerRichContent('content')
    ->fileAttachmentsDisk('public')
    ->fileAttachmentsVisibility('public')
    ->customBlocks([ MyCustomBlock::class ])
    ->json();
}

public function setUpRichContent(): void
{
    $this->registerRichContent('content')
    ->fileAttachmentsDisk('public')
    ->fileAttachmentsVisibility('public')
    ->customBlocks([ MyCustomBlock::class ])
    ->json();
}

And when I try to render:

{{ $page->getRichContentAttribute('content') }}

{{ $page->getRichContentAttribute('content') }}

And here is my block class:

class MyCustomBlock extends RichContentCustomBlock
{
    public static function getId(): string
    {
        return 'my-custom-block';
    }

    public static function getLabel(): string
    {
        return 'My Custom Block';
    }

    public static function configureEditorAction(Action $action): Action
    {
        return $action
        ->modalDescription('My Custom Block')
        ->schema([
            TextInput::make('author')->required(),
            TextInput::make('content'),
        ]);
    }

    public static function toPreviewHtml(array $config): string
    {
        return <<<HTML
        <blockquote>
        {$config['content']}
        <cite>- {$config['author']}</cite>
        </blockquote>
        HTML;
    }

    public static function toHtml(array $config, array $data): string
    {
        return static::toPreviewHtml($config);
    }
}

class MyCustomBlock extends RichContentCustomBlock
{
    public static function getId(): string
    {
        return 'my-custom-block';
    }

    public static function getLabel(): string
    {
        return 'My Custom Block';
    }

    public static function configureEditorAction(Action $action): Action
    {
        return $action
        ->modalDescription('My Custom Block')
        ->schema([
            TextInput::make('author')->required(),
            TextInput::make('content'),
        ]);
    }

    public static function toPreviewHtml(array $config): string
    {
        return <<<HTML
        <blockquote>
        {$config['content']}
        <cite>- {$config['author']}</cite>
        </blockquote>
        HTML;
    }

    public static function toHtml(array $config, array $data): string
    {
        return static::toPreviewHtml($config);
    }
}

Thanks for all the hard work! It's pretty awesome that this tool is available to use.

Solution:

I had forgotten that I was configuring the RichEditor component in the AppServiceProvider. In there, I was customizing the toolbar, and it appears to be inpompatible with the v4 editor, so it was just not showing.

Jump to solution

4 Replies