This article discusses how to customize Draft default block rendering. The block rendering is used to define supported block types and their respective renderers, as well as converting pasted content to known Draft block types.
When pasting content, or when calling convertFromHTML, Draft will convert pasted content to the respective block rendering type by matching the Draft block render map with the matched tag.
Draft default block render map
|HTML element||Draft block type|
** - Block type will be based on the parent
*** - Any block that is not recognized by the block rendering mapping will be treated as unstyled
Configuring block render map
Draft's default block render map can be overwritten by passing an Immutable Map to the editor blockRender props.
example of overwriting default block render map:
There are cases where instead of overwriting the defaults, we only want to add new block types. This can be done by using the DefaultDraftBlockRenderMap reference to create a new blockRenderMap
example of extending default block render map:
When Draft parses pasted HTML, it maps from HTML elements back into
Draft block types. If you want to specify other HTML elements that map to a
particular block type, you can add the array
aliasedElements to the block config.
example of unstyled block type alias usage:
Custom block wrappers
By default, the html element is used to wrap block types. However, a react component can also be provided to the blockRenderMap to wrap the EditorBlock.
During pasting, or when calling convertFromHTML, the html will be scanned for matching tag elements. A wrapper will be used when there is a definition for it on the blockRenderMap to wrap that particular block type. For example:
Draft uses wrappers to wrap
<li/> inside either
<ul/>, but wrappers can also be used
to wrap any other custom block type.
example of extending default block render map to use a react component for a custom block: