textAlignment.css

.public-DraftStyleDefault-ltr {
	.justify-left & {
		text-align: left;
	}
	.justify-right & {
		text-align: right;
	}

	.justify-center & {
		text-align: center;
	}

	.justify-full & {
		text-align: justify;
	}
}

TextAlignment.js

import React, { PureComponent } from 'react';
import { createBlockStyleButton } from 'draft-js-buttons';
import TextAlignmentButton from './TextAlignmentButton';
import { TYPES } from 'textAlignment';

export default class Alignment extends PureComponent {
	buttons = TYPES.map((type) => {
		const Button = createBlockStyleButton({
			blockType: type,
			key: type,
			children: <TextAlignmentButton type={ type } />,
		});

		return Button;
	});

	render() {
		return this.buttons.map(Button => <Button { ...this.props } />);
	}
}

textAlignment.js

import './textAlignment.css';

export const TYPES = ['justify-left', 'justify-right', 'justify-center', 'justify-full'];

export default () => ({
	blockStyleFn: (contentBlock) => {
		const type = contentBlock.getType();

		return TYPES.includes(type) && type;
	},
});

TextAlignmentButton.js

import React, { PureComponent } from 'react';

export default class Alignment extends PureComponent {
	render() {
		return (
			<div>
				<svg xmlns="http://www.w3.org/2000/svg" width="11" height="14" viewBox="0 0 11 14">
					<g fillRule="evenodd">
						<rect width="12" height="2" x="0" y="2" rx="1" />
						<rect width="12" height="2" x="0" y="6" rx="1" />
						<rect width="12" height="2" x="0" y="10" rx="1" />
					</g>
				</svg>
			</div>
		);
	}
}