Merge pull request #16 from productboard/feature/nested-list-parsing

Traverse nested list items

Author: aem

src/docsSoap.js

@@ -27,6 +27,9 @@ const wrapNode = (
   result: Node
 ): Node => {
   let newNode = result.cloneNode(true);
+  if (!inner) {
+    return newNode;
+  }
   if (inner.style && inner.style.fontWeight === styles.BOLD) {
     newNode = wrapNodeInline(newNode, elements.BOLD);
   }
@@ -86,13 +89,17 @@ const applyInlineStyles = (
 const getCleanNode = (
   node: Node
 ): Array<Node> => {
-  if (node.childNodes && node.childNodes.length <= 1) {
+  if (node.childNodes && (node.childNodes.length <= 1 || node.nodeName === 'OL' || node.nodeName === 'UL')) {
     let newWrapper = null;
     let newNode = document.createTextNode(node.textContent);
-    if (node.nodeName === 'LI' || node.nodeName === 'UL') {
-      // TODO: Handle nested bullets
-      newWrapper = document.createElement('li');
-      newNode = applyBlockStyles(node.childNodes[0].childNodes[0]);
+    if (node.nodeName === 'UL' || node.nodeName === 'OL' || node.nodeName === 'LI') {
+      newWrapper = document.createElement(node.nodeName);
+      newNode = document.createDocumentFragment();
+      const items = [];
+      for (let i = 0; i < node.childNodes.length; i++) {
+        items.push(...getCleanNode(node.childNodes[i]));
+      }
+      items.map(i => newNode.appendChild(i));
     } else if (node.nodeName === 'P') {
       newWrapper = document.createElement('p');
       newNode = applyBlockStyles(node);

test/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "env": {
+    "mocha": true
+  }
+}
+

test/docsSoapSpec.js

@@ -1,6 +1,6 @@
 'use es6';
 
-import { elements } from '../src/constants'
+import { elements } from '../src/constants';
 import documents from './fixtures/documents';
 import docsSoap from '../src/index';
 import expect from 'expect';
@@ -10,6 +10,13 @@ import parseHTML from '../src/parseHTML';
 describe('Google Docs Converter', () => {
   jsdom();
 
+  it('converts plain doc', () => {
+    const doc = docsSoap(documents.plain);
+    expect(doc).toExist();
+    const parsed = parseHTML(doc);
+    expect(parsed.textContent).toBe('Hello world.');
+  });
+
   it('converts inline styles from google docs properly', () => {
     const rawContents = parseHTML(documents.inlineStyles);
     expect(rawContents.querySelectorAll(elements.BOLD).length).toBe(0);
@@ -37,4 +44,58 @@ describe('Google Docs Converter', () => {
     expect(doc.querySelectorAll(elements.ITALIC).length).toBe(2);
     expect(doc.querySelectorAll(elements.ANCHOR).length).toBe(4);
   });
+
+  it('converts nested list from google docs properly', () => {
+    const doc = parseHTML(docsSoap(documents.nestedList));
+    // ol
+    // - li
+    // - ol
+    //   - li
+    //   - ol
+    //     - li
+    // - li
+    // - ol
+    //   ....
+    // ul
+    // - li
+    // - li
+    // - ul
+    //   - li
+    //   - ul
+    //     - li
+    expect(doc.childNodes[0].nodeName).toBe('OL');
+    expect(doc.childNodes[0].childNodes.length).toBe(4);
+    expect(doc.childNodes[0].childNodes[0].nodeName).toBe('LI');
+    // jsdom bug: should actually include a line break
+    expect(doc.childNodes[0].childNodes[0].textContent).toBe('Abcd1234');
+    expect(doc.childNodes[0].childNodes[1].nodeName).toBe('OL');
+    expect(doc.childNodes[0].childNodes[1].childNodes.length).toBe(2);
+    expect(doc.childNodes[0].childNodes[1].childNodes[0].nodeName).toBe('LI');
+    expect(doc.childNodes[0].childNodes[1].childNodes[1].nodeName).toBe('OL');
+    expect(doc.childNodes[0].childNodes[1].childNodes[1].childNodes.length).toBe(1);
+    expect(doc.childNodes[0].childNodes[1].childNodes[1].childNodes[0].nodeName).toBe('LI');
+    expect(doc.childNodes[0].childNodes[2].nodeName).toBe('LI');
+    expect(doc.childNodes[0].childNodes[2].childNodes.length).toBe(1);
+    expect(doc.childNodes[0].childNodes[3].nodeName).toBe('OL');
+
+    expect(doc.childNodes[1].nodeName).toBe('UL');
+    expect(doc.childNodes[1].childNodes.length).toBe(3);
+    expect(doc.childNodes[1].childNodes[0].nodeName).toBe('LI');
+    expect(doc.childNodes[1].childNodes[1].nodeName).toBe('LI');
+    expect(doc.childNodes[1].childNodes[2].nodeName).toBe('UL');
+    expect(doc.childNodes[1].childNodes[2].childNodes[0].nodeName).toBe('LI');
+    expect(doc.childNodes[1].childNodes[2].childNodes[1].nodeName).toBe('UL');
+    expect(doc.childNodes[1].childNodes[2].childNodes[1].childNodes[0].nodeName).toBe('LI');
+    expect(doc.childNodes[1].childNodes[2].childNodes[1].childNodes[0].childNodes.length).toBe(1);
+  });
+
+  it('converts deep nested styles from gdocs properly', () => {
+    const doc = parseHTML(docsSoap(documents.nestedList));
+    expect(doc.childNodes[0].childNodes[0].querySelectorAll(elements.BOLD).length).toBe(3);
+    expect(doc.childNodes[0].childNodes[0].querySelectorAll(elements.UNDERLINE).length).toBe(3);
+    expect(doc.childNodes[0].childNodes[1].childNodes[1].childNodes[0].querySelectorAll(elements.ITALIC).length).toBe(1);
+    expect(doc.childNodes[0].childNodes[1].childNodes[1].childNodes[0].querySelector(elements.ITALIC).textContent).toBe('italics');
+    expect(doc.childNodes[0].childNodes[1].childNodes[1].childNodes[0].querySelectorAll(elements.UNDERLINE).length).toBe(1);
+    expect(doc.childNodes[0].childNodes[1].childNodes[1].childNodes[0].querySelector(elements.UNDERLINE).textContent).toBe('underline');
+  });
 });