Build your draft-js editor fast and easily with contenido!

What is this post about?

From creating a simple comment input box with some basic features to creating a rich text editor for your CMS, finding the proper solution and development path can be challenging and time consumable. In this post, I'll introduce you to a way to create a rich text editor (RTE) with draft-js and contenidojs that will adapt to your UI library and your design principles.

What we're going to check? (Table of contents)

• draft-js introduction
• contenidojs
• contenidojs + TypeScript
• contenidojs compatibility with different UI libs
• How to build a simple RTE in react with contenidojs?
• contenidojs + nextjs

Draft-JS (Powerful but confusing)

As the draft-js official website says, draft-js is a:

Rich Text Editor Framework for React

Although the draft-js home page example is basic, the true power that comes with it is a lot. You can almost create whatever you like to be your RTE. Draft-js lets you to do simple inline styling, media handling and add complicated stuffs like mentions and hashtags.

You'll indeed have a first-class rich text editor, but it takes a lot of effort and time for more complicated things. You'll be ok if you just need to add bold and italic styles for example. But things became harder to handle and understand when your needs of the editor is more than that. Unfortunately, the draft-js documentation isn't that comprehensive and sometimes you can't find your answers on the docs. This is the point that contenido-js become handy.

ContenidoJS (A game changer for draft-js)

Contenidojs is a react library on top of draft-js. This means it will use draft-js as its core and add something that makes it more powerful and easier to use. If you have experience in using the redux and redux toolkit, You can feel the difference here as well. You can think of draft-js as redux and the contenidojs will be RTK (Redux Toolkit).

We'll check out the contenidojs library compatibility with Next.js and UI libraries later on in this article, but these are some of contenido's features and benefits:

• Basic inline styles as well as custom ones
• Ready-to-use utilities for headings, lists, blockquotes, and more.
• Ready-to-use utilities for handling media. (You'll get mad if you want to implement these just with draft-js)
• Text alignment utilities
• Style, block type, and media clearance
• Shortcut support and customization
• Utilities to limit the user, count the editor entities

Check out the contenido's features here.

ContenidoJS and TypeScript

While draft-js is written in JS and you need to add types to it manually, contenidojs is written in TypeScript and you don't need to do extra stuffs for type handling.

ContenidoJS + UI Libraries and Styling

You may find a lot of packages and frameworks that offer you a solution to create and add an RTE to your project easily but there is a common issue and its styling. You may find customization in their docs but when you try to customize the editor you won't be able to customize them that much. Despite other libraries, contenidojs isn't an 'install and use' text editor. It will do all the editor-handling stuff and lets you focus on the UI. So you can easily build an RTE with your favorite UI library like Material-UI (MUI), Tailwind CSS, Bootstrap, Ant Design, Chakra UI, and ...

The main purpose is to give you the ability to create your custom look rich-text editor a lot faster and easier.
Contenido's Home Page

How to build a simple RTE in react with contenidojs?

This is an example of using contenidojs in your code. For more examples check out the official docs.

Setup

• First we'll create a react app. TypeScript:

npx create-react-app contenidojs-tutorial --template typescript

JavaScript:

npx create-react-app contenidojs-tutorial

• Then install draft-js.

TypeScript:

npm i draft-js @types/draft-js

JavaScript:

npm i draft-js

• And finally install contenidojs:

npm i contenido

ContenidoJS is written in TypeScript and there is no need to install types for that.

Usage

This is an example of an editor component with shortcuts and bold, italic and underline utilities.

import { useState } from 'react';
import { EditorState } from 'draft-js';
import { 
  Editor, 
  isBold, 
  toggleBold ,
  isItalic,
  toggleItalic,
  isUnderline,
  toggleUnderline,
  getDefaultKeyBindingFn,
  shortcutHandler
} from 'contenido';

const CustomEditor = () => {
  const [editorState, setEditorState] = 
    useState(EditorState.createEmpty());

  const toolbarButtons = [
    {name: 'Bold', handler: toggleBold, detector: isBold},
    {name: 'Italic', handler: toggleItalic, detector: isItalic},
    {name: 'Underline', handler: toggleUnderline, detector: isUnderline},
  ]

  return (
    <>
      <Editor 
        editorState={editorState} 
        onChange={setEditorState}
        handleKeyCommand={shortcutHandler(setEditorState)}
        keyBindingFn={getDefaultKeyBindingFn}
      />
      {
        toolbarButtons.map(btn => (
          <button
            key={btn.name}
            onMouseDown={(e) => {
              e.preventDefault();
              btn.handler(editorState, setEditorState)
            }}
            style={{
              color: btn.detector(editorState) ? 
                'skyblue' 
                : 
                'black'
            }}
          >
            {btn.name}
          </button>
        ))
      }
    </>
  )
}

export default CustomEditor;

For more examples check out the official site.

ContenidoJS and Next.js

You can use contenidojs with SSR as well. The only thing that you need to pay attention is the very first state of your editor. Each block in draft-js state have a unique key. This may cause issues when you're using SSR frameworks for react like Next.js. To solve the issue (Base on this doc):

import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, emptyRawContentState } from 'contenido';

const emptyContentState = convertFromRaw(emptyRawContentState)

const Demo = () => {
  const [editorState, setEditorState] = useState(
    EditorState.createWithContent(emptyContentState)
  );

  return (
      <Editor
        editorState={editorState}
        onChange={setEditorState}
        editorRef={editorRef}
      >
  )
}

export default Demo;

---

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.

Comments

[ndotie]

am copy & paste this codes to my project. and if they work 'ill be the happiest person on office planet

[Hosein Pouyanmehr]

😁😁

Did it work as you expected?