diff --git a/docs/Advanced-Topics-Custom-Block-Render.md b/docs/Advanced-Topics-Custom-Block-Render.md index f95e010fbc..3f1466031e 100644 --- a/docs/Advanced-Topics-Custom-Block-Render.md +++ b/docs/Advanced-Topics-Custom-Block-Render.md @@ -7,9 +7,9 @@ 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 using the -[convertFromHTML](/docs/api-reference-data-conversion.html#convertfromhtml) -Draft will then convert the pasted content to the respective block rendering type +When pasting content, or when calling +[convertFromHTML](/docs/api-reference-data-conversion.html#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 @@ -34,7 +34,7 @@ by matching the Draft block render map with the matched tag. ## Configuring block render map -Draft default block render map can be overwritten, by passing an +Draft's default block render map can be overwritten by passing an [Immutable Map](http://facebook.github.io/immutable-js/docs/#/Map) to the editor blockRender props. @@ -65,8 +65,8 @@ class RichEditor extends React.Component { } ``` -There are cases where instead of overwriting the defaults we just want to add new block types; -this can be done by using the DefaultDraftBlockRenderMap reference to create a new blockRenderMap +There are cases where instead of overwriting the defaults, we just 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:* @@ -95,7 +95,7 @@ class RichEditor extends React.Component { 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 an array `aliasedElements` to the block config. +particular block type, you can add the array `aliasedElements` to the block config. *example of unstyled block type alias usage:* @@ -108,16 +108,16 @@ particular block type, you can add an array `aliasedElements` to the block confi ## Custom block wrappers -By default the html element is used to wrap block types however a react component +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 using the -[convertFromHTML](/docs/api-reference-data-conversion.html#convertfromhtml) +During pasting, or when calling +[convertFromHTML](/docs/api-reference-data-conversion.html#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 `
  • ` inside either `
      ` or `