Still cutting my teeth with React and the Gutenberg components. While I've managed to write custom blocks thanks to the docs and other tutorials, I'm now stuck on this latest challenge.

I'm trying to use the RichText editor component on an arbitrary admin page (ie. not a block in the Gutenberg/WP5 post editor), and allow for formatting of a text input.

While I can add the editor, what I can't figure out is how to control the TextArea using toolbar buttons, for things like formatting options and inserting text at cursor points.

The RichText component doesn't appear to display a toolbar by default (tried isSelected), so have manually added the Toolbar components and want to link it all together.

In TinyMCE, something like execCommand could be used for a fair bit of control over the editor, but what's the best way to do this with the RichText component?

Here is my current code:-

const { __ } = wp.i18n;
const { RichText } = wp.editor;
const { Toolbar, ToolbarButton } = wpponents;
const { Fragment } = wp.element;

class Test extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            text: 'test me, a sentence that wants to be bold'
        }
    }

    render() { 
        return  <Fragment>
                    <Toolbar>
                        <ToolbarButton
                            title={ __('Bold') }
                            name='bold'
                            onClick={ () => { 
                                console.log('bold'); 
                                /* how best to control the RichText from here? */
                            } }
                            icon="editor-bold"
                            extraProps={ { hint: __( 'Bold text' ) } }
                        />
                    </Toolbar>                              
                    <RichText
                        tagName='div'
                        className='rt-test'
                        isSelected = { true }
                        value={ this.state.text }
                        onChange={ ( newText ) => { this.setState( { text: newText } ); } }
                    />
                </Fragment>
    }

}   

ReactDOM.render(
    <Test />,
    document.getElementById('root')
);

console.log('Test Page Loaded');

Any helpful pointers would be great, I really don't want to resort to using wp_editor, especially when the rest of the page is working great written in React JSX, but this one has me stumped.