Setting Custom Margin Not Working

[SawkaDev]

Issue I am converting the html like this in an API route.

var html = htmlToPdfmake(req.body.data, { window: window});

The returned HTML looks something like this

{
    text: 'test t ',
    nodeName: 'P',
    margin: [ 0, 5, 0, 10 ],
    style: [ 'html-p' ]
  },

However I do no want the top margin to be 5 and do not want the bottom margin to be 10.

So in my document definition I am setting the following style

    styles: {
      'html-p': {
        margin: [0, 0, 0, 0],
        color: 'red' // this is just a test
      }
    }

In the generated document, I can see all <p> tags have the color red. But the margin still appears to be there for the top and bottom. See image below for the spacing between <p> elements even after I added the html-p style.

Has margins been confirmed to be working properly for p tags?

Oddly, if I go in and manually change the default margins found inside of html-to-pdfmake/index.js it works perfectly.

I changed line 72 of index.js to

    p: {margin:[0, 0, 0, 0]},

And only now do the margins appear how I want:

[SawkaDev]

Update: Not sure how I missed this

But it seems I need to update the defaultStyle and not styles within the document definition

    defaultStyle: {
      'html-p': {
        margin: [0, 0, 0, 0],
        color: 'red'
      }
    }

This seems to work, but I am still curious, how come the color style works when I put it in styles for the html-p but not margin. Why does margin need to be set in the defaultStyle is this intended? The docs only mention to overwrite styles that you need to add it to styles it does not mention modifying the defaultStyles of the document definition

[Aymkdn]

I defined some default styles, as listed here, and as you can see, p as a default margin:

And the doc explains what to do in that case:

So for any other properties/styles, not listed in defaultStyle, they will just apply correctly.

[SawkaDev]

I defined some default styles, as listed here, and as you can see, p as a default margin:

And the doc explains what to do in that case:

So for any other properties/styles, not listed in defaultStyle, they will just apply correctly.

Oh man. You are right. Thanks for the clarification. Love this package!

[SawkaDev]

@Aymkdn I was trying to avoid asking this, but I have tried so many combinations. The original issue now makes sense completely. But now I can not figure out styling for a ordered/unordered list, with nested items. I can style everything, but can not get the instance between nested list items to increase/decrease. Any advice?

I tried setting defaultStyle and styles for html-p html-ul html-li html-ol and none changed the space between the nested list items. I tried changing the lineHeight margin and padding properties, no luck.

I am using the rich text editor TipTap and each paragraph uses a <p> tag. I saw in another issue you suggested to use <div>, but i want to try and use it as close to the output I am getting from the text editor

This is my HTML produced from TipTap Rich Editor

<p>First Paragraph</p><p>Paragraph for Unordered List</p><ul><li><p>ul1</p></li><li><p>ul2</p></li><li><p>ul3</p><ul><li><p>ul3 nested</p></li></ul></li><li><p>ul4</p><ul><li><p>ul4 nested 1</p></li><li><p>ul4 nested 2</p></li></ul></li></ul>

I am using this library in node if that matters.

[Aymkdn]

I don't think there is a solution using the styles... PDFMake is quite limited for styling.

I would say that your only option is to change the HTML code.

[SawkaDev]

Thanks for the response!

I will post what is the best solution for my use case in case someone uses this library and is trying to use TipTap as an editor and having issues with nested lists from TipTap.

Solution Although this library works perfect and is very robust, tiptap nested lists are just not working or formatting as I want. So instead of outputting HTML I am outputting JSON from the TipTap Editor. Then I created my own function to recursively loop through the JSON to generate the pdf.

All in all, if you have normal HTML, this library is the best solution I have seen.