Slate.js : Framework for Building Rich Text Editor

Hi, semuanya !

Pada blog post kali ini, saya akan membahas Slate.js, yaitu sebuah Rich Text Editor Framework untuk React.js. Framework ini saya temukan pada saat sedang R&D framework Rich Text Editor untuk project Pegadaian, sebagai component dari CMS untuk fitur notifikasi. Untuk pembahasan mengenai apa itu Rich Text dan Rich Text Editor, dan juga mengenai framework yang pada akhirnya saya gunakan di project Pegadaian, dapat dilihat pada blog post saya di sini.

What is Slate.js ?

Seperti yang sudah saya tulis di title post ini, Slate.js adalah Rich Text Editor Framework yang mengusung konsep completely customizable framework. Creator Slate.js terinspirasi dari library rich text editor lain, seperti Draft.js, Prosemirror, dan Quill. Dengan konsepnya yg completely customizable tersebut, Slate.js membuka peluang yang sangat lebar jika kita ingin mengimplement rich text editor dengan fitur yang tidak biasa atau rumit, seperti Medium, Dropbox Paper, dan Google Docs. Semua logic yang akan kita gunakan di dalam Slate.js, diimplementasikan dengan menggunakan plugins.

Berdasarkan pengalaman saya, Slate.js memiliki learning curve yang lebih tinggi dibandingkan dengan Draft.js. Hal ini juga saya jadikan sebagai salah satu pertimbangan saya, mengingat waktu yang saya miliki untuk mempelajari framework ini sangat terbatas, karena harus segera diimplementasikan ke dalam project.

Contoh Rich Text Editor Slate.js

Sama seperti Draft.js, Slate.js menyediakan examples yang dapat kita customize sendiri sesuai dengan kebutuhan kita. Examples yang disediakan juga beragam, mulai dari text editor dengan toolbar seperti Blogger, hingga text editor dengan toolbar yang baru muncul ketika kita block sebagian text (seperti Facebook Notes atau Medium). Slate.js juga memiliki banyak plugins, yang dibagi-bagi berdasarkan kategori, yaitu behavior (auto replace, drop-or-paste image, edit table), components (icons untuk toolbar), serializers (html, plain, base64), dan utils (hyperprint, hyperscript), untuk kepentingan costumize dari Rich Text Editor yang kita buat.

How To Install ?

Di file directory project React yang sudah dibuat, install Slate dengan menggunakan command :

npm install slate slate-react --save

Semua examples dapat dilihat di website mereka di sini.

Dengan examples, kita sudah bisa langsung menggunakan text editor dengan fitur dari examples tersebut. Namun, kita juga bisa meng-customize fitur-fitur yang ada di toolbar.

Examples yang ditawarkan oleh Slate.js lebih beragam daripada Draft.js, namun examples dari Slate.js tidak ready to use, dalam artian, ada beberap examples yang hanya merender componentnya saja, misalnya examples untuk table.

Pada example ini, kita tidak bisa menambahkan row atau column pada table yang ada.

Baik Slate.js maupun Draft.js, keduanya sama-sama belum memiliki plugin untuk tables yang baik.

Sekian penjelasan saya mengenai Slate.js, semoga blog post ini dapat bermanfaat. Terima kasih.

Referensi :

1. https://github.com/ianstormtaylor/slate
2. https://docs.slatejs.org/
3. https://www.slatejs.org/#/rich-text
4. https://github.com/ianstormtaylor/slate/blob/master/docs/general/plugins.md