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
- Installation
- Create Editor Component
- Add Placeholder
- Add Toolbar Buttons
- Result and Demo
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
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
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>
);
};
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>
);
};
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>
...
Add Placeholder
Also adding a placeholder can be useful, so:
...
<Editor
editorState={editorState}
onChange={setEditorState}
placeholder='Write here...'
/>
...
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>
);
};
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';
...
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>
);
};
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';
...
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-${button.title}`
);
}}
>
{button.title}
</button>
))}
</div>
<div>
<Editor
editorState={editorState}
onChange={setEditorState}
placeholder='Write here...'
blockStyleFn={blockStyleFn}
/>
</div>
</div>
);
};
Result
This is the result:
You can also check the live 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.
Top comments (0)