JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

const SubComponent = ({ node }) => (
	<div contentEditable={false}>Subcomponent: {node.name}
    <div className="insertion-point"></div>
  </div>
 );

// the ProseMirror manages its direct children,
// but uses ReactDOM to render some of its children's children
function opaqueRenderProcess(el) {
	el.contentEditable="true";
  const p = document.createElement('p');
  p.textContent = 'My other paragraph, not managed by React';
  el.appendChild(p);
	const div = document.createElement('div');
  el.appendChild(div);
  // this node data structure is created/managed by the external library
	const node = { name: "My Special Node" };
	ReactDOM.render(<SubComponent node={node} />, div, function() {
    console.log(el.querySelector('.insertion-point'));
  });
}

class ProseMirror extends React.Component {
	setRef(el) {
  	this.el = el;
  }
	componentDidMount() {
  	opaqueRenderProcess(this.el);
  }
	render() {
    return (<div ref={el => this.setRef(el)} />);
  }
}

class App extends React.Component {
  render() {
  	return (
    	<div>
    	  <ProseMirror />
    	</div>
    );
  }
}

ReactDOM.render(<App name="world"/>, document.getElementById('container'));
console.log('did render');