React-draft-wysiwyg: Replace inline images with custom icons or only letters

[hmontes]

Hi again

Can i replace the inlines images (bold for example) for custom icons (material or font awesone for example) or for letters? (Example. blockType.inDropdown: false).

Thanks

[hmontes]

And/or put a custom image/svg in blocks. Something like:

blockType: {
inDropdown: false,
options: ['H1'],
H1: {icon: looksOne}
}

[jpuri]

@hmontes : this should be possible. Check example here: https://github.com/jpuri/react-draft-wysiwyg/blob/master/docs/src/components/Demo/EditorStyledToolbar/index.js

[justinobney]

@jpuri @hmontes This does not look possible for blockType it only renders text as the button content

see: https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/controls/BlockType/Component/index.js#L62

I too would like this feature. Particularly the ability to set a custom icon and allow toggling between Header/Normal by clicking the icon. Currently this works by only showing the desired header option inline, you just cant set the icon. However, you do appear to be able to change the text (ex: H2) to something else using translations.

[justinobney]

@jpuri @hmontes I was able to hack around and get this working.

import en from 'react-draft-wysiwyg/src/i18n/en';
import fontSize from 'img/font-size.svg';

en['components.controls.blocktype.h2'] = <img src={fontSize} alt="font size" />;
const localization = {
  locale: 'en',
  translations: en,
};
// ...
<Editor
  editorState={editorState}
  wrapperClassName="content-wrapper"
  editorClassName="content-editor"
  toolbarClassName="toolbar-wrapper"
  onEditorStateChange={this._onEditorStateChange}
  localization={localization}
  placeholder="Tell your story..."
  toolbar={TOOLBAR_OPTIONS}
/>

[jpuri]

@justinobney : that is interesting hack 😄

Also editor allow using custom react component for existing toolbar options, you can check this example from docs: https://github.com/jpuri/react-draft-wysiwyg/tree/master/docs/src/components/Demo/EditorCustomizedToolbarOption

Using react-color for color-picker instead of default one.

[Drafter500]

Hi, is it possible to replace inline icons with react component?
In your example with color picker it works because color picker is a separate option, and I want to replace bold and italics icons, which are part of "inline" set. Is this possible?

[justinobney]

@Drafter500 see my example, I do the same thing

[Drafter500]

@justinobney This works for blocktypes because blocktype component directly renders the translation object. But it does not work for inlines (bold, italics, etc.) because it renders translation as title tooltip.

@jpuri
So it would be extremely cool, if there is another option in config of each option (like component: <MyComponent />), so that I could pass my component to be rendered instead of <img src={icon}>

[jpuri]

@Drafter500 : you can write your own implementation of all inline options. Like color-picker its possible, you need to rewrite this.

But its not possible atm to pass component to replace icon of single inline option - though you can pass icon to replace it.

[melloc01]

Hi @jpuri - I tried to close this PR but I was missing something on extractInlineStyles function (https://github.com/melloc01/react-draft-wysiwyg/commits/master). Then a workaround came to my mind, you guys can just do it via CSS while it doesn't support officially.

    .rdw-inline-wrapper {
        > div {
            img {
                display: none;
            }

            font-family: 'Font Awesome 5 Pro';
            font-weight: 900;

            &:nth-of-type(1) {
                &:after {
                    /* Bold */
                    content: '\\F032';
                }
            }
            &:nth-of-type(2) {
                &:after {
                    /* Italic */
                    content: '\\F033';
                }
            }
        }
    }