draft-js-utils-collection v0.1.0

DraftJS utils

Some basic utilities for much simpler work with DraftJS

Utilities

• Toggle buttons
• Custom component
• Default inline and block styles

Toggle buttons

import {createToggleInlineStyleButton, createToggleBlockStyleButton} from 'draft-js-utils';

const EditorButton = ({toggleStyle, isActive, children}) => {
    const handleClick = () => {
        toggleStyle();
    };
    return (
        <a href="" onClick={handleClick}>{children}</a>
    );
}

const InlineStyleButton = createToggleInlineStyleButton(EditorButton);
const BLockStyleButton = createToggleBlockStyleButton(EditorButton);

<InlineStyleButton style="BOLD">B</InlineStyleButton>

Custom component

import {createComponentWithEditorContext} from 'draft-js-utils'

const MyModalWindow = ({getEditorState, setEditorState}) => {
    const handleClick = () => {
        setEditorState(/*....*/);
    };
    return (
        <Modal>
        	<a href="" onClick={handleClick}>Click</a>
        </Modal>
    )
};

const MyModalWithEditorContext = createComponentWithEditorContext(MyModalWindow);

Default inline and block styles

import {DefaultInlineStyles, DefaultBlockStyles} from 'draft-js-utils'

const buttons = [
    {style: DefaultInlineStyles.BOLD, children: <i className="fas fa-bold" />},
    {style: DefaultInlineStyles.ITALIC, children: <i className="fas fa-italic" />},
    {style: DefaultBlockStyles.ORDERED_LIST, children: <i className="fas fa-list-ol" />}
];