Custom block using blockRendererFn with 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,
  })}
/>

score 0 · Answer 1 · answered Apr 25 '17 at 14:49

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.

Custom block using blockRendererFn with DraftJS

1 Answers1