Redo/Undo button icons are not customizable
rmakovyak opened this issue · comments
Do you want to request a feature or report a bug?
Bug
What is the current behaviour?
Redo and Undo controls buttons cannot be overwritten with custom icons
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. GIFs and screenshots are very helpful too.
Editor config that I'm using
<DraftailEditor
{...otherProps}
rawContentState={fromHTML(content)}
onSave={data => onChange(toHTML(data))}
showUndoControl={{
description: t('editor.undo'),
icon: <FontAwesomeIcon icon={faUndo} size="xs" />,
}.UNDO}
showRedoControl={{
description: t('editor.redo'),
icon: <FontAwesomeIcon icon={faRedo} size="xs" />,
}}
inlineStyles={[
{
type: INLINE_STYLE.UNDERLINE,
icon: <FontAwesomeIcon icon={faUnderline} size="xs" />,
description: t('editor.underline'),
}
]}
/>
Result:
The icon does not appear inside button control.
It works correctly for INLINE or BLOCK styles blocks though.
What is the expected behaviour?
The icon should appear inside button control.
Which versions of Draftail + Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draftail or Draft.js?
^1.0.0, Chrome, MacOS, don't know
Hey @rmakovyak, thanks for the report!
Looking at the code, it does seem like the icon
isn't forwarded to those buttons:
draftail/lib/components/ToolbarDefaults.js
Lines 182 to 197 in d90f9e6
This is how it's done for the line break, the implementation should be the same for undo/redo:
draftail/lib/components/ToolbarDefaults.js
Lines 161 to 163 in d90f9e6
Would you be up for making a PR to fix this?
hey @thibaudcolas! thanks for quick response. Yes, i'll make a PR with a fix
Fixed in #196. Sorry it took me so long to get back to this – I’ll try to make a release shortly.
This is now released in Draftail v1.3.0 – https://www.draftail.org/blog/2019/08/15/draftail-v1-3-0-community-improvements-beyond-wagtail thanks again @rmakovyak for reporting & fixing this.