Tiptap Editor - Editor WYSIWYG Headless

• Framework headless yang tidak menyediakan UI sehingga menguntungkan untuk styling
• Bekerja sangat baik dengan React, Vue, Svelte, Alpine.js, Next.js, Nuxt.js, dan vanilla JS
• Berbasis ProseMirror

[bbulbum]

Menurut saya pribadi, ini terasa paling nyaman digunakan dan strukturnya juga paling mudah untuk diperluas dibanding yang pernah saya coba.
Banyak ketidaknyamanan yang saya rasakan saat membuat editor dengan Slate benar-benar banyak teratasi di sini.

[gomjellie]

Boleh berbagi ketidaknyamanan apa yang Anda rasakan saat menggunakan editor Slate?
Saya sendiri baru pernah memakai Tiptap, tapi saya jadi tertarik karena mendengar Slate juga cukup bagus!!

[firea32]

Bagian untuk membuat komponen eksternal jauh lebih nyaman. Terutama saat menggunakan DOM milik sendiri seperti di React, yang dibutuhkan adalah render sebagai komponen, bukan HTML; karena tiptap sejak awal dibuat dengan mempertimbangkan modularisasi, jadi jauh lebih mudah untuk dimodifikasi.

[bbulbum]

Secara keseluruhan saya merasa dokumentasi Slate sulit, dan karena terlalu mentah, saya merasa ada lebih banyak hal yang harus dipelajari untuk mengimplementasikan fitur yang saya inginkan.

Ini ingatan dari sekitar 2 tahun lalu jadi mungkin sedikit berbeda, tetapi saya mengalami masalah seperti ini.

• Masalah input bahasa Korea di lingkungan mobile: Sangat sulit mencari tahu ini terjadi di mana, dan karena muncul saat melakukan kustomisasi, saya tidak ingat persis.
• Sulitnya kontrol terkait select: Saat menambahkan fitur untuk memproses atribut pada karakter yang dipilih, ini sangat rumit. (Objeknya sendiri kompleks)
• Sulitnya pengembangan plugin: Saya mencoba mengembangkan sendiri plugin seperti peta, tetapi tiptap disusun agar mudah untuk pengembangan tambahan plugin, jadi terasa nyaman.

[gomjellie]

Oh.... terima kasih~!

[nemorize]

Anda bisa melihat contoh editor yang berfungsi di https://tiptap.dev/docs/editor/installation/react#7-the-complete-setup.

Secara pribadi saya merasa dokumentasinya cukup bagus, tetapi ada elemen-elemen yang membutuhkan langganan berbayar yang disisipkan di tengah-tengah.
Memang tidak sampai membuat membaca dokumentasinya jadi tidak nyaman, tetapi meski tidak perlu tetap bikin tergoda, jadi terasa hebat sekaligus menyebalkan.. rasanya campur aduk dan agak rumit.

[savvykang]

Saya sulit setuju dengan pendapat bahwa dokumentasinya bisa dibilang cukup baik. Menurut saya, jarak antara dokumentasi getting started dan dokumentasi API terlalu besar sehingga kurva belajarnya tinggi. Dalam proyek React yang kami jalankan, kami menilai gaya dokumentasi Prosemirror dan react-prosemirror lebih ramah pengguna dan lebih matang, sehingga kami memilih react-prosemirror dan tidak memilih tiptap.

Saat memahami contoh React untuk membuat kode sampel POC sesuai kebutuhan kami, ada masalah seperti berikut.

