Draft.js, Rich Text Editor Framework For React

Hi, semuanya !

Pada blog post kali ini, saya akan membahas Draft.js, yaitu sebuah Rich Text Editor Framework untuk React.js. Framework ini sudah saya implementasikan di project Pegadaian, sebagai component dari CMS untuk fitur notifikasi. Sebelum saya masuk ke pembahasan mengenai Draft.js, saya akan membahas apa itu Rich Text terlebih dahulu.

Rich Text vs Plain Text

Plain Text, sesuai dengan namanya, bersifat plain. Plain Text men-support ASCII, seperti angka, simbol, dan spasi, tapi tidak men-support text formatting. Karena Plain Text tidak menyimpan informasi seputar text formatting, Plain Text menjadi format yang paling efisien untuk menyimpan text.

Rich Text juga men-support ASCII, namun tidak hanya ASCII, tetapi juga text formatting dan page formatting, seperti Bold, Italic, Underline, Font Size, Strikethrough, Text Colour, dll.

What is Rich Text Editor ?

Rich Text Editor, atau disebut juga What You See Is What You Get (WYSIWYG) Editor, adalah sebuah interface yang memungkinkan user untuk mengubah text beserta dengan text formattingnya.

What is Draft.js ?

Seperti yang sudah saya tulis di title post ini, Draft.js adalah Rich Text Editor Framework yang dapat digunakan di React. Draft.js dirilis pada tahun 2016 dan dibuat oleh Facebook, yang digunakan untuk menghandle beberapa issues yang disebabkan oleh penggunaan tag <textarea> dan <div> di dalam facebook post dan comments, terutama dalam hal mentions dan hashtags. Facebook juga menggunakan Draft.js untuk fitur-fitur seperti status update inputs, chat, Facebook Notes, dll.

Contoh Rich Text Editor di Facebook Notes

Draft.js menyediakan examples yang dapat kita customize sendiri sesuai dengan kebutuhan kita. Examples yang disediakan pun 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). Draft.js juga memiliki banyak plugins, mulai dari emoji-plugin, table, hingga image plugin, untuk memperkaya toolbar dari Rich Text Editor yang kita buat.

How To Install ?

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

npm install --save draft-js react react-dom # atau yarn add draft-js react react-dom

Berikut adalah contoh dari rich text editor yang saya ambil dari folder examples, dari GitHub Draft.js

Contoh WYSIWYG Rich Text Editor

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. Kali ini, saya akan menambahkan button untuk mengupload image ke text editor dengan menggunakan plugin Image untuk Draft.js

1. Install draft-js-image-plugin npm install draft-js-image-plugin
2. Import plugin
   
3. Untuk dapat mengubah EditorState ketika image ditambahkan, tambahkan code line berikut pada function onChange input
   
   
   
4. Jangan lupa, tambahkan plugin pada parameter plugins di component Editor
   

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

Referensi :

1. https://draftjs.org/
2. https://draftjs.org/docs/getting-started
3. https://github.com/facebook/draft-js
4. https://medium.com/@siobhanpmahoney/building-a-rich-text-editor-with-draft-js-react-redux-and-rails-ef8d2e2897bf
5. https://en.wikipedia.org/wiki/Online_rich-text_editor
6. https://techterms.com/definition/plaintext
7. https://code.fb.com/web/facebook-open-sources-rich-text-editor-framework-draft-js/
8. https://github.com/draft-js-plugins/draft-js-plugins
9. https://www.npmjs.com/package/draft-js-image-plugin