DEV Community

Cover image for Draft-js text alignment in less than 5 minutes
Hosein Pouyanmehr
Hosein Pouyanmehr

Posted on • Edited on • Originally published at contenidojs.com

Draft-js text alignment in less than 5 minutes

#react #wysiwyg #draftjs #contenidojs

What is this post about?

Text alignment is one of the essential functionalities of an editor. Using the text alignment, the user can easily set the horizontal position of the context. If you did experience implementing alignment in draft-js you know that it can be time-consuming. In this tutorial, We'll implement text alignment utility in draft-js with the help of contenido.

Table of contents

Requirements

To be able to create an editor, the only requirement is to know how to set up a ReactJS (or NextJs) project. We're going to use
draft-js and contenido packages in this tutorial.

Draft JS

Draft-js is a rich text editor framework for React.

React More: A brief introduction to draft-js

Contenido

Contenido is a library with a set of tools to help you create your rich text editor on top of draft-js. We use contenido to boost the development process and avoid repetitive processes. Read this post to get familiar with contenido.

Installation

First, we will install React and Typescript (There will be a JS alternative for everything, so stick with your favorite one).



# typescript
npx create-react-app draft-text-alignment --template typescript

# javascript
npx create-react-app draft-text-alignment
Enter fullscreen mode Exit fullscreen mode

After the installation is done, install draft-js and contenido with this command:



# typescript
npm i draft-js @types/draft-js contenido@latest

# javascript
npm i draft-js  contenido@latest
Enter fullscreen mode Exit fullscreen mode

Create Editor component

After setting up the project, create a components folder in the src directory and then create the Editor component:

Typescript:



// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface TextAlignmentEditorProps {}

const TextAlignmentEditor: FC<TextAlignmentEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>// We'll add the toolbar here</div>
      <div>
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

Javascript:



// src > components > Editor.jsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

const TextAlignmentEditor = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>// We'll add the toolbar here</div>
      <div>
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

To make the editor more visible add the border styles to the div:



...
      <div style={{
         border: '1px solid #252525',
         borderRadius: '0.5rem',
         padding: '0.5rem 1rem',
        }}
      >
        <Editor editorState={editorState} onChange={setEditorState} />
      </div>
...
Enter fullscreen mode Exit fullscreen mode

Add Placeholder

Also adding a placeholder can be useful, so:



...
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
...
Enter fullscreen mode Exit fullscreen mode

Add Toolbar Buttons

Now, it's time to add the buttons to the toolbar. First we will create an array of buttons to map them in the toolbar. After that,
we use JS map to render the buttons.

Added lines are the same for both JavaScript and TypeScript:



// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface TextAlignmentEditorProps {}

const buttons = [
  { title: 'left' },
  { title: 'center' },
  { title: 'right' },
  { title: 'justify' },
];

const TextAlignmentEditor: FC<TextAlignmentEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        {buttons.map((button) => (
          <button
            key={button.title}
            style={{
              minWidth: '2rem',
              padding: '0.5rem',
              borderRadius: '0.5rem',
              border: 'none',
              cursor: 'pointer',
              textTransform: 'capitalize',
            }}
          >
            {button.title}
          </button>
        ))}
      </div>
      <div>
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
        />
      </div>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

To toggle between text alignments, we'll use the toggleTextAlign utility of contentio and pass the alignment key to that..



// src > components > Editor.tsx
....
import {
  Editor,
  toggleTextAlign // Import this utility
} from 'contenido';
...
Enter fullscreen mode Exit fullscreen mode

The editor needs a function to properly style the alignment. To do so, import the blockStyleFn from contenido and pass it as an
attribute to the editor component. Also the default keys for alignment starts with text-align- in contenido.



// src > components > Editor.tsx
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, blockStyleFn, toggleTextAlign } from 'contenido';

// Types
import type { FC } from 'react';

// Custom Types
export interface TextAlignmentEditorProps {}

const buttons = [
  { title: 'left' },
  { title: 'center' },
  { title: 'right' },
  { title: 'justify' },
];

