Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support advanced customisations to block rendering #169

thibaudcolas opened this Issue Dec 1, 2018 · 1 comment


None yet
1 participant
Copy link

commented Dec 1, 2018

From the blocks documentation:

More advanced blocks, requiring custom React components, aren't supported at the moment. If you need this, feel free to create an issue.

What is the current behavior?

At the moment, for block types, the editor only supports customising their element, and auto-generates a CSS class so the blocks can be styled. This is very limited: it's impossible to make a block that’s not text-based, or to enhance a text editing blocks with extra UI.

What is the expected behavior?

It should be possible to use the more advanced Draft.js APIs for block rendering in conjunction with the blockType API:

Use cases

Here are specific use cases I would like those new APIs to make possible:

  • Create blocks that do not contain any text – for example for separators, say in a Word-like editor, having a way to add "Page break" blocks. Currently this is possible with a block-level entity, but this feels strange for cases where the entity wouldn't have any data.
  • Create blocks that have text, and some UI.
  • Customising the wrapping of a block to add styles based on the number of children
  • Supporting integration of existing Draft.js-compatible extensions relying on block data instead of entity data.


Support for wrapper blocks should be straightforward. Add it to the getBlockRenderMap:

getBlockRenderMap(blockTypes) {
let renderMap = DefaultDraftBlockRenderMap;
// Override default element for code block.
// Fix
if (blockTypes.some((block) => block.type === BLOCK_TYPE.CODE)) {
renderMap = renderMap.set(BLOCK_TYPE.CODE, {
element: "code",
wrapper: DefaultDraftBlockRenderMap.get(BLOCK_TYPE.CODE).wrapper,
blockTypes.filter((block) => block.element).forEach((block) => {
renderMap = renderMap.set(block.type, {
element: block.element,
return renderMap;

Support for custom blocks should also be straightforward, overriding the blockRenderer:

blockRenderer(block) {
const { entityTypes } = this.props;
const { editorState } = this.state;
const contentState = editorState.getCurrentContent();
if (block.getType() !== BLOCK_TYPE.ATOMIC) {
return null;
const entityKey = block.getEntityAt(0);
if (!entityKey) {
return {
editable: false,
const entity = contentState.getEntity(entityKey);
const isHorizontalRule = entity.type === ENTITY_TYPE.HORIZONTAL_RULE;
if (isHorizontalRule) {
return {
component: DividerBlock,
editable: false,
const entityType = entityTypes.find((t) => t.type === entity.type);
return {

The use cases above should inform what configuration should be allowed for custom blocks, and what props need to be provided to them (potentially the same as given to entity components?)


This comment has been minimized.

Copy link
Collaborator Author

commented Mar 4, 2019

#171 comes with the APIs needed to do the above

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.