Implement render empty blocks

Author: sviande

src/components/DraftJsText.js

@@ -15,10 +15,10 @@ import defaultStyles from './defaultStyles';
 import type { DraftJsTextPropsType } from './types';
 
 const DraftJsText = (props: DraftJsTextPropsType): any => {
-  const { text } = props;
+  const { text, renderEmptyBlocks } = props;
   let textElements = text;
 
-  if (textElements) {
+  if (textElements || renderEmptyBlocks) {
     textElements = loadAttributes({
       text: props.text,
       customStyles: props.customStyles,

src/components/types.js

@@ -15,6 +15,7 @@ export type BlockQuotePropsType = {
   entityRanges: Array<Object>,
   entityMap: ?Object,
   textProps: ?Object,
+  renderEmptyBlocks: boolean,
 };
 
 export type DraftJsTextPropsType = {
@@ -27,6 +28,7 @@ export type DraftJsTextPropsType = {
   entityMap: ?Object,
   navigate?: Function,
   textProps: ?Object,
+  renderEmptyBlocks: boolean,
 };
 
 export type OrderedListItemPropsType = {
@@ -42,6 +44,7 @@ export type OrderedListItemPropsType = {
   depth: number,
   defaultMarginLeft: number,
   textProps: ?Object,
+  renderEmptyBlocks: boolean,
 };
 
 export type UnorderedListItemPropsType = {
@@ -55,6 +58,7 @@ export type UnorderedListItemPropsType = {
   depth: number,
   defaultMarginLeft: number,
   textProps: ?Object,
+  renderEmptyBlocks: boolean,
 };
 
 export type TextStyledPropsType = {

src/getBlocks.js

@@ -20,6 +20,7 @@ type ParamsType = {
     blocks: ?Array<*>,
     entityMap: Object,
   },
+  renderEmptyBlocks: boolean,
   customStyles: Object,
   atomicHandler: Function,
   navigate?: Function,
@@ -36,6 +37,7 @@ export const ViewAfterList = (props: Object): React$Element<*> => (
 const getBlocks = (params: ParamsType): ?Array<React$Element<*>> => {
   const {
     contentState,
+    renderEmptyBlocks,
     customStyles,
     navigate,
     orderedListSeparator,
@@ -123,6 +125,7 @@ const getBlocks = (params: ParamsType): ?Array<React$Element<*>> => {
               {viewBefore}
               <DraftJsText
                 {...itemData}
+                renderEmptyBlocks={renderEmptyBlocks}
                 entityMap={contentState.entityMap}
                 customStyles={customStyles}
                 navigate={navigate}
@@ -160,6 +163,7 @@ const getBlocks = (params: ParamsType): ?Array<React$Element<*>> => {
                 customStyles={customStyles}
                 navigate={navigate}
                 textProps={textProps}
+                renderEmptyBlocks={renderEmptyBlocks}
               />
             </View>
           );
@@ -178,6 +182,7 @@ const getBlocks = (params: ParamsType): ?Array<React$Element<*>> => {
                 navigate={navigate}
                 defaultMarginLeft={depthMargin}
                 textProps={textProps}
+                renderEmptyBlocks={renderEmptyBlocks}
               />
             </View>
           );
@@ -217,6 +222,7 @@ const getBlocks = (params: ParamsType): ?Array<React$Element<*>> => {
                 navigate={navigate}
                 defaultMarginLeft={depthMargin}
                 textProps={textProps}
+                renderEmptyBlocks={renderEmptyBlocks}
               />
             </View>
           );