A fluid rich text editor - a look at available libraries
How to build a fluid rich text editor for Shopify like what ghost provides? Are there any available off the shelf options.
There are a few available tools out there, paid as well as free of cost. For our purpose, we will be looking for libraries with these criteria:
- Has free/community version. We have not come to pricing yet, but paying for the core of our offer is not likely to work.
- Has a large community. It will be easier to find your questions that have already been asked by others, and easy to get help as well.
- Existing add-ons or extensions that do the heavy lifting of setting up a base editor
- Easy customization of interface. As we plan to distinguish our product with better user experience, it's crucial to be able to arrange buttons and actions according to our need.
Another minor consideration is that the library should support React which is used by the Shopify extension framework.
TinyMCE
One of the most prominent libraries out there, and the one you're most likely to encounter in your first Google query for rich text editor is TinyMCE. They have a wide range of pricing options, from community to premium. And one can learn a lot about the landscape just reading through their comprehensive competitor analysis.
TinyMCE is mature, with large community and lots of features. Some of them you need to pay for. But one thing that stop us from further exploring this option is that TinyMCE editor has a fixed layout that is hard to change. Let say you want to dock the toolbar to the left of the editing area, it is not possible to do so with TinyMCE. Rather, it comes with built-in modes which dictates how the toolbar should be arranged.
- Pros: very well documented, has lots of extensions due to its maturity.
- Cons: rigid in structure, limited creative surface.
ContentTools
The highlight of this library is that it provides drag-and-drop functionalities out of the box. Text is just a block that can be pick up and move to another corner. It is a nice thing to have, especially when you are building not just an article editor but some sort of text centric landing builder.
ContentTools is DOM-based. Its API works directly on DOM nodes and is rather low level. The documentation seems to be written by a single person. You can think of it as a combination of 3 smaller libraries, which control the edit area, selection range and the tools respectively.
- Pros: Its editor has built-in drag-and-drop support.
- Cons: may not get a lot of support due to low popularity and lack of a big community behind.
Anthony Blackshaw
Quill
Quill's core concepts are quite easy to grasp. It has basic configuration for simple needs and functionalities can be added as modules. Quill has been around for a few years with a large community. It's likely that your requirements can be provided by some 3rd party modules.
For anything out of the ordinary, you can create a so-called Blot, which is basically a component class that tells Quill how to render it self.
- Pros: Simple and clear core concepts. Well documented and you will be able to get started within a few minutes.
- Cons: Quill is not built for React. If that is your stack, you will need to rely on additional wrappers.
Slate
Slate is new in town. It is in Beta, use it be prepared that the APIs is changing. What makes Slate stand out is that it is built on React, the hugely popular view framework.
That, to many, is a plus in itself. It also has the advantage of React rendering mechanism. To Slate, every element in the editor, be it a text range or a embedded snippet is simply a React Node, which help it generalizes the rendering part and makes extending core set of elements much easier.
Besides, being recent has its advantage. Slate promises to address shortcomings of existing libraries like Quill or Draft.js. Like Quill, it allows customization of the entire editing experience. Unlike Quill, Slate make no distinction between texts and other type of elements.
We did some early prototype with Slate. The docs and examples are great. One of the drawbacks of being recent is that though the foundation is built out well, the higher level features like text formatting are up to us to figure out.
- Pros: excitingly new, large community with a clear mental model.
- Cons: still in Beta, unstable apis. Since Slate is still in its early phase without a lot of existing extensions, it would take considerable effort to implement basic editor features.
TipTap
TipTap is a React library based on ProseMirror. Tiptap has been around for a long time, and at first glance, TipTap seems to check most of our boxes. It has an easy to understand documentation. You would get the idea of how customization works skimming through their documentation. Some of the features we already have in mind, like the hovering toolbar, come out of the box. And Tiptap makes a point of being headless, that means every functionality is triggered via api, look and feel is up to you.
One theoretical drawback of Tiptap is that, if you use React, the tiptap-react wrapper is built on Tiptap, which in turn is built on ProseMirror. The layers of abstraction take you so far away from the underlying DOM. That in itself does not have any immediate consequences, but if you believe that simpler the better, that maybe cause for concern.
- Pros: Simple to use and has great feature out of the boxes. Support both React and Vue.
- Cons: being framework agnostic mean you have deeper layer of abstraction, and higher chance of something goes wrong. But that is purely our guess.
Lexical
Lexical is a framework created by Meta (formerly Facebook) and it is relatively new. Similar to Slate, Lexical does not have a mature eco-system of 3rd party plugins. But Lexical is growing fast and attracting lots of attention. Compared to Slate, Lexical official playground covers a lot more use cases (like table, draggable paragraphs ...). So forking out that repository is an option, it just does not have the neat feeling of being able to install plugins.
Another added advantage of being created by Meta is that, Lexical has an bias towards React. It comes with a default React binding. In Lexical, everything is a plugin, the Toolbar, the hovering menu, so the concept is rather consistent. Though we have not get our hand dirty, our impression is that it would be quicker to get started with Lexical custom plugin than with TipTap.
- Pros: simple concepts and demonstrates lots of use cases via playground. First class support for React.
- Cons: at this stage, Lexical users should spend effort reading through the source code since documentation is sparse.
Verdict
We really like Lexical with its powerful playground. However, the only way to port all those plugins to your project is by copy-paste, which requires lot of work, especially when Lexical releases a new version.
Tiptap remains a more sensible choice for now.