draft-js-plugin-editor-toolbar-picker

Picker component for draft-js-static-toolbar-plugin and draft-js-inline-toolbar-plugin

Usage

Install via npm:

$ npm i draft-js-plugin-editor-toolbar-picker

And use in your project:

import {
    BlockquoteButton,
    BoldButton,
    CodeBlockButton,
    CodeButton,
    HeadlineOneButton,
    HeadlineThreeButton,
    HeadlineTwoButton,
    ItalicButton,
    OrderedListButton,
    UnderlineButton,
    UnorderedListButton
} from 'draft-js-buttons'

import createPicker, { createTriggerButton } from 'draft-js-plugin-editor-toolbar-picker'
const Picker = createPicker({
    triggerItem: createTriggerButton({ child: 'H' }),
    items: [
        HeadlineOneButton,
        HeadlineTwoButton,
        HeadlineThreeButton
    ]
    /* 
    other options:
    autoClose: boolean -> Auto close if click another location, default `true`
    closeButton: ReactNode -> Close button when `autoClose` is `false`
    */
})

const toolbarPlugin = createToolbarPlugin({
    structure: [
        BoldButton,
        ItalicButton,
        UnderlineButton,
        CodeButton,
        Separator,
        Picker,   // Use `Picker` as an item button
        UnorderedListButton,
        OrderedListButton,
        BlockquoteButton,
        CodeBlockButton
    ]
})

License

MIT