I use a ContentEditable from react-contenteditable, inside of it I would like to render a button, which opens a menu on click, like this one. It already works, when I render the button normally as a component (not inside the Contendeditable).

Unfortunately, react-contenteditable only allows me to set the html as shown in this example.

I have already tried to use ReactDomServer.renderToStaticMarkup and ReactDomServer.renderToString, but the button is firing the defined onClick function when I click it.

Here is the code I tried: (addSummaryStatementButton is the corresponding button and ContentEditable the corresponding contend-editable.

render = () => {
        const addSummaryStatementButton =
            <AddSummaryStatementButton addSummaryStatement={() => console.log('add summary statement')}/>;
        const staticMarkup = ReactDomServer.renderToStaticMarkup(addSummaryStatementButton);
        const stringMarkup = ReactDomServer.renderToString(addSummaryStatementButton);

        let summary = this.props.summary;
        summary = summary + '<br />' + staticMarkup + '<br />' + stringMarkup;

        return <div className='summary-area'>
            <div className='summary'>
                <ContentEditable
                    html={summary}
                    disabled={false} // use true to disable edition
                    onChange={this.handleChange} // handle innerHTML change
                    spellCheck={false}
                    onBlur={this.props.analyzeSummary}
                />
            </div>
        </div>;

    };

I am very happy for any Ideas!