const TextAlignmentEditor: FC<TextAlignmentEditorProps> = (props) => {
  // States
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div>
      <div>
        {buttons.map((button) => (
          <button
            key={button.title}
            style={{
              minWidth: '2rem',
              padding: '0.5rem',
              borderRadius: '0.5rem',
              border: 'none',
              cursor: 'pointer',
              textTransform: 'capitalize',
            }}
            onMouseDown={(e) => {
              e.preventDefault();
              toggleTextAlign(
                editorState,
                setEditorState,
                `text-align-${button.title}`
              );
            }}
          >
            {button.title}
          </button>
        ))}
      </div>
      <div>
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          placeholder='Write here...'
          blockStyleFn={blockStyleFn}
        />
      </div>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

To have the alignment work properly import contenido styles into your App.tsx (or _app.tsx in next.js).



...
// Styles
import 'contenido/dist/styles.css';
...
Enter fullscreen mode Exit fullscreen mode

The editor basic alignment should work properly up to this point, but as an improvement we can change the style of selected
button to illustrate the difference. There is also a function for each of these alignments to find out if it is the selected
alignment or not.




// src > components > Editor.tsx

import { useState } from 'react';

import { EditorState } from 'draft-js';

import {

  Editor,

  blockStyleFn,

  toggleTextAlign,

  isTextRightAligned,

  isTextCenterAligned,

  isTextLeftAligned,

  isTextJustifyAligned,

} from 'contenido';



// Types

import type { FC } from 'react';



// Custom Types

export interface TextAlignmentEditorProps {}



const buttons = [

  { title: 'left', checker: isTextLeftAligned },

  { title: 'center', checker: isTextCenterAligned },

  { title: 'right', checker: isTextRightAligned },

  { title: 'justify', checker: isTextJustifyAligned },

];



const TextAlignmentEditor: FC<TextAlignmentEditorProps> = (props) => {

  // States

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



return (

    <div>

      <div>

        {buttons.map((button) => (

          <button

            key={button.title}

            style={{

              minWidth: '2rem',

              padding: '0.5rem',

              backgroundColor: button.checker(editorState)

                ? '#4cb5f5'

                : 'rgba(125, 125, 125, 0.25)',

              color: button.checker(editorState) ? '#fff' : 'inherit',

              borderRadius: '0.5rem',

              border: 'none',

              cursor: 'pointer',

              textTransform: 'capitalize',

            }}

            onMouseDown={(e) => {

              e.preventDefault();

              toggleTextAlign(

                editorState,

                setEditorState,

                text-align-</span><span class="p">${</span><span class="nx">button</span><span class="p">.</span><span class="nx">title</span><span class="p">}</span><span class="s2">

              );

            }}

          >

            {button.title}

          </button>

        ))}

      </div>

      <div>

        <Editor

          editorState={editorState}

          onChange={setEditorState}

          placeholder='Write here...'

          blockStyleFn={blockStyleFn}

        />

      </div>

    </div>

  );

};
Enter fullscreen mode Exit fullscreen mode




Result

This is the result:

A gif of text alignment in draft-js

You can also check the live demo.

A banner of become a backer

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 (2)

Collapse
 
olisa_isama_b3849eb38b010 profile image
Olisa Isama •

Hi Im having a problem with my decorator instance. Anytime the decorator takes place based on some regex like mention, if a press the spacebar to create another text writing a single char, if i want to erase that char by pressing backspace the cursor moves to the front of the text without erasing the text. But if i type a second character after and perform the backspace to erase the chars after the decorator block it erases

Collapse
 
hpouyanmehr profile image
Hosein Pouyanmehr •

Hey Olisa,
Sorry for the delay (I didn't get any notification email about your comment).

If your issue still remains can you please create a repository for that or report the issue on GitHub, it is hard to reproduce that in this way.

Read next

stacks_gather_f66c31eb9d6 profile image

Step-by-Step Guide: Create a React Native CLI IOS & Android App Using Version 0.76

stacks gather -

viktorle1294 profile image

How to visualize bar chart with react-chart-2, showing label on the bar

Viktor Le -

mohammadfaisal profile image

Setup Mixpanel Analytics in a NextJS Application

Mohammad Faisal -

lucasbrogni1 profile image

Removing code smells: Using dependency injection through Props in React

Lucas Brogni -