Inline-Toolbar & Side-Toolbar configuration options

Hello,

In the docs, there a comment about creating a toolbar instance, and that you can pass in a config object. Can you clarify what this config object looks like? Also, Can I pass in custom buttons?

// Creates an Instance. At this step, a configuration object can be passed in 
// as an argument.
const sideToolbarPlugin = createSideToolbarPlugin();

Thank you,

[amannn]

@Alex-ray Hmm, true!

I can only see that solved through React’s context at this point, which is maybe similar to your current workaround. But currently you’re restricted to a fixed number of buttons anyway. With PR #729 you’d be able to change the buttons at run time, but you’d still be dependent on a special system like React context or pub/sub or so if you want to change them from the outside, as you can not use regular props.

Currently the Toolbar component is exported already pre-populated with the necessary props. Maybe it would make sense to use a different HOC there that only sets the predefined props if they are not already present – e.g. decorateComponentWithDefaultProps.

Therefore <SideToolbar /> would still render the way it does currently, but it would allow for <SideToolbar structure={[DynamicButton1, DynamicButton2]} /> to be rendered next to the editor.

Not sure if this is the best way though. Maybe @nikgraf has more insights.

[amannn]

@Alex-ray Can you provide a use case for the prop you want to pass to the structure? Chances are this is already possible.

E.g. you can do:

const sideToolbarPlugin = createSideToolbarPlugin({
  structure: [props => <TooltipTrigger {...props} specialProp={12} />]
});

There’s also a package called decorate-component-with-props on npm that helps with this use case.