Filament v5’in Zengin Editörünü Tam Bir Blok Editörüne Dönüştürme Yöntemleri

Filament v5, Tiptap tabanlı güçlü bir RichEditor sunuyor. Bu, sistemin doğal olarak genişletilebilir olduğu anlamına geliyor ve artık custom blocks desteği ile birlikte geliyor. İşte bunu kategorize edilebilen, aranabilir bir blok editörüne nasıl dönüştüreceğiniz — Filament çekirdeğinin bir satırını bile fork etmeden.

Filament v5 ile birlikte gelen büyük iyiliklerden biri, Tiptap destekli Rich Editor’a geçilmesi. Bu, sistemin doğal olarak genişletilebilir olduğu ve önemli olarak, RichContentCustomBlock temel sınıfı aracılığıyla custom blocks desteği sunmasıdır.

Bu oldukça büyük bir yenilik. Yapılandırılabilir içerik blokları tanımlayabiliriz ve bu bloklar, metin akışının içinde yer alarak ayrı bir Builder alanı olarak eklenmemiş olur. Her blok, benzersiz bir ID, modül form şeması ve önizleme/render yöntemleri alır. Çoğu uygulama için bu yeterli olabilir.

Ancak birkaç bloktan fazla olduğunuzda — diyelim 15+ blok türünüz var — Content, Media, Social Proof ve Forms gibi kategorilerde, varsayılan düz liste kullanılmaz hale gelir. Arama yok, kategorileştirme yok, Hero ile FAQ’yu ayırt edecek görsel ipuçları yok. Editörünüz blok isimleriyle dolu bir duvarın önünde kaybolur.

Bir Laravel CMS geliştirirken tam da bu noktayla karşılaştık. Sayfa oluşturucusunu baştan yapmaktansa, Filament’in blok sistemini katman katman genişlettik. Bu düzenler, CMS dışındaki herhangi bir Filament projesinde de uygulanabilir.

Katman 1: Editör Bileşenini Genişletme

İlk adım beklenmedik derecede temiz. RichEditor’ı genişleten bir sınıf oluşturun ve kendi Blade görünümünüzü kullanın:

class EnhancedRichEditor extends RichEditor
{
    protected function setUp(): void
    {
        parent::setUp();
        if (static::isFilamentCompatible()) {
            $this->view = 'filament.forms.components.enhanced-rich-editor';
        }
    }
}

Bu yöntemle basit bir değişiklik yapabilirsiniz. Filament, herhangi bir form bileşeninde görünümü değiştirmek için sizi özgür bırakıyor, böylece blok paneli UI’sı üzerinde tam kontrol sahibi olabilirsiniz.

Katman 2: Otomatik Keşif ve Override Önceliği

Projeniz bir paket veya eklentileri destekliyorsa, birden fazla kaynaktan bloklar almak isteyeceksiniz. Bu sorun, refleksiyon tabanlı otomatik keşif ile çözülebilir — RichContentCustomBlock’ı genişleten sınıfları tarayarak dizinleri tarayın ve daha sonra kaynakların geçersiz kılma düzenini sağlayarak blok ID’lerine göre ayıklama yapın:

1. Paket blokları (temel varsayılanlar)

2. Uygulama blokları (geliştirici geçersiz kılmaları)

3. Eklenti blokları (tümü geçersiz kılma)

Bir geliştirici, app/Filament/Blocks/ dizinine bir CallToActionBlock bırakınca, bu otomatik olarak paket varsayılanını geçersiz kılacaktır. Hiçbir yapılandırma, kayıt — sadece konvansiyon.

Keşif servisi ayrıca her bloktan etiket, simge, açıklama, arama anahtar kelimeleri, kategori, sıralama önceliği gibi metadata toplar — bu, bir sonraki katmandaki geliştirilmiş UI’yı destekler.

Katman 3: Bileşen Blok Özellikleri

Birkaç bloğunuz olduğunda, birçok form alanını paylaştıklarını göreceksiniz — buton stilleri, arka plan renkleri, boşluklar, animasyonlar. Bloklar arasında kopyalayarak yapıştırmak bakım açısından bir kabusa dönüşür. Özellikler bunu çözer:

class CallToActionBlock extends RichContentCustomBlock
{
    use HasBlockMetadata;      // Kategori, simge, açıklama, anahtar kelimeler
    use HasBlockIdentifiers;   // Anchor ID'leri, CSS sınıfları
    use HasContentWidth;       // Her blok için genişlik kontrolü
    use HasStylingOptions;     // Buton varyantları, renkler, boşluklar
    use HasAnimationOptions;   // Kaydırma tetiklemeli giriş efektleri
}

Her özellik, hem form şeması bölümleri (editör modali için) hem de rendering yardımcıları (frontend için) sağlar. Yeni bir blok eklemek, genellikle yalnızca benzersiz içerik alanlarını tanımlamakla ilgilidir — stil, animasyon ve metadata katmanları otomatik olarak gelir.

Eğer daisyUI gibi bir bileşen kütüphanesi kullanıyorsanız, stil seçeneklerini doğrudan semantic sınıflarına (btn-primary, bg-base-200) eşleyebilirsiniz. Bu, tema değişikliği için ücretsiz bir çözüm sunar — her blok, tema değiştiğinde otomatik olarak yeniden biçimlenir.

Lütfen bu makalenin geri kalanını buradan okuyun.