I might be misunderstanding what you are trying to do here but you can create multiple components for each and pass readonly prop from parent. and inside the component depending on readonly prop, you can show different content.
const Header = ({readonly, ...props}) => <div className='header'></div>
const Body = ({readonly, ...props}) => <div className="contenteditable">
{readonly ? (
// content is readonly
) : (
// content is not readonly create your editor here
) }
</div>
const Main = props => (
<div className="main">
<Header readonly={true}>
<Body readonly={false}/>
</div>
)