0.4.0 - support for blocks with depth #3

Author: lokiuz

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.4.0
+- added support for blocks with depth
+- block renderer now receives a second argument - depth
+
 ## 0.3.0
 - redraft now has a default export
 - directly importing renderRaw is now deprecated

README.md

@@ -53,19 +53,20 @@ const renderers = {
     CODE: (children) => <span style={styles.code}>{children}</span>,
   },
   /**
-   * Note that children are an array of blocks with same styling
+   * Blocks receive children and depth
+   * Note that children are an array of blocks with same styling,
    */
   blocks: {
     unstyled: (children) => children.map(child => <p>{child}</p>),
     blockquote: (children) => <blockquote>{addBreaklines(children)}</blockquote>,
     'header-one': (children) => children.map(child => <h1>{child}</h1>),
     'header-two': (children) => children.map(child => <h2>{child}</h2>),
     'code-block': (children) => <pre style={styles.codeBlock}>{addBreaklines(children)}</pre>,
-    'unordered-list-item': (children) => <ul>{children.map(child => <li>{child}</li>)}</ul>,
-    'ordered-list-item': (children) => <ol>{children.map(child => <li>{child}</li>)}</ol>,
+    'unordered-list-item': (children, depth) => <ul class={`ul-level-${depth}`}>{children.map(child => <li>{child}</li>)}</ul>,
+    'ordered-list-item': (children, depth) => <ol class={`ol-level-${depth}`}>{children.map(child => <li>{child}</li>)}</ol>,
   },
   /**
-   * For entities what gets passed is children and the entity data
+   * Entities receive children and the entity data
    */
   entities: {
     LINK: (children, data) => <Link to={data.url}>{children}/>,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redraft",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Renders the result of Draft.js convertToRaw using provided callbacks, works well with React",
   "main": "./lib/index.js",
   "scripts": {

src/render.js

@@ -41,6 +41,43 @@ export const renderNode = (node, styleRendrers, entityRenderers, entityMap) => {
   return children;
 };
 
+/**
+ * Nests blocks by depth as children
+ */
+const byDepth = blocks => {
+  let group = [];
+  const depthStack = [];
+  let prevDepth = 0;
+  const unwind = targetDepth => {
+    let i = prevDepth - targetDepth;
+    // in case depthStack is too short for target depth
+    if (depthStack.length < i) {
+      i = depthStack.length;
+    }
+    for (i; i > 0; i--) {
+      const tmp = group;
+      group = depthStack.pop();
+      group[group.length - 1].children = tmp;
+    }
+  };
+
+  blocks.forEach((block) => {
+    // if type of the block has changed render the block and clear group
+    if (prevDepth < block.depth) {
+      depthStack.push(group);
+      group = [];
+    } else if (prevDepth > block.depth) {
+      unwind(block.depth);
+    }
+    prevDepth = block.depth;
+    group.push(block);
+  });
+  if (prevDepth !== 0) {
+    unwind(0);
+  }
+  return group;
+};
+
 
 /**
  * Renders blocks grouped by type using provided blockStyleRenderers
@@ -52,26 +89,35 @@ const renderBlocks = (blocks, inlineRendrers = {}, blockRenderers = {},
   let group = [];
   let prevType = null;
   const Parser = new RawParser;
+  let prevDepth = 0;
   blocks.forEach((block) => {
     const node = Parser.parse(block);
     const renderedNode = renderNode(node, inlineRendrers, entityRenderers, entityMap);
     // if type of the block has changed render the block and clear group
     if (prevType && prevType !== block.type) {
       if (blockRenderers[prevType]) {
-        rendered.push(blockRenderers[prevType](group));
+        rendered.push(blockRenderers[prevType](group, prevDepth));
       } else {
         rendered.push(group);
       }
       group = [];
     }
+    // handle children
+    if (block.children) {
+      const children = renderBlocks(block.children, inlineRendrers,
+      blockRenderers, entityRenderers, entityMap);
+      renderedNode.push(children);
+    }
     // push current node to group
     group.push(renderedNode);
+
     // lastly save current type for refference
     prevType = block.type;
+    prevDepth = block.depth;
   });
   // render last group
   if (blockRenderers[prevType]) {
-    rendered.push(blockRenderers[prevType](group));
+    rendered.push(blockRenderers[prevType](group, prevDepth));
   } else {
     rendered.push(group);
   }
@@ -91,7 +137,7 @@ export const render = (raw, renderers = {}, arg3 = {}, arg4 = {}) => {
     // Logs a deprecation warning if not in production
     deprecated('passing renderers separetly is deprecated'); // eslint-disable-line
   }
-  const blocks = raw.blocks;
+  const blocks = byDepth(raw.blocks);
   if (!blocks || blocks[0].text.length === 0) {
     return null;
   }

test/render.js

@@ -78,7 +78,7 @@ const raw2 = {
   }],
 };
 
-const rawWithDepth =  {
+const rawWithDepth = {
   entityMap: {},
   blocks: [
     {
@@ -115,6 +115,80 @@ const rawWithDepth =  {
     }],
 };
 
+const rawWithDepth2 = {
+  entityMap: {},
+  blocks: [
+    {
+      key: 'eunbc',
+      type: 'unordered-list-item',
+      text: 'Hey',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+    },
+    {
+      key: '9nl08',
+      type: 'unordered-list-item',
+      text: 'Ho',
+      depth: 1,
+      inlineStyleRanges: [],
+      entityRanges: [],
+    },
+    {
+      key: '9qp7i',
+      type: 'unordered-list-item',
+      text: 'Let\'s',
+      depth: 2,
+      inlineStyleRanges: [],
+      entityRanges: [],
+    },
+    {
+      key: '1hegu',
+      type: 'ordered-list-item',
+      text: 'Go',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+    }],
+};
+
+const rawWithDepth3 = {
+  entityMap: {},
+  blocks: [
+    {
+      key: 'eunbc',
+      type: 'unordered-list-item',
+      text: 'Hey',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+    },
+    {
+      key: '9nl08',
+      type: 'unordered-list-item',
+      text: 'Ho',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+    },
+    {
+      key: '9qp7i',
+      type: 'unordered-list-item',
+      text: 'Let\'s',
+      depth: 2,
+      inlineStyleRanges: [],
+      entityRanges: [],
+    },
+    {
+      key: '1hegu',
+      type: 'ordered-list-item',
+      text: 'Go',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+    }],
+};
+
 // to render to a plain string we need to be sure all the arrays are joined after render
 const joinRecursively = (array) => array.map((child) => {
   if (Array.isArray(child)) {
@@ -165,9 +239,19 @@ describe('renderRaw', () => {
     const joined = joinRecursively(rendered);
     joined.should.equal('<p><strong>Lorem </strong><a href="http://zombo.com/" ><strong><em>ipsum</em></strong></a><strong><em> dolor</em></strong><em> sit amet,</em> pro nisl sonet ad. </p><blockquote>Eos affert numquam id, in est meis nobis. Legimus singulis suscipiantur eum in, <em>ceteros invenire </em>tractatos his id. </blockquote><p><strong>Facer facilis definiebas ea pro, mei malis libris latine an. Senserit moderatius vituperata vis in.</strong></p>'); // eslint-disable-line max-len
   });
-  it('should render blocks with depth correctly', () => {
+  it('should render blocks with depth correctly 1/2', () => {
     const rendered = redraft(rawWithDepth, renderers);
     const joined = joinRecursively(rendered);
     joined.should.equal("<ul><li>Hey<ul><li>Ho<ul><li>Let's</li></ul><ol><li>Go</li></ol></li></ul></li></ul>"); // eslint-disable-line max-len
   });
+  it('should render blocks with depth correctly 2/2', () => {
+    const rendered = redraft(rawWithDepth2, renderers);
+    const joined = joinRecursively(rendered);
+    joined.should.equal("<ul><li>Hey<ul><li>Ho<ul><li>Let's</li></ul></li></ul></li></ul><ol><li>Go</li></ol>"); // eslint-disable-line max-len
+  });
+  it('should render blocks with depth when depth jumps from 0 to 2', () => {
+    const rendered = redraft(rawWithDepth3, renderers);
+    const joined = joinRecursively(rendered);
+    joined.should.equal("<ul><li>Hey</li><li>Ho<ul><li>Let's</li></ul></li></ul><ol><li>Go</li></ol>"); // eslint-disable-line max-len
+  });
 });