İçerik çalışmalarındaki korkuyu ortadan kaldıran editör yükseltmesi, en iyi editör yükseltmesidir.
E-ticaret PageBuilder'ımıza bir Tiptap React editörü ekledik; çünkü ham HTML bloklarını düzenlemek artık gereğinden fazla maliyetli hale gelmişti. Çalışıyorlardı, ancak yalnızca işaretlemeyi okumakta rahat olan kişiler için. Bir mağaza sahibi; ürün sayfası düzenini bozmadan veya güvenli olmayan HTML göndermeden başlık, görsel, düğme, sütun, sekme ya da Instagram embed'i ekleyebilmelidir.
Çalışma, ecom temasındaki `codex/htmlblock-wysiwyg-editor` branch'inde tamamlandı. İlk uygulama commit'i olan `08692e2e`, HTML blok WYSIWYG editörünü ekledi. Sonraki commit'ler etkileşimleri iyileştirdi, etiketleri çeviri sistemine taşıdı, medya işleme sürecini güçlendirdi ve medya kütüphanesindeki görselleri ID'ye göre tekilleştirdi.
Tiptap iyi bir seçimdi; çünkü bizi kapalı bir CMS yapısına zorlamadı. Mevcut PageBuilder HTML sözleşmesini koruduk ve Tiptap'ı düzenleme motoru olarak kullandık.
Ne oluşturduk
Görünen özellik basit: PageBuilder HTML bloklarında artık ham HTML textarea'sı yerine gerçek bir editör var.
Uygulama, bu cümlenin ifade ettiğinden daha kullanışlı. Editör şunları destekliyor:
Son nokta önemliydi. Bu, greenfield bir editör değildi. E-ticaret frontend'i zaten Bootstrap tarzı içeriklere, legacy CMS parçacıklarına, PageBuilder bölgelerine, PrestaShop medya yollarına ve SEO kurallarına sahipti. Sitenin mevcut HTML modelini düzleştirmeden içeriği düzenleyebilen bir WYSIWYG katmanına ihtiyacımız vardı.
Tiptap neden basit hissettirdi
Tiptap'ın React kurulumu küçük: `useEditor`, `EditorContent` ve bir extension dizisi. StarterKit temel düzenleme yapı taşlarını sağlıyor; ardından ürününüzün ihtiyaç duyduğu parçaları ekliyorsunuz.
Bizim durumumuzda bağımlılık seti anlaşılır kaldı:
Bu, editör yüzeyini oluşturmak ve ardından kendi e-ticaret bloklarımızı üzerine eklemek için yeterliydi. Standart editör davranışı için `StarterKit.configure()` kullandık, kendi kurallarımıza ihtiyaç duyduğumuz yerlerde varsayılan bağlantı işleme davranışını devre dışı bıraktık, ardından Link ve Highlight'ı açıkça yapılandırdık.
Basit olan, Tiptap'ın her e-ticaret sorununu çözmesi değildi. Çözmedi. Basit olan extension modeliydi. Kendi içerik node'larımızı doğrudan tanımlayabildik: button, image, legacy image, Instagram embed, columns, tabs, spacer, table, font size, list style ve text alignment.
Bu, PageBuilder'a temiz bir şekilde uyuyor. Bir düğme yalnızca stillendirilmiş metin değildir. Bir görsel yalnızca bir `img` etiketi değildir. Bir sekme bileşeninde etiketler, paneller, ID'ler, aktif durum ve erişilebilir roller bulunur. Tiptap, bunları sonradan textarea'dan çıkarmaya çalışmak yerine editör içeriği olarak modellememizi sağladı.
HTML roundtrip en önemli kısımdı
Birçok WYSIWYG geçişi, editör bir formatı, site ise başka bir formatı istediği için başarısız olur.
Bunu istemedik. Frontend zaten ürün sayfalarında, içerik sayfalarında, ana sayfa bölümlerinde, checkout'a yakın alanlarda ve diğer PageBuilder bölgelerinde HTML bloklarını oluşturuyor. Editörün mevcut HTML'yi yüklemesi, bir yöneticinin bunu değiştirmesine izin vermesi ve public storefront'ın güvenli şekilde oluşturabileceği HTML'yi kaydetmesi gerekiyordu.
Tiptap bunun için bize dönüşüm araçlarını sağladı. Sekme panellerinde mevcut HTML'yi editör içeriğine dönüştürmek için `generateJSON()`, panel içeriğini yeniden HTML'ye dönüştürmek için `generateHTML()` kullanıyoruz. Böylece düzenleme yüzeyi yapılandırılmış kalırken sitenin public HTML çıktısı korunuyor.
Bu, SEO için de önemli. Bir CTA anchor olarak kalıyor. Bir başlık başlık olarak kalıyor. Bir görsel, alt metin ve açıklama içeren semantik bir figure olarak kalıyor. Sekmeler, taranabilir panel içeriğini koruyor. E-ticaret metinlerini arama motorlarının veya yardımcı teknolojilerin içinden çıkarmaya çalışması gereken yalnızca istemci tarafında çalışan bir widget'ın içine gömmedik.
Editör mağaza sahipleri için basit, kod için katı
Admin UI karmaşıklığın çoğunu gizliyor.
Editörler toolbar düğmeleri, diyaloglar, düzen kartları, görsel alanları ve bir medya seçici görüyor. Metin seçip biçimlendirme için kayan BubbleMenu'yu kullanabiliyorlar. Bootstrap sınıflarını hatırlamak zorunda kalmadan iki sütunlu veya üç sütunlu bir düzen seçebiliyorlar. Sekmeler ekleyip kaydetmeden önce ilk paneli önizleyebiliyorlar.
Kod ise altta katı kalıyor:
Bu ayrım, bu uygulamayı sevmemin nedeni. UI hoşgörülü hissettiriyor, ancak kaydedilen çıktı kontrol altında.
Güvenlik isteğe bağlı değildi
Save path tarayıcının geri gönderdiği her şeye güvendiğinde rich text editörleri tehlikelidir.
Public rendering etrafına özel bir rich-text sanitizer ekledik. Bu sanitizer, etiketler ve öznitelikler için açık bir allowlist ile DOMPurify kullanıyor. İçerik React raw HTML sink'lerine ulaşmadan önce script çalıştırabilen ve yürütülebilir işaretlemeleri kaldırıyor. Ayrıca Instagram embed verilerini normalize ediyor ve URL değeri taşıyan özniteliklerde engellenen URL protokollerini kaldırıyor.
Render testleri, bir e-ticaret page builder için önemli olan durumları kapsıyor:
“Bir WYSIWYG editörü ekledik” ile “insanların bunu production'da kullanmasına izin verebiliriz” arasındaki fark budur.
Branch geçmişi gerçek hikâyeyi anlatıyor
İlk commit büyüktü: 18 dosya değişti, 6.282 satır eklendi ve 187 satır silindi. Her iki storefront uygulamasına Tiptap bağımlılıklarını, 3.000 satırlık bir editör bileşenini, 1.100'den fazla satır editör SCSS'ini, render testlerini, admin kontrollerini, düzen işleme mantığını ve sanitizer yolunu ekledi.
Ardından iyileştirmeler geldi. `d092141d`, HTML blok editörünü ve navigasyon etkileşimlerini geliştirdi. `320591ec`, İngilizce, İsveççe ve Fransızca çeviri kapsamı ekledi, bir medya seçici hook'unu kaldırdı, editör davranışını güçlendirdi ve sekmeleri daha esnek hale getirdi. `2c7928b9`, medya kütüphanesindeki görselleri ID'ye göre tekilleştirdi.
Editör çalışmasındaki gerçek düzen budur. İlk sürüm, editörün var olabileceğini kanıtlar. Takip eden commit'ler onu kullanılabilir hale getirir.
Tiptap en çok nerede yardımcı oldu
Tiptap üç noktada yardımcı oldu.
İlk olarak, editör çekirdeğini sıkıcı hale getirdi. Selection'ları, command'ları, undo/redo'yu, klavye davranışını veya kayan menüleri kendimiz icat etmek zorunda kalmadık. React entegrasyonu ve StarterKit bize kararlı bir temel sağladı.
İkinci olarak, e-ticarete özgü blokları kırılgan string manipülasyonlarının içine gizlemeden modellememizi sağladı. Custom node'lar ve command'lar; düğmelere, görsellere, sütunlara, sekmelere ve embed'lere gerçek bir yapı kazandırdı.
Üçüncü olarak, rendering sözleşmemizi korumamızı sağladı. Public storefront zaten HTML bloklarına bağlı olduğu için HTML'yi depolayıp oluşturabildik; aynı zamanda anlamlı olduğu yerlerde dahili olarak yapılandırılmış editör içeriğini kullanmaya devam ettik.
Bu birleşim nadir bulunur. Birçok editör, custom output'a ihtiyaç duyana kadar kolaydır. Birçok custom editör ise normal bir yazma deneyimine ihtiyaç duyana kadar esnektir. Tiptap, kullanışlı orta noktada duruyor.
Ödünleşim
Tiptap ürün kararlarını ortadan kaldırmaz.
Hangi içerik türlerine izin verileceğine, hangi HTML'nin korunacağına, görsellerin nasıl seçileceğine, bağlantıların nasıl doğrulanacağına, yapıştırılan içeriğin nasıl davranacağına, çevirilerin nasıl çalışacağına, public render path'in içeriği nasıl sanitize edeceğine ve mağaza sahiplerine ne kadar özgürlük tanınacağına hâlâ karar vermeniz gerekir.
Bir blog editörü için Tiptap hızlı olabilir. Bir e-ticaret PageBuilder'ı için işin çoğu Tiptap'ın çevresinde yaşar: legacy uyumluluğu, render testleri, medya iş akışları, erişilebilirlik, SEO, çeviriler ve koruyucu kurallar.
Bu sorun değil. İyi bir headless editör size primitive'ler sunmalı; iş kurallarınız yokmuş gibi davranmamalıdır.
Benim çıkarımım
Bu tür bir çalışma için Tiptap'ı yeniden kullanırdım.
Uygulama, mevcut PageBuilder sistemini çöpe atmadan pratik bir Tiptap React editörü sunmamızı sağladı. Mağaza sahipleri daha güvenli bir düzenleme yüzeyine kavuştu. Geliştiriciler öngörülebilir HTML'yi korudu. SEO açısından kritik içerikler taranabilir kaldı. Storefront, kırılgan ve yalnızca istemci tarafında çalışan bir rendering hilesine bağlı değil.
E-ticaret admin araçları için istediğim standart bu: yüzeyde basit, çıktıda katı ve ilk lansmandan sonra güvenilebilecek kadar sıkıcı.