Redo/Undo button icons are not customizable

[Roman Makovyak]

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

[Thibaud Colas]

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

 {showUndoControl ? ( 
   <ToolbarButton 
     name={UNDO_TYPE} 
     onClick={onUndoRedo} 
     label={getButtonLabel(UNDO_TYPE, showUndoControl)} 
     title={getButtonTitle(UNDO_TYPE, showUndoControl)} 
   /> 
 ) : null} 
  
 {showRedoControl ? ( 
   <ToolbarButton 
     name={REDO_TYPE} 
     onClick={onUndoRedo} 
     label={getButtonLabel(REDO_TYPE, showRedoControl)} 
     title={getButtonTitle(REDO_TYPE, showRedoControl)} 
   /> 

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

 icon={ 
   typeof enableLineBreak !== "boolean" ? enableLineBreak.icon : null 
 } 

Would you be up for making a PR to fix this?

[Roman Makovyak]

hey @thibaudcolas! thanks for quick response. Yes, i'll make a PR with a fix

[Thibaud Colas]

Fixed in #196. Sorry it took me so long to get back to this – I’ll try to make a release shortly.

[Thibaud Colas]

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.