Support advanced customisations to block rendering

[thibaudcolas]

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:

• Custom block wrappers in the blockRenderMap.
• Custom block components via blockRendererFn.

---

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.
  • A code block with a dropdown to pick the language to use for syntax highlighting. Ref: Dante2, impl. 1, impl. 2
  • Actions/checkboxes list. Ref: Medium Draft
• 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.

---

Implementation

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

draftail/lib/api/behavior.js

Lines 34 to 53 in bfb2b3d

	getBlockRenderMap(blockTypes) {
	let renderMap = DefaultDraftBlockRenderMap;
	// Override default element for code block.
	// Fix https://github.com/facebook/draft-js/issues/406.
	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:

draftail/lib/components/DraftailEditor.js

Lines 459 to 488 in bfb2b3d

	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?)

[thibaudcolas]

#171 comes with the APIs needed to do the above