CMS Rich Editor Reference

Features

• Search: Instant client-side filtering by block name, description, and keywords
• Categories: Blocks organized into collapsible panels
• Icons: Each block displays its icon
• Dark Mode: Full support via Filament-native styling
• Backwards Compatible: Works with existing blocks and plugin blocks

Block Categories

TallCMS includes 16 custom blocks in 5 categories:

Content Blocks

Media Blocks

Social Proof Blocks

Dynamic Blocks

Form Blocks

Adding Metadata to Custom Blocks

Use the HasBlockMetadata trait:

<?php

namespace App\Filament\Blocks;

use Filament\Forms\Components\RichEditor\RichContentCustomBlock;
use TallCms\Cms\Filament\Blocks\Concerns\HasBlockMetadata;

class MyCustomBlock extends RichContentCustomBlock
{
    use HasBlockMetadata;

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

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

    public static function getCategory(): string
    {
        return 'content';
    }

    public static function getIcon(): string
    {
        return 'heroicon-o-sparkles';
    }

    public static function getDescription(): string
    {
        return 'A custom block that does something amazing';
    }

    public static function getKeywords(): array
    {
        return ['custom', 'amazing', 'special'];
    }

    public static function getSortPriority(): int
    {
        return 25;  // Lower = appears first
    }
}

Trait Methods

Available Categories

Plugin Blocks

Plugin blocks are automatically discovered. Without HasBlockMetadata:

• Appear in "Other" category
• Use default cube icon
• Searchable by label and ID

Adding a Custom Category

Edit BlockCategoryRegistry.php:

public static function getCategories(): array
{
    return [
        // ... existing categories
        'ecommerce' => [
            'label' => 'E-Commerce',
            'icon' => 'heroicon-o-shopping-cart',
            'order' => 45,
        ],
    ];
}

Using CmsRichEditor

The CmsRichEditor is automatically used in page and post forms. For custom resources:

use TallCms\Cms\Filament\Forms\Components\CmsRichEditor;
use TallCms\Cms\Services\CustomBlockDiscoveryService;

CmsRichEditor::make('content')
    ->customBlocks(CustomBlockDiscoveryService::getBlocksArray())
    ->activePanel('customBlocks')

Architecture

packages/tallcms/cms/
├── src/
│   ├── Filament/
│   │   ├── Blocks/
│   │   │   └── Concerns/
│   │   │       └── HasBlockMetadata.php
│   │   └── Forms/
│   │       └── Components/
│   │           └── CmsRichEditor.php
│   └── Services/
│       ├── BlockCategoryRegistry.php
│       └── CustomBlockDiscoveryService.php
└── resources/
    └── views/
        └── filament/
            └── forms/
                └── components/
                    └── cms-rich-editor.blade.php

Key Classes

CmsRichEditor

Extends Filament's RichEditor:

• getGroupedBlocks() - Returns blocks by category
• getBlockCategories() - Returns category definitions
• isFilamentCompatible() - Version check for fallback

BlockCategoryRegistry

Static registry:

• Category keys, labels, icons, sort order
• Fallback icon constant

CustomBlockDiscoveryService

Enhanced discovery:

• getBlocksWithMetadata() - Full metadata
• getBlocksGroupedByCategory() - Grouped output
• Icon validation
• Precomputed search strings

Filament Compatibility

Requires Filament v4.x. Automatic version detection:

• Filament 4.x: Full enhanced panel
• Other versions: Standard Filament block panel

Next Steps

• Block development
• Block styling
• Using blocks