What is this post about?
Although you get a bunch of features out of the draft-js framework, there are still some issues that can affect your negatively. In this post, we'll check out the contenido library that helps you use draft-js efficiently and save the time.
Table of contents
- What is a rich text editor?
- Draft-js pros and cons
- What is contenido?
- Features of contenido
- Why to use contenido?
What is a draft-js?
Draft-js is an open-source react rich text editor framework that allows you to build editors for your web application. With draft-js, you can almost create whatever you want as your editor features.
Read more: A brief introduction to draft-js
Draft-js pros and cons
These are the common draft-js benefits:
- Almost quick setups for basic usage
- You can have a highly customizable editor
- You can build a full-feature RTE
- You can convert its state to HTML, Raw Object, or even Markdown
And these are the common downsides:
- Time-consuming if you want to build a full-featured editor
- You may end up with a repetitive process
- Its documentation isn't comprehensive
- The plugin approach can make your
package.jsona bit ugly
What is contenido?
Draft-js has a lot of potential that can make your work outstanding. However most of the time, its downsides persuade the developers to choose another library for their project. As mentioned earlier, you may end up repeating yourself in a lot of similar situations and that leads you to ask why should I use my time incorrectly like this? If you have some experience in Redux, the feeling can be the same.
Redux on its own is a really powerful state management library, But the efforts, the time, the repetition, and the complexity can make you choose an alternative.
Contenido is something like redux-toolkit to redux. You can skip the repetitions and be out of the complexity, saving a lot of time for your other tasks and have a clean sight of what you're doing.
As the official documentation says:
Contenido is a library with a set of tools to help you create our own editor on top of draft-js without thinking about how to handle things.
Features of contenido
These are some of contenido's features. For each section you'll also have utilities to implement your desired style or functionality.
- Inline Styles (Bold, italic, underline , ...) + Customization
- Block Types (H1 to H6, OL, UL, Blockquote, ...) + Customization
- Insertion (Media and File, Link) + Customization
- Built-in Text Alignment
- Counters and Limitation utilities
To see the complete list of its utilities checkout this page.
Why to use contenido?
Contenido will be your agent to handle stuff in building a rich react text editor. These are some of the key benefits of using contenido with draft-js:
Time Saver
Using contenido helps you save a lot of time. You don't need to write every single editor's behavior on yourself. In 99% of
situations there is a ready-to-use utility for you.
Simplicity
The job is done for you in contenido, and there is no complexity to ruin your focus or coding principles.
Light Weight and Tree Shakeable
Contenido is written in a modular way. Each utility has its module and there is no unusual connection between those modules which
leads to a very small import size.
Typescript
Contenido is written in typescript so unlike the draft-js you have the benefits of types as well.
Compatible with UI Libs
If you choose a ready-to-use text editor (even if it's on top of the draft-js), you should accept the incompatible components' appearances in your application. With contenido, you have the functionality and can completely mix it with your UI library like MUI, BootStrap, Tailwind or even your UI principles.
Hi! I'm Hosein Pouyanmehr. I enjoy sharing what I learn and what I find interesting. Let's connect on LinkedIn.
See my code interests on GitHub.
Top comments (0)