Tiptap Editor - Headless WYSIWG editör

• UI sunmayan Headless bir framework olduğu için stillendirme açısından avantajlıdır
• React, Vue, Svelte, Alpine.js, Next.js, Nuxt.js ve vanilla JS ile çok iyi çalışır
• ProseMirror tabanlıdır

[bbulbum]

Şahsen kullandıklarım arasında en rahat ve genişletmesi en kolay yapılandırılmış olanın bu olduğunu düşünüyorum.
Slate ile editör yaparken hissettiğim rahatsızlıkların gerçekten büyük bir kısmı burada çözülmüş.

[gomjellie]

Slate editörünü kullanırken hangi noktaların sizi rahatsız ettiğini paylaşabilir misiniz?
Ben yalnızca Tiptap kullandım, ama Slate'in de iyi olduğuna dair şeyler duyduğum için ilgimi çekti!!

[firea32]

Harici bileşenler oluşturma kısmı çok daha kullanışlı. Özellikle React gibi kendi DOM'unu kullanan durumlarda HTML yerine bileşen olarak render etmek gerekiyor; Tiptap zaten en baştan modülerlik düşünülerek yapıldığı için üzerinde değişiklik yapmak daha kolay oluyor.

[bbulbum]

Genel olarak Slate belgelerini anlaması zor bulmuştum ve fazla ham olduğu için, istediğim özellikleri uygulamak adına öğrenmem gereken daha çok şey varmış gibi gelmişti.

Yaklaşık 2 yıl önceki bir anı olduğu için biraz farklı olabilir ama şu sorunları yaşamıştım.

• Mobil ortamda Korece giriş sorunu: Bunun tam olarak nerede ortaya çıktığını bulmak çok zordu; özelleştirme yaparken olmuştu, bu yüzden tam hatırlamıyorum.
• select ile ilgili kontrol zorluğu: Seçilen karakterlere özellik uygulayan bir işlev eklemek oldukça zahmetliydi. (Nesnenin kendisi çok karmaşık)
• Eklenti geliştirme zorluğu: Harita gibi eklentileri doğrudan geliştirmeye çalışmıştım ama tiptap, ek eklenti geliştirmeye uygun şekilde yapılandırıldığı için rahattı.

[gomjellie]

O.... teşekkürler~!

[nemorize]

Çalışan bir editör örneğini https://tiptap.dev/docs/editor/installation/react#7-the-complete-setup adresinde görebilirsiniz.

Bence dokümantasyonu oldukça iyi hazırlanmış, ancak aralara ücretli abonelik gerektiren unsurlar serpiştirilmiş.
Belgeleri okurken rahatsız edecek düzeyde değil ama ihtiyaç bile yokken insanın hevesini kabartması hem etkileyici hem de sinir bozucu... Karmaşık duygular uyandırıyor.

[savvykang]

Dokümantasyonun bir ölçüde iyi olduğu yönündeki söze katılmam zor. Bana göre başlangıç dokümanı ile API dokümanı arasındaki boşluk fazla büyük, bu yüzden öğrenme eğrisi yüksek. Yürüttüğümüz React projesinde Prosemirror ve react-prosemirror’un dokümantasyon tarzını daha kullanıcı dostu ve daha olgun bulduğumuz için react-prosemirror’u seçtik, tiptap’ı seçmedik.

İhtiyaçlarımız için bir PoC örnek kodu hazırlamak amacıyla React örneklerini incelerken aşağıdaki sorunlarla karşılaştık.

1. StarterKit’i eklediğimizde kullanılabilir öğeler neler oluyor? Bunun için paket adına göre ayrı bir doküman aramak gerekiyor. tiptap örneklerini denerken odaklandığımız akıştan kopuyoruz.
2. ListItem StarterKit’e dahilken, örnekte neden ayrıca ListItem projeye eklenmiş? extension yapılandırması yapmak için.
3. Neden editor().chain().focus() gibi bir sözdizimi kullanmak gerekiyor? Method chaining ile ilgili tasarım ilkesi ya da açıklama yok.
4. Bubble menu ve Floating menu React örneklerinde yok. Try it live sayfasında (https://templates.tiptap.dev/pjrwkQtNpq) gördüğümüz işleve göre farklı davrandığı için, bu özelliklerin neden eksik olduğunu anlamak adına dokümanları incelemek gerekiyor.
5. Tablo özelliği olmadığı için Extensions sayfasında table anahtar sözcüğüyle arama yapıyoruz. Arama sonuçlarında Table, TableCell, TableHeader, TableRow çıkıyor. Bunların hepsini eklemek mi gerekiyor?
6. Table ve türlü türlü extension’ları bir şekilde ekledik. Özelliğin düzgün çalışıp çalışmadığını görmek için önce tablo eklemek gerekiyor. Toolbar komutu nasıl yazılmalı? editor toolbar’ında bu komutlara karşılık gelen fonksiyonlar nereye ekleniyor? Hiçbir ipucu yok.
7. Tablo içinde başka bir tablonun iç içe yerleştirilememesi gibi bir gereksinim var. İmlecin tablo içinde olup olmadığını belirleyen mantık nasıl uygulanmalı? Hiçbir ipucu yok.
8. Color’ın bir extension olarak paketlendiğini hatırlayıp merakla kaynak kodunu açıyoruz. src dizininde yalnızca iki dosya olduğunu görünce iç geçiriyoruz. Neden bu kadar ufak modüller yapılmış, arkasındaki niyeti anlamak zor. Bu kadar küçük bir özelliği bile paket yapmak, yeniden kullanılabilirlikten çok bağımlılık sürüm yönetimi açısından yük getirmiyor mu?

[nemorize]

1-3, 4-6 ve 8 için hiçbir soru işareti ya da rahatsızlık hissetmediğimden, bunlara katılmam benim için zor.

1-2
StarterKit, adından da anlaşılacağı gibi başlangıç için bir kit olduğu için, gerçek kullanım aşamasında pek anlamlı görünmüyor.
ListItem da dediğiniz gibi. Color extension ayarları için bir öğe. Aynı şekilde, StarterKit kullanmazsanız sorun kalmayacağını düşünüyorum.

3
chain().something().run() basit bir syntax sugar gibi olsa da, bataryaları dahil gelen bir kütüphane konseptine uygun bir işlev sunduğunu düşünüyorum.
Bold sonrası focus gibi aksiyonların fiilen zorunlu olduğu mobil ortamlarda bunu çok faydalı şekilde kullanıyorum.

4
Bu özelliği kullanmadığım için çok bilmiyorum.
(Bence, kullanmayacağım bir özelliğe dair bilgileri ille de görmek zorunda olmamam açısından, bunun 1. maddede söz ettiğiniz “odak durumundan çıkma” dezavantajının karşılığında gelen bir avantaj olduğunu düşünüyorum.)

5-6
Her extension’ın dokümantasyonunda bunlar gayet iyi anlatılıyor; ayrıca genel olarak bir editör implemente etmekten hiçbir farkı yok.
Açıkçası 6. maddede söylediğiniz kısmı sizin ne demek istediğinizi doğru anladım mı ondan da emin değilim... Sürekli “Bu neden bir soru işareti ki...? Tam olarak nasıl bir ipucuna ihtiyaç var...?” diye düşünüyorum hehe...

7
“Diğer node’larda olduğu gibi” focus durumunu editor.isActive('table') ile kontrol edebilirsiniz.
Ama bunun sadece focus node’unu tespit ederek çözülebilecek bir mesele olmadığını düşünüyorum. Yapıştırmaya yönelik filtreleme, geliştirici araçları üzerinden ekleme gibi birçok noktayı dikkate almayı gerektiren bir ihtiyaç gibi görünüyor.

8
Bağımlılık sürümü yönetiminin yük getirdiği kısmına katılıyorum, ama ihtiyaç olmayan özelliklerin kodunu taşımak zorunda olmamak açısından bunun avantaj sağladığını düşünüyorum.
Tam da bizim kullanım senaryomuzda bahsettiğiniz Color extension’ı kullanmayacağımız bir durum vardı. Sanırım her yaklaşımın kendi artıları ve eksileri var.

.
Bahsettiğiniz react-prosemirror ile tiptap’ın konsept olarak tamamen farklı iki şey olduğunu düşünüyorum.

prosemirror’ı React tarzında kullanabilmenizi sağlayan bir araç
vs
prosemirror tabanlı olup olmadığı önemli değil; önemli olan benim servisime uygun bir editörü hayata geçirmek için gereken her şeyi bir araya getiren bir araç

[nemorize]

Vue tarafında zaten popüler olduğu için yazıp yazmamayı düşündüm,
ancak bu kez Sveltekit’e uygulayıp kullandıktan sonra oldukça memnun kaldığım için paylaşmak istedim.

Svelte ekosisteminde “işte bu!” dedirten, gerçekten tatmin edici bir WYSIWYG editör olmadığı için kararsız kalıyordum;
aynı konuda düşünenler varsa, en azından bir kez denemeniz fena olmayabilir.