application/components/common/simple-editor/block-style-controls.js

import React from 'react';
import StyleButton from './style-button';

const BLOCK_TYPES = [
    {label: 'Blockquote', style: 'blockquote', icon: 'format_indent_increase'},
    {label: 'UL', style: 'unordered-list-item', icon: 'format_list_bulleted'},
    {label: 'OL', style: 'ordered-list-item', icon: 'format_list_numbered'}
];

/**
 * Render block styling buttons
 */
const BlockStyleControls = (props) => {
    const {editorState} = props;
    const selection = editorState.getSelection();
    const blockType = editorState
        .getCurrentContent()
        .getBlockForKey(selection.getStartKey())
        .getType();

    return (
        <div className="simple-editor-controls">
            {BLOCK_TYPES.map((type) =>
                <StyleButton
                    key={type.label}
                    active={type.style === blockType}
                    label={type.label}
                    icon={type.icon}
                    onToggle={props.onToggle}
                    style={type.style}
                />
            )}
            {props.children}
        </div>
    );
};

export default BlockStyleControls;