Make nested list compliant with w3c standards

js/__test__/blockTest.js

@@ -130,7 +130,7 @@ describe('addInlineStyleMarkup test suite', () => {
   markup = addInlineStyleMarkup('ITALIC', 'test');
   assert.equal(markup, '<em>test</em>');
   markup = addInlineStyleMarkup('UNDERLINE', 'test');
-  assert.equal(markup, '<ins>test</ins>');
+  assert.equal(markup, '<u>test</u>');
   markup = addInlineStyleMarkup('STRIKETHROUGH', 'test');
   assert.equal(markup, '<del>test</del>');
   markup = addInlineStyleMarkup('CODE', 'test');

js/__test__/mainTest.js

@@ -32,24 +32,24 @@ describe('draftToHtml test suite', () => {
     assert.equal(output, result);
 
     html = '<ol><li>1</li>\n<ol><li>2</li>\n</ol>\n<li>3</li>\n</ol>\n';
-    output = '<ol>\n<li>1</li>\n<ol>\n<li>2</li>\n</ol>\n<li>3</li>\n</ol>\n';
+    output = '<ol>\n<li>1<ol>\n<li>2</li>\n</ol>\n</li>\n<li>3</li>\n</ol>\n';
     arrContentBlocks = convertFromHTML(html);
     contentState = ContentState.createFromBlockArray(arrContentBlocks);
     result = draftToHtml(convertToRaw(contentState));
     assert.equal(output, result);
 
     html = '<ol><li>1</li>\n<ol><li>2</li>\n<li>3</li>\n</ol>\n<li>4</li>\n</ol>\n';
-    output = '<ol>\n<li>1</li>\n<ol>\n<li>2</li>\n<li>'
-      + '3</li>\n</ol>\n<li>4</li>\n</ol>\n';
+    output = '<ol>\n<li>1<ol>\n<li>2</li>\n<li>'
+      + '3</li>\n</ol>\n</li>\n<li>4</li>\n</ol>\n';
     arrContentBlocks = convertFromHTML(html);
     contentState = ContentState.createFromBlockArray(arrContentBlocks);
     result = draftToHtml(convertToRaw(contentState));
     assert.equal(output, result);
 
     html = '<ol><li>1</li>\n<ol><li>2</li>\n<ol><li>3</li>\n</ol>'
       + '\n</ol>\n<li>3</li>\n</ol>\n';
-    output = '<ol>\n<li>1</li>\n<ol>\n<li>2</li>\n<ol>\n<li>3'
-      + '</li>\n</ol>\n</ol>\n<li>3</li>\n</ol>\n';
+    output = '<ol>\n<li>1<ol>\n<li>2<ol>\n<li>3'
+      + '</li>\n</ol>\n</li>\n</ol>\n</li>\n<li>3</li>\n</ol>\n';
     arrContentBlocks = convertFromHTML(html);
     contentState = ContentState.createFromBlockArray(arrContentBlocks);
     result = draftToHtml(convertToRaw(contentState));
@@ -72,24 +72,24 @@ describe('draftToHtml test suite', () => {
     assert.equal(output, result);
 
     html = '<ol><li>1</li>\n<ol><li>2</li>\n</ol>\n<li>3</li>\n</ol>\n';
-    output = '<ol>\n<li>1</li>\n<ol>\n<li>2</li>\n</ol>\n<li>3</li>\n</ol>\n';
+    output = '<ol>\n<li>1<ol>\n<li>2</li>\n</ol>\n</li>\n<li>3</li>\n</ol>\n';
     arrContentBlocks = convertFromHTML(html);
     contentState = ContentState.createFromBlockArray(arrContentBlocks);
     result = draftToHtml(convertToRaw(contentState));
     assert.equal(output, result);
 
     html = '<ol><li>1</li>\n<ol><li>2</li>\n<li>3</li>\n</ol>\n<li>4</li>\n</ol>\n';
-    output = '<ol>\n<li>1</li>\n<ol>\n<li>2</li>\n<li>3'
-      + '</li>\n</ol>\n<li>4</li>\n</ol>\n';
+    output = '<ol>\n<li>1<ol>\n<li>2</li>\n<li>3'
+      + '</li>\n</ol>\n</li>\n<li>4</li>\n</ol>\n';
     arrContentBlocks = convertFromHTML(html);
     contentState = ContentState.createFromBlockArray(arrContentBlocks);
     result = draftToHtml(convertToRaw(contentState));
     assert.equal(output, result);
 
     html = '<ol><li>1</li>\n<ol><li>2</li>\n<ol><li>3</li>\n</ol>'
       + '\n</ol>\n<li>3</li>\n</ol>\n';
-    output = '<ol>\n<li>1</li>\n<ol>\n<li>2</li>\n<ol>\n<li>3'
-      + '</li>\n</ol>\n</ol>\n<li>3</li>\n</ol>\n';
+    output = '<ol>\n<li>1<ol>\n<li>2<ol>\n<li>3'
+      + '</li>\n</ol>\n</li>\n</ol>\n</li>\n<li>3</li>\n</ol>\n';
     arrContentBlocks = convertFromHTML(html);
     contentState = ContentState.createFromBlockArray(arrContentBlocks);
     result = draftToHtml(convertToRaw(contentState));

js/block.js

@@ -247,7 +247,7 @@ export function addInlineStyleMarkup(style, content) {
   } if (style === 'ITALIC') {
     return `<em>${content}</em>`;
   } if (style === 'UNDERLINE') {
-    return `<ins>${content}</ins>`;
+    return `<u>${content}</u>`;
   } if (style === 'STRIKETHROUGH') {
     return `<del>${content}</del>`;
   } if (style === 'CODE') {

js/list.js

@@ -1,22 +1,17 @@
-import {
-  getBlockTag,
-  getBlockStyle,
-  getBlockInnerMarkup,
-} from './block';
+import { getBlockTag, getBlockStyle, getBlockInnerMarkup } from './block';
 
 /**
-* Function to check if a block is of type list.
-*/
+ * Function to check if a block is of type list.
+ */
 export function isList(blockType) {
   return (
-    blockType === 'unordered-list-item'
-    || blockType === 'ordered-list-item'
+    blockType === 'unordered-list-item' || blockType === 'ordered-list-item'
   );
 }
 
 /**
-* Function will return html markup for a list block.
-*/
+ * Function will return html markup for a list block.
+ */
 export function getListMarkup(
   listBlocks,
   entityMap,
@@ -36,13 +31,17 @@ export function getListMarkup(
       listHtml.push(`<${getBlockTag(block.type)}>\n`);
     } else if (previousBlock.depth === block.depth) {
       if (nestedListBlock && nestedListBlock.length > 0) {
-        listHtml.push(getListMarkup(
-          nestedListBlock,
-          entityMap,
-          hashtagConfig,
-          directional,
-          customEntityTransform,
-        ));
+        listHtml.splice(
+          listHtml.length - 1,
+          0,
+          getListMarkup(
+            nestedListBlock,
+            entityMap,
+            hashtagConfig,
+            directional,
+            customEntityTransform,
+          ),
+        );
         nestedListBlock = [];
       }
     } else {
@@ -59,24 +58,30 @@ export function getListMarkup(
         listHtml.push(' dir = "auto"');
       }
       listHtml.push('>');
-      listHtml.push(getBlockInnerMarkup(
-        block,
-        entityMap,
-        hashtagConfig,
-        customEntityTransform,
-      ));
+      listHtml.push(
+        getBlockInnerMarkup(
+          block,
+          entityMap,
+          hashtagConfig,
+          customEntityTransform,
+        ),
+      );
       listHtml.push('</li>\n');
       previousBlock = block;
     }
   });
   if (nestedListBlock && nestedListBlock.length > 0) {
-    listHtml.push(getListMarkup(
-      nestedListBlock,
-      entityMap,
-      hashtagConfig,
-      directional,
-      customEntityTransform,
-    ));
+    listHtml.splice(
+      listHtml.length - 1,
+      0,
+      getListMarkup(
+        nestedListBlock,
+        entityMap,
+        hashtagConfig,
+        directional,
+        customEntityTransform,
+      ),
+    );
   }
   listHtml.push(`</${getBlockTag(previousBlock.type)}>\n`);
   return listHtml.join('');

lib/draftjs-to-html.js

@@ -4,6 +4,8 @@
   (global = global || self, global.draftjsToHtml = factory());
 }(this, (function () { 'use strict';
 
+  /* @flow */
+
   /**
   * Utility function to execute callback for eack key->value pair.
   */
@@ -308,7 +310,7 @@
     }
 
     if (style === 'UNDERLINE') {
-      return "<ins>".concat(content, "</ins>");
+      return "<u>".concat(content, "</u>");
     }
 
     if (style === 'STRIKETHROUGH') {
@@ -617,15 +619,15 @@
   }
 
   /**
-  * Function to check if a block is of type list.
-  */
+   * Function to check if a block is of type list.
+   */
 
   function isList(blockType) {
     return blockType === 'unordered-list-item' || blockType === 'ordered-list-item';
   }
   /**
-  * Function will return html markup for a list block.
-  */
+   * Function will return html markup for a list block.
+   */
 
   function getListMarkup(listBlocks, entityMap, hashtagConfig, directional, customEntityTransform) {
     var listHtml = [];
@@ -641,7 +643,7 @@
         listHtml.push("<".concat(getBlockTag(block.type), ">\n"));
       } else if (previousBlock.depth === block.depth) {
         if (nestedListBlock && nestedListBlock.length > 0) {
-          listHtml.push(getListMarkup(nestedListBlock, entityMap, hashtagConfig, directional, customEntityTransform));
+          listHtml.splice(listHtml.length - 1, 0, getListMarkup(nestedListBlock, entityMap, hashtagConfig, directional, customEntityTransform));
           nestedListBlock = [];
         }
       } else {
@@ -669,13 +671,14 @@
     });
 
     if (nestedListBlock && nestedListBlock.length > 0) {
-      listHtml.push(getListMarkup(nestedListBlock, entityMap, hashtagConfig, directional, customEntityTransform));
+      listHtml.splice(listHtml.length - 1, 0, getListMarkup(nestedListBlock, entityMap, hashtagConfig, directional, customEntityTransform));
     }
 
     listHtml.push("</".concat(getBlockTag(previousBlock.type), ">\n"));
     return listHtml.join('');
   }
 
+  /* @flow */
   /**
   * The function will generate html markup for given draftjs editorContent.
   */

readme.md

@@ -70,7 +70,7 @@ Following is the list of conversions it supports:
 
 2. Converts ordered and unordered list blocks with depths to nested structure of `<ul>, <ol>` and `<li>`.
 
-3. Converts inline styles BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, SUPERSCRIPT, SUBSCRIPT to corresponding HTML tags: `<strong>, <em>, <ins>, <code>, <sup>, <sub>`.
+3. Converts inline styles BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, SUPERSCRIPT, SUBSCRIPT to corresponding HTML tags: `<strong>, <em>, <u>, <code>, <sup>, <sub>`.
 
 4. Converts inline styles color, background-color, font-size, font-family to a span tag with inline style details:
 `<span style="color:xyz;font-size:xx">`. (The inline styles in JSON object should start with strings `color` or `font-size` like `color-red`, `color-green` or `fontsize-12`, `fontsize-20`).