1. Elemen apa saja yang bisa digunakan ketika menambahkan StarterKit? Kita harus mencari dokumentasi terpisah berdasarkan nama paket. Ini membuat fokus kita terpecah saat sedang mencoba contoh tiptap.
2. ListItem sudah termasuk di StarterKit, jadi mengapa di contoh masih memasukkan ListItem lagi ke proyek? Itu untuk melakukan konfigurasi environment pada extension.
3. Mengapa harus memakai sintaks seperti editor().chain().focus()? Tidak ada prinsip desain atau penjelasan tentang method chaining.
4. Bubble menu dan Floating menu tidak ada di contoh React. Karena perilakunya berbeda dengan fitur yang terlihat di halaman Try it live (https://templates.tiptap.dev/pjrwkQtNpq), kita harus membaca dokumentasi untuk mencari tahu mengapa fitur itu tidak ada.
5. Tidak ada fitur tabel, jadi kita mencari kata kunci table di halaman Extensions. Hasil pencarian menampilkan Table, TableCell, TableHeader, TableRow. Apakah semuanya harus ditambahkan?
6. Saya akhirnya berhasil menambahkan Table dan berbagai extension lain. Untuk memeriksa apakah fiturnya benar-benar bekerja, kita harus mulai dari menyisipkan tabel. Bagaimana perintah toolbar harus ditulis? Di bagian mana pada toolbar editor fungsi-fungsi untuk perintah tersebut harus ditambahkan? Tidak ada petunjuk sama sekali.
7. Ada kebutuhan bahwa tabel tidak boleh dinest di dalam tabel lain. Bagaimana logika untuk menentukan apakah kursor sedang berada di dalam tabel harus diimplementasikan? Tidak ada petunjuk sama sekali.
8. Saya ingat bahwa Color dikemas sebagai extension, lalu rasa penasaran muncul dan saya membuka source code-nya. Ketika melihat hanya ada dua file di direktori src, saya sampai menghela napas. Saya tidak bisa memahami maksud dibuatnya modul sekecil ini. Jika fungsi sekecil ini pun dijadikan paket, bukankah beban pengelolaan versi dependensi jadi lebih besar daripada manfaat reusabilitasnya?

[nemorize]

Saya sulit setuju untuk poin 1-3, 4-6, dan 8, karena saya sama sekali tidak merasakan adanya pertanyaan atau ketidaknyamanan.

1-2
StarterKit, sesuai namanya, adalah Kit untuk Starter, jadi pada tahap penggunaan nyata rasanya tidak terlalu berarti.
Untuk ListItem, memang seperti yang Anda katakan. Itu adalah elemen untuk konfigurasi ekstensi Color. Saya juga merasa ini bagian yang bisa diabaikan begitu saja jika tidak memakai StarterKit.

3
chain().something().run() memang sekadar semacam syntax sugar, tetapi menurut saya ini menyediakan fungsi yang sesuai dengan konsep library baterai-termasuk.
Saya sangat terbantu menggunakannya di lingkungan mobile, di mana aksi seperti bold lalu fokus pada praktiknya hampir wajib.

4
Saya tidak begitu tahu karena tidak menggunakan fitur tersebut.
(Saya justru menganggap ini sebagai kelebihan yang datang sebagai kebalikan dari kekurangan pada poin 1 yang Anda sebutkan, yaitu keluar dari kondisi fokus, karena kita tidak perlu repot melihat informasi tentang fitur yang tidak akan saya gunakan.)

5-6
Semua itu sudah dijelaskan dengan baik di dokumentasi masing-masing ekstensi, dan secara umum sama sekali tidak berbeda dari implementasi editor pada umumnya.
Sejujurnya, untuk bagian poin 6, saya juga tidak yakin apakah saya benar-benar memahami maksud savvykang... Saya terus berpikir, "Kenapa ini jadi pertanyaan...? Petunjuk seperti apa yang sebenarnya dibutuhkan...?" haha...

7
"Seperti milik node-node lainnya", fokus bisa dicek dengan editor.isActive('table').
Namun, saya rasa ini bukan masalah yang bisa selesai hanya dengan mengetahui node yang sedang fokus. Sepertinya ini kebutuhan yang mengharuskan mempertimbangkan banyak hal, seperti filtering terhadap paste, penyisipan lewat developer tools, dan lain-lain.

8
Saya setuju bahwa pengelolaan versi dependensi bisa menjadi beban, tetapi saya juga melihat ini sebagai kelebihan karena kita tidak perlu membawa kode untuk fitur yang tidak dibutuhkan.
Kebetulan, dalam kasus kami memang situasinya seperti yang Anda sebut untuk ekstensi Color, yaitu tidak akan digunakan. Sepertinya masing-masing punya kelebihan dan kekurangan sendiri.

.
Saya rasa react-prosemirror dan tiptap yang Anda sebut punya konsep yang benar-benar berbeda.

teman yang membuat prosemirror bisa digunakan dengan gaya React
vs
teman yang tidak terlalu peduli apakah berbasis prosemirror atau bukan, yang penting mengumpulkan semua hal yang dibutuhkan untuk membangun editor yang cocok dengan layanan saya

[nemorize]

Karena editor ini sudah cukup populer di ekosistem Vue, saya sempat bimbang apakah perlu menuliskannya,
namun setelah kali ini menerapkannya di SvelteKit dan mencobanya sendiri, saya cukup puas sehingga saya putuskan untuk membagikannya.

Di ekosistem Svelte, saya sempat bingung karena belum ada editor WYSIWYG yang benar-benar terasa pas,
jadi kalau ada yang punya pertimbangan serupa, sepertinya tidak ada salahnya untuk mencoba yang satu ini setidaknya sekali.