Why did Slate.js work for us, not other Modern JS Web editors
In app rich text editors are becoming quite common and useful. Users can write the content with appropriate formatting, highlighting the necessary.
One way to integrate such text editor is to develop it on your own from scratch. Fully cost effective and customised. This could be a good option for you only if your product is centred around typing and editors. For the rest, this is really a very painful approach. Managing your primary application along with this derived application will cost you more than what you can gain.
THE CHALLENGE:
This is somewhat we faced, here at CodeParva. After lot of discussions and evaluating pros & cons, we decided to use a third party library rendering the services of a rich text editor.
One of the main challenges while developing/integrating such a rich text editor was to find a suitable framework as per the requirements. It should not be too powerful otherwise we would be integrating something we may never use and it should be sufficient to fulfil our minimum requirements.
In the initial research, we shortlisted the top four editors based on our requirements — TinyMCE, CKEditor, Draft.js and Slate.js. TinyMCE and CKEditor are commercial frameworks having a freemium model. With the freemium approach the ROI was not good enough for us, hence we decided to explore Draft.js and Slate.js.
Draft.js
It is an open source framework developed by Facebook, that got introduced at React.js Conf in 2016. Draft.js model is built with immutable-js and its content model is flat. It has a huge community which makes it very easy to find some tutorials to start with. You can also find some WYSIWYG editors built on top of Draft.js which can be used and further customised to meet your requirements.
It all started well but we got stuck while getting deeper into it like implementing tables. DraftJS does not provide any out of the box solution for implementing tables because of its flat model structure. Though it is possible to implement tables using DraftJS, the code becomes very complex which makes the editor very slow.
. DraftJS does not provide any out of the box solution for implementing tables because of its flat model structure. Though, it is possible to implement tables using DraftJS but the code becomes very complex which makes the editor very slow.
Bummer!! Right?
It was a bad break-up, but we decided to move on and start looking beyond. Now, we needed an editor which can support nested structures so that the tables and page break can be implemented easily.
Slate.js
Slate.js is inspired from Draft.js (warning bells already!!😟😟) and other text editor libraries. It supports nested structure and one can implement the editors like Medium or Google Docs using it. SlateJS documents are well maintained and far more descriptive than DraftJS, it also provides some examples of implementing the basic features so one does not have to look elsewhere for the tutorials.
It was a match with Slate! Because of it’s nested structure we could easily develop tables, page break and other custom features.
Conclusion
If you want to build a very basic rich-text editor such as comment section or feedback forms, then Draft.js should be enough for you. But if the requirements are a little complicated and require advance features where you need to support tables or any other custom feature then SlateJS is the right framework for you.
And at last, if you have a few extra bucks and want to avoid all the headaches of development, then you can always go ahead with TinyMCE.
We at CodeParva are building our own seamless and smooth solution for the global self-storage industry. Join us here
Visit CodeParva Technologies to know more about us. Linkedin | Instagram
Useful links:
