Merge pull request #170 from HubSpot/match-draft-list-depth-styles

Match ordered list styling from draft-js editor when converting to HTML

Author: maxwellskala

src/convertToHTML.js

@@ -62,7 +62,10 @@ const convertToHTML = ({
       if (!blockHTMLResult.nest) {
         // this block can't be nested, so reset all nesting if necessary
         closeNestTags = listStack.reduceRight((string, nestedBlock) => {
-          return string + getNestedBlockTags(getBlockHTML(nestedBlock)).nestEnd;
+          return (
+            string +
+            getNestedBlockTags(getBlockHTML(nestedBlock), depth).nestEnd
+          );
         }, '');
         listStack = [];
       } else {
@@ -73,17 +76,23 @@ const convertToHTML = ({
           if (depth + 1 === listStack.length) {
             // depth is right but doesn't match type
             const blockToClose = listStack[depth];
-            closeNestTags += getNestedBlockTags(getBlockHTML(blockToClose))
-              .nestEnd;
-            openNestTags += getNestedBlockTags(getBlockHTML(block)).nestStart;
+            closeNestTags += getNestedBlockTags(
+              getBlockHTML(blockToClose),
+              depth
+            ).nestEnd;
+            openNestTags += getNestedBlockTags(getBlockHTML(block), depth)
+              .nestStart;
             listStack[depth] = block;
           } else if (depth + 1 < listStack.length) {
             const blockToClose = listStack[listStack.length - 1];
-            closeNestTags += getNestedBlockTags(getBlockHTML(blockToClose))
-              .nestEnd;
+            closeNestTags += getNestedBlockTags(
+              getBlockHTML(blockToClose),
+              depth
+            ).nestEnd;
             listStack = listStack.slice(0, -1);
           } else {
-            openNestTags += getNestedBlockTags(getBlockHTML(block)).nestStart;
+            openNestTags += getNestedBlockTags(getBlockHTML(block), depth)
+              .nestStart;
             listStack.push(block);
           }
         }
@@ -120,7 +129,9 @@ const convertToHTML = ({
     .join('');
 
   result = listStack.reduce((res, nestBlock) => {
-    return res + getNestedBlockTags(getBlockHTML(nestBlock)).nestEnd;
+    return (
+      res + getNestedBlockTags(getBlockHTML(nestBlock), nestBlock.depth).nestEnd
+    );
   }, result);
 
   return result;

src/default/defaultBlockHTML.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
+// based on Draft.js' custom list depth styling
+const ORDERED_LIST_TYPES = ['1', 'a', 'i'];
+
 export default {
   unstyled: <p />,
   paragraph: <p />,
@@ -16,7 +19,10 @@ export default {
   },
   'ordered-list-item': {
     element: <li />,
-    nest: <ol />,
+    nest: depth => {
+      const type = ORDERED_LIST_TYPES[depth % 3];
+      return <ol type={type} />;
+    },
   },
   media: <figure />,
   atomic: <figure />,

src/util/getNestedBlockTags.js

@@ -2,12 +2,20 @@ import invariant from 'invariant';
 import React from 'react';
 import splitReactElement from './splitReactElement';
 
-export default function getNestedBlockTags(blockHTML) {
+export default function getNestedBlockTags(blockHTML, depth) {
   invariant(
     blockHTML !== null && blockHTML !== undefined,
     'Expected block HTML value to be non-null'
   );
 
+  if (typeof blockHTML.nest === 'function') {
+    const { start, end } = splitReactElement(blockHTML.nest(depth));
+    return Object.assign({}, blockHTML, {
+      nestStart: start,
+      nestEnd: end,
+    });
+  }
+
   if (React.isValidElement(blockHTML.nest)) {
     const { start, end } = splitReactElement(blockHTML.nest);
     return Object.assign({}, blockHTML, {

test/spec/convertToHTML-test.js

@@ -137,7 +137,31 @@ describe('convertToHTML', () => {
       },
     ]);
     const result = convertToHTML(contentState);
-    expect(result).toBe('<ol><li>item one</li><li>item two</li></ol>');
+    expect(result).toBe('<ol type="1"><li>item one</li><li>item two</li></ol>');
+  });
+
+  it('applies type attribute for nested ordered lists', () => {
+    const contentState = buildContentState([
+      {
+        type: 'ordered-list-item',
+        text: 'top level item one',
+        depth: 0,
+      },
+      {
+        type: 'ordered-list-item',
+        text: 'sub item one',
+        depth: 1,
+      },
+      {
+        type: 'ordered-list-item',
+        text: 'sub-sub item one',
+        depth: 2,
+      },
+    ]);
+    const result = convertToHTML(contentState);
+    expect(result).toBe(
+      '<ol type="1"><li>top level item one</li><ol type="a"><li>sub item one</li><ol type="i"><li>sub-sub item one</li></ol></ol></ol>'
+    );
   });
 
   it('nests list items of different depths', () => {