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

v4 Rich Text Editor

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

Jump to solution

v4 Rich Text Editor

v4 Rich Text Editor

Similar Threads

Similar Threads

Similar Threads