Creating custom toolbar buttons

[louh]

Is this possible right now? I'd like the export-Markdown functionality to be on a toolbar button, for example. Let me know if you also need any help, I'd be happy to make a PR for this.

[sstur]

This seems like a good feature. I'd be open to a PR for this. (Edit: it's not possible right now.)

[dpetranek]

I think we should change the README, which seems to advertise the ability to create custom buttons:

// The toolbarConfig object allows you to specify custom buttons, reorder buttons and to add custom css classes.

I've just spent some time trying to migrate our application from TinyMCE to this under the assumption that the above comment meant I could add custom buttons, so when I found this issue I was unpleasantly surprised.

If we replace "specify custom buttons" with "add or remove stock buttons" or something like that it would be much more clear.

[ssilve1989]

Is there any update on this? I'd really like the ability to just extend react-rte with custom buttons than roll my own entire editor with Draft.js

[prule]

I'd be interested in this too! Thanks.

[mcdave]

Any update about this?

[sandorvasas]

Really much in need of this

[machineghost]

@sstur could you comment on what exactly needs to be done to make this happen?

I understand that as the maintainer you don't have the bandwidth to implement every feature, but if you could at least just explain what the complicating factor is here that would be helpful. Rendering custom buttons should be trivial, but if they were you'd presumably have added them already, so ... what's missing (and non-obvious) that a PR would need to provide?

P.S. This seems like it could be some low-hanging fruit for the "improve customization" part of v2: https://github.com/sstur/react-rte/issues/371

[machineghost]

Follow-up: I dug through the code, and it looks like maybe all that's needed is documentation? I found the customControls prop, and when I provide it ...

const customControls = [() => <button>Foo</button>];
return <RichTextEditor {...{ customControls, ...otherProps }}

I'm able to get a "Foo" button to appear in the editor.

[haresh6x]

Follow-up: I dug through the code, and it looks like maybe all that's needed is documentation? I found the customControls prop, and when I provide it ...

const customControls = [() => <button>Foo</button>];
return <RichTextEditor {...{ customControls, ...otherProps }}

I'm able to get a "Foo" button to appear in the editor.

Can you help me know how to append the output of "foo" button in react-rte. I am getting the button output onClick in my console. I have no idea how to display it in the editor.