How can I update custom `react-draft-wysiwyg` icons for `blockType` options?

157 Views Asked by At

I have the following Editor utilizing react-draft-wysiwyg:

<Editor
    // ...other props
    toolbar={toolbarOptions}
/>

The toolbarOptions are set up to handle custom icons for all of my options. I followed a similar pattern for blockType options ('H1' and 'H2' here) as the other options, as the icons are successfully being applied. The H1 and H2 buttons appear in the toolbar, but without the custom icons:

const toolbarOptions = {
    options: ['blockType', 'inline', 'list', 'link', 'history'],
    blockType: {
        inDropdown: false,
        options: ['H1', 'H2'],
        H1: {                       // not working
            icon: HeaderOneIcon,
            className: ""
        },
        H2: {                       // not working
            icon: HeaderTwoIcon,
            className: ""
        }
    },
    inline: {  
        options: [ 'bold', 'italic' ],  
        bold: { 
            icon: BoldIcon,
            className: "text-editor-icon-left text-editor-bold-button" 
        },
        italic: {
            icon: ItalicIcon, 
            className: "text-editor-icon-left" 
        },
    },
    list: { 
        options: ['unordered', 'ordered'],
        unordered: { icon: FormatListBulletedIcon, className: "text-editor-icon-left" },
        ordered: { icon: FormatListNumberedIcon, className: "text-editor-icon-left" },
    },
    link: { 
        options: ['link'],
        link: { icon: LinkIcon, className: "text-editor-icon-left" }, 
    },
    history: {
        undo: { icon: UndoIcon, className: "text-editor-icon-right" },
        redo: { icon: RedoIcon, className: "text-editor-icon-right" },
    }
}

I've tried changing the key values from H1/H2 to h1/h2, "H1"/"H2", and "h1"/"h2", and I've also tried adding and removing classNames from those options. Anyone know what I am missing here?

0

There are 0 best solutions below