Bandicoot
Bandicoot is an npm library for doing rich text with React. It uses React hooks, is only 3.8kb gzipped (14kb ungzipped), and will keep you focused on writing your react components instead of grappling with your rich text editor.
Browser support
Bandicoot has been tested in Safari 10+, Edge 14+, Chrome, and Firefox. It does not support IE11.
Comparison to other rich text libraries
There are many free rich text libraries, such as Quill, Slate, tinymce, and DraftJS.
Here's a very incomplete comparison:
| Library Size (not gzipped) | License / Price | Inline images | Links | "Atomic blocks" | Built-in markdown support | |
|---|---|---|---|---|---|---|
| Bandicoot | 14kb | MIT (free) | ✔ | ✔ | ✔ | ✘ |
| Quill | 215kb | MIT (free) | ✔ | ✔ | ✘ | ✔ |
| Slate | 171kb | BSD-3 (free) | ✔ | ✔ | ✔ | ✔ |
| TinyMCE | 353kb | GPL 2.1 (pay for plugins, support, storage, and no product attribution) | ✔ | ✔ | ✔ | ✔ |
| DraftJS | 210kb Draft + Immutable | MIT (free) | ✔ | ✔ | ✔ | ✘ |
If you're curious how bandicoot got away with being so much smaller, check out this explanation.
Bandicoot's take
Bandicoot should enable developers to build an editor that (1) does what they need, (2) doesn't require 200kb of code, and (3) can actually be understood, modified, and debugged. Abstraction is a double edged sword: the ideal rich text library is one where there are building blocks that developers can understand.
I've used rich text libraries for several years, and have always run into painful roadblocks. Bugs are often difficult to diagnose and nearly impossible to fix. Documentation seems good until I hit something I couldn't find in it. I am happy for library abstractions until I find myself reading the source code and wishing I was working with the DOM instead of the library. Storing HTML in the database seems fine but then I learn that the JSON representation is more important. Updating versions of a library is often painful. Browsers support rich text editing a lot better than they did ten years ago, but rich text libraries today are still just as complicated as they were then.
Bandicoot attempts to address those problems by using lightweight abstractions on top of existing DOM APIs. Rich text is inherently complicated, but the library you use for it shouldn't make it more complicated.