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?