v2.5.32

fixed issue #253

Author: Aymkdn

README.md

@@ -2,7 +2,9 @@
 
 Convert HTML to PDFMake format with ease. This library bridges the gap between HTML content and [PDFMake](https://pdfmake.github.io/docs/) document definitions, allowing you to generate PDFs from basic HTML while maintaining based styling and structure.
 
-**Note**: if you need to convert a complex HTML, check some online solutions, like [Doppio](https://doppio.sh/), or you could try to convert [your HTML to canvas](https://github.com/chearon/dropflow) or [to an image](https://github.com/zumerlab/snapdom) and then to [export it to PDF](https://github.com/parallax/jsPDF).
+**Note**: if you need to convert a complex HTML (e.g. something produced by a Rich Text Editor), check some online solutions, like [Doppio](https://doppio.sh/), or you could try to convert [your HTML to canvas](https://github.com/chearon/dropflow) or [to an image](https://github.com/zumerlab/snapdom) and then to [export it to PDF](https://github.com/parallax/jsPDF).
+
+This library will have the same limitation as PDFMake. If you need to verify if a style is supported by PDFMake, you can check [its documentation](https://deepwiki.com/bpampuch/pdfmake).
 
 ## Features
 

browser.js

@@ -116,7 +116,7 @@ <h1>HTML to PDFMake convertor</h1>
       <div id="pdf_ie" style="display:none;padding:3em">The PDF file is sent to you for download. Use a modern browser (like Chrome or Firefox) to display the PDF in this page.</div>
     </div>
   </div>
-  <script src="browser-2.5.31.js"></script>
+  <script src="browser-2.5.32.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.js"></script>
   <script>

docs/browser-2.5.31.js

@@ -487,6 +487,7 @@ function htmlToPdfMake(htmlText, options) {
             ret[nodeNameLowerCase] = (ret.stack || ret.text).slice(0);
             delete ret.stack;
             delete ret.text;
+
             // apply all the inhirent classes and styles from the parents, or for the current element
             ret = this.applyStyle({ret:ret, parents:parents.concat([element])});
             // check if we have `start`
@@ -511,8 +512,10 @@ function htmlToPdfMake(htmlText, options) {
               // if not, we restructure our node
               // by moving the non-stack stuff inside a "text"
               text = ret.stack.slice(0, -1);
+              // make sure we only have 'text' as a child
+              // otherwise we switch to a stack
               ret = [
-                {"text": text}, // (Array.isArray(text) ? {"stack": text} : {"text": text}),
+                (Array.isArray(text) && text.filter(function(child) { return !child.text; }).length > 0 ? { "stack": text } : { "text": text }),
                 ret.stack[ret.stack.length-1]
               ];
             }

docs/browser-2.5.32.js

@@ -1,6 +1,6 @@
 {
   "name": "html-to-pdfmake",
-  "version": "2.5.31",
+  "version": "2.5.32",
   "description": "Convert HTML code to PDFMake",
   "main": "index.js",
   "scripts": {

docs/index.html

@@ -1248,6 +1248,48 @@ test("unit tests", function(t) {
     t.finish();
   });
 
+  t.test("complex nested ul/ol with p tags", function (t) {
+    var html = `<ul><li><p><strong>sometitle</strong></p><ol><li><p><strong>sometitle2:</strong></p><ul><li><p>sometext</p></li><li><p>sometext</p></li><li><p>sometext</p></li><li><p>sometext</p></li></ul></li><li><p><strong>sometitle3:</strong></p><ul><li><p>sometext</p></li></ul></li><li><p><strong>sometitle4:</strong></p><ul><li><p>sometext</p></li><li><p>sometext</p></li><li><p>sometext</p></li></ul></li><li><p><strong>sometitle5:</strong></p><ul><li><p>sometext</p></li><li><p>sometext</p></li><li><p>sometext</p></li></ul></li><li><p><strong>sometitle6:</strong></p><ul><li><p>sometext</p></li></ul></li></ol><p><strong>sometitle7:</strong></p><ul><li><p>sometext</p></li><li><p>somtext</p></li></ul></li></ul>`;
+    var ret = htmlToPdfMake(html, {
+      window: window
+    });
+    if (debug) console.log(JSON.stringify(ret));
+
+    // 1. Basic structure check
+    t.check(Array.isArray(ret) && ret.length === 1, "return is OK");
+    t.check(ret[0].nodeName === "UL" && Array.isArray(ret[0].ul) && ret[0].ul.length === 1, "root is UL with one LI");
+
+    // 2. Check the main LI stack
+    var mainLiStack = ret[0].ul[0].stack[0].stack;
+    t.check(Array.isArray(mainLiStack) && mainLiStack.length === 3 && mainLiStack[0].nodeName === "P" && mainLiStack[1].nodeName === "OL" && mainLiStack[2].nodeName === "P", "main LI stack has 3 items (p, ol, p)");
+
+    // 3. Check 'sometitle' (first item in main stack)
+    // This path (mainLiStack[0].stack[0]...) passed, so we keep it.
+    t.check(mainLiStack[0].text[0].text === "sometitle", "first P (sometitle)");
+
+    // 4. Check the nested OL (second item in main stack)
+    var nestedOl = mainLiStack[1];
+    t.check(nestedOl.nodeName === "OL" && Array.isArray(nestedOl.ol) && nestedOl.ol.length === 5, "nested OL has 5 LIs");
+
+    // 5. Check 'sometitle2:' (first LI of the nested OL)
+    // Path: ret[0].ul[0].stack[1].ol[0].stack[0].text[0].text
+    var nestedLi1 = nestedOl.ol[0];
+    t.check(nestedLi1.stack[0].text[0].text[0].text === "sometitle2:", "nested OL LI 1 P (sometitle2:)");
+
+    // 6. Check "super grand child" (UL inside the first LI of the nested OL)
+    // Path: ret[0].ul[0].stack[1].ol[0].stack[1].ul[0].stack[0].text
+    var deepUl = nestedLi1.stack[1]; // This assumes stack[0] was the <p>
+    t.check(deepUl.nodeName === "UL" && Array.isArray(deepUl.ul) && deepUl.ul.length === 4, "deep UL has 4 LIs");
+    t.check(deepUl.ul[0].stack[0].text === "sometext", "deep UL LI 1 P (sometext)");
+    t.check(deepUl.ul[3].stack[0].text === "sometext", "deep UL LI 4 P (sometext)");
+
+    // 7. Check 'sometitle7:' (third item in main stack)
+    // Path: ret[0].ul[0].stack[2].text[0].text
+    t.check(mainLiStack[2].text[0].text === "sometitle7:", "second P (sometitle7:)");
+
+    t.finish();
+  });
+
   t.test("CSS units",function(t) {
     var html = `<div style="line-height:107%;font-size:large;width:110px;height:50pt;margin-left:1in;margin-top:2em;margin-right:1rem;margin-bottom:0.5cm">hello world</div>`;
     var ret = htmlToPdfMake(html, {