Custom block using blockRendererFn with DraftJS - draftjs

Question

Is it possible to render a custom block where some parts of it are editable and some are not?
Here is an example of what I am trying to achieve. The ReadOnlyComponent component should be read only, while the WriteComponent contains data that can be editable.
class CustomBlock extends React.Component {
props: Props;
render() {
return (
<Layout>
<LeftColumn>
<ReadOnlyComponent>
{this.props.block.getData().get('speaker')}
</ReadOnlyComponent>
</LeftColumn>
<RightColumn>
<WriteComponent>
<EditorBlock {...this.props} />
</WriteComponent>
</RightColumn>
</Layout>
);
}
}
Here is the blockRendererFn prop that we pass to the Editor to create custom block components:
<Editor
editorState={this.state.editorState}
blockRendererFn={() => ({
component: CustomBlock,
})}
/>

Answer 1

setting attribute contenteditable="true" on WriteComponent should be doing what you want.
class CustomBlock extends React.Component {
...
<RightColumn>
<WriteComponent contenteditable="true">
<EditorBlock {...this.props} />
</WriteComponent>
</RightColumn>
</Layout>
);
}
}
Also you should set remaining element to be contenteditable="false". You can do this by setting attribute 'editable' for your custom block in your renderer.
<Editor
editorState={this.state.editorState}
blockRendererFn={() => ({
component: CustomBlock,
editable: false,
})}
/>
Now your custom block should be rendered as not editabable except for anything that is in WriteComponent.