group(block) rendering changes:

* move group rendering to a separate method
* depth is now passed along keys and data as a second param for block rederers

Author: lokiuz

README.md

@@ -66,11 +66,12 @@ const renderers = {
     'header-one': (children) => children.map(child => <h1>{child}</h1>),
     'header-two': (children) => children.map(child => <h2>{child}</h2>),
     // You can also access the original keys of the blocks
-    'code-block': (children, depth, { keys }) => <pre style={styles.codeBlock} key={keys[0]} >{addBreaklines(children)}</pre>,
-    'unordered-list-item': (children, depth, { keys }) => <ul key={keys[keys.length - 1]} class={`ul-level-${depth}`}>{children.map(child => <li>{child}</li>)}</ul>,
-    'ordered-list-item': (children, depth, { keys }) => <ol key={keys.join('|')} class={`ol-level-${depth}`}>{children.map((child, index)=> <li key={keys[index]}>{child}</li>)}</ol>,
+    'code-block': (children, { keys }) => <pre style={styles.codeBlock} key={keys[0]} >{addBreaklines(children)}</pre>,
+    // or depth for nested lists
+    'unordered-list-item': (children, { depth, keys }) => <ul key={keys[keys.length - 1]} class={`ul-level-${depth}`}>{children.map(child => <li>{child}</li>)}</ul>,
+    'ordered-list-item': (children, { depth, keys }) => <ol key={keys.join('|')} class={`ol-level-${depth}`}>{children.map((child, index)=> <li key={keys[index]}>{child}</li>)}</ol>,
     // If your blocks use meta data it can also be accessed like keys
-    atomic: (children, depth, { keys, data }) => children.map((child, i) => <Atomic key={keys[i] {...data[i]} />),
+    atomic: (children, { keys, data }) => children.map((child, i) => <Atomic key={keys[i] {...data[i]} />),
   },
   /**
    * Entities receive children and the entity data

example/src/Preview/Preview.js

@@ -31,13 +31,13 @@ const inline = {
 const addBreaklines = children => children.map(child => [child, <br />]);
 
 const getList = ordered =>
-  (children, depth, { keys }) => (
+  (children, { depth, keys }) => (
     <List key={keys[0]} keys={keys} depth={depth} ordered={ordered}>
       {children.map((child, i) => <li key={keys[i]} >{child}</li>)}
     </List>
   );
 
-const getAtomic = (children, _, { data, keys }) => data.map(
+const getAtomic = (children, { data, keys }) => data.map(
   (item, i) => <AtomicBlock key={keys[i]} {...data[i]} />
 );
 
@@ -47,17 +47,17 @@ const getAtomic = (children, _, { data, keys }) => data.map(
 const blocks = {
   // Rendering blocks like this along with cleanup results in a single p tag for each paragraph
   // adding an empty block closes current paragraph and starts a new one
-  unstyled: (children, _, { keys }) => <p key={keys[0]}>{addBreaklines(children)}</p>,
+  unstyled: (children, { keys }) => <p key={keys[0]}>{addBreaklines(children)}</p>,
   atomic: getAtomic,
   blockquote:
-    (children, _, { keys }) => <blockquote key={keys[0]} >{addBreaklines(children)}</blockquote>,
-  'header-one': (children, _, { keys }) => children.map((child, i) => <h1 key={keys[i]}>{child}</h1>),
-  'header-two': (children, _, { keys }) => children.map((child, i) => <h2 key={keys[i]}>{child}</h2>),
-  'header-three': (children, _, { keys }) => children.map((child, i) => <h3 key={keys[i]}>{child}</h3>),
-  'header-four': (children, _, { keys }) => children.map((child, i) => <h4 key={keys[i]}>{child}</h4>),
-  'header-five': (children, _, { keys }) => children.map((child, i) => <h5 key={keys[i]}>{child}</h5>),
-  'header-six': (children, _, { keys }) => children.map((child, i) => <h6 key={keys[i]}>{child}</h6>),
-  'code-block': (children, _, { keys }) => <pre key={keys[0]} style={styles.codeBlock}>{addBreaklines(children)}</pre>,
+    (children, { keys }) => <blockquote key={keys[0]} >{addBreaklines(children)}</blockquote>,
+  'header-one': (children, { keys }) => children.map((child, i) => <h1 key={keys[i]}>{child}</h1>),
+  'header-two': (children, { keys }) => children.map((child, i) => <h2 key={keys[i]}>{child}</h2>),
+  'header-three': (children, { keys }) => children.map((child, i) => <h3 key={keys[i]}>{child}</h3>),
+  'header-four': (children, { keys }) => children.map((child, i) => <h4 key={keys[i]}>{child}</h4>),
+  'header-five': (children, { keys }) => children.map((child, i) => <h5 key={keys[i]}>{child}</h5>),
+  'header-six': (children, { keys }) => children.map((child, i) => <h6 key={keys[i]}>{child}</h6>),
+  'code-block': (children, { keys }) => <pre key={keys[0]} style={styles.codeBlock}>{addBreaklines(children)}</pre>,
   'unordered-list-item': getList(),
   'ordered-list-item': getList(true),
 };

src/render.js

@@ -132,6 +132,32 @@ const byDepth = (blocks) => {
   return group;
 };
 
+/**
+ * Conditionaly render a group if its not empty,
+ * pass all the params to the renderers
+ */
+const renderGroup = (group, blockRenderers, rendered, params) => {
+  const {
+    prevType: type,
+    prevDepth: depth,
+    prevKeys: keys,
+    prevData: data,
+  } = params;
+  // in case current group is empty it should not be rendered
+  if (group.length === 0) {
+    return;
+  }
+  if (blockRenderers[type]) {
+    rendered.push(blockRenderers[type](group, {
+      depth,
+      keys,
+      data,
+    }));
+    return;
+  }
+  rendered.push(group);
+};
+
 
 /**
  * Renders blocks grouped by type using provided blockStyleRenderers
@@ -167,17 +193,14 @@ const renderBlocks = (blocks, inlineRenderers = {}, blockRenderers = {},
       getKeyGenerator()
     );
     // if type of the block has changed or the split flag is set
-    // render the block and clear group
+    // render and clear group
     if ((prevType && prevType !== block.type) || splitGroup) {
-      // in case current group is empty it should not be rendered
-      if (blockRenderers[prevType] && group.length > 0) {
-        rendered.push(blockRenderers[prevType](group, prevDepth, {
-          keys: prevKeys,
-          data: prevData,
-        }));
-      } else if (group.length > 0) {
-        rendered.push(group);
-      }
+      renderGroup(
+        group,
+        blockRenderers,
+        rendered,
+        { prevType, prevDepth, prevKeys, prevData }
+      );
       // reset group vars
       // IDEA: might be worth to group those into an instance and just newup a new one
       prevData = [];
@@ -201,14 +224,12 @@ const renderBlocks = (blocks, inlineRenderers = {}, blockRenderers = {},
     prevData.push(block.data);
   });
   // render last group
-  if (blockRenderers[prevType]) {
-    rendered.push(blockRenderers[prevType](group, prevDepth, {
-      keys: prevKeys,
-      data: prevData,
-    }));
-  } else {
-    rendered.push(group);
-  }
+  renderGroup(
+    group,
+    blockRenderers,
+    rendered,
+    { prevType, prevDepth, prevKeys, prevData }
+  );
   return checkJoin(rendered, options);
 };
 

test/cleanup.js

@@ -20,7 +20,7 @@ const atomicBlocks = {
 const blocks = {
   unstyled: (children) => `<p>${joinRecursively(children)}</p>`,
   blockquote: (children) => `<blockquote>${joinRecursively(children)}</blockquote>`,
-  atomic: (children, _, { keys, data }) => {
+  atomic: (children, { keys, data }) => {
     const maped = children.map(
       (child, i) => atomicBlocks[data[i].type](child, data[i], keys[i])
     );

test/render.js

@@ -26,7 +26,7 @@ const atomicBlocks = {
 
 const dataBlocks = {
   unstyled: (children) => `<p>${joinRecursively(children)}</p>`,
-  atomic: (children, _, { keys, data }) => {
+  atomic: (children, { keys, data }) => {
     const maped = children.map(
       (child, i) => atomicBlocks[data[i].type](child, data[i], keys[i])
     );
@@ -46,13 +46,13 @@ const renderers = {
 };
 
 const blocksWithKeys = {
-  unstyled: (children, depth, { keys }) => `<p key="${keys.join(',')}">${joinRecursively(children)}</p>`,
+  unstyled: (children, { keys }) => `<p key="${keys.join(',')}">${joinRecursively(children)}</p>`,
   blockquote:
-    (children, depth, { keys }) => `<blockquote key="${keys.join(',')}">${joinRecursively(children)}</blockquote>`,
+    (children, { keys }) => `<blockquote key="${keys.join(',')}">${joinRecursively(children)}</blockquote>`,
   'ordered-list-item':
-    (children, depth, { keys }) => `<ol key="${keys.join(',')}">${makeList(children)}</ol>`,
+    (children, { keys }) => `<ol key="${keys.join(',')}">${makeList(children)}</ol>`,
   'unordered-list-item':
-    (children, depth, { keys }) => `<ul key="${keys.join(',')}">${makeList(children)}</ul>`,
+    (children, { keys }) => `<ul key="${keys.join(',')}">${makeList(children)}</ul>`,
 };
 
 // render to HTML