fix: better handling of adding the title to print and export to PDF

[tessus]

fixes #1743

---

When a document is printed or exported to PDF, a header 1 is prepended to the document with the title (internally adding a # Title).

This also adds an additional entry to the TOC with the title of the document. This PR fixes this behavior. I've also added a helper function to change the appearance in the future.

[tessus]

see also https://discourse.joplinapp.org/t/toc-minimum-level-to-apply-anchors/2902/5?u=tessus

[laurent22]

Hmm, I think we need a more permanent fix as this will break if the theme changes. In noteStyle.js, the styles for Markdown rendering are defined, in particular for h1. We could add to the list a new class like .print-header and apply the same styles - instead of h1 {... do h1, .print-header {... then create the header as <div class="print-header">...</div>. Not sure if that will work but it's better than having hard-coded style somewhere.

[tessus]

Ok, I'm genuinely confused now. This makes no sense to me.

Printing should ignore the theme css anyway. Or do you want people to print black/blueish pages with grey/white text?
I have only used a similar css as the h1 is currently using, but this is not a header anyway, so we can use something that works for all themes (even though I still don't understand why). Printing will always be on a white or light background, so what's the point? I haven't used any colors (except for the line, which we can either remove or just remove the color). In that case, the text/line will be in the color of the main theme.
Either way, I'm still puzzled by your comment.

[tessus]

@laurent22 did you see my comment? I really want to understand why supporting themes is needed for printing/exporting to PDF.
And I would like to get this in quickly. At least for me, it's rather annoying that I can't properly print/export a note with toc.

[laurent22]

Sorry I don't have time to look into this now, I'll check later.

[laurent22]

Printing should ignore the theme css anyway. Or do you want people to print black/blueish pages with grey/white text?

The style in noteStyle.js doesn't just define the colour but also padding, margin, font size, etc. I don't see why this particular element shouldn't have a CSS class like the other elements. Then that class can be easily styled in noteStyle.js, for example by making it an alias to h1

[tessus]

I see what you mean. However, I actually wanted to change the size depending on the length of the title. I currently use 2em. h1 uses 1.5em. But IMO it should be bigger than h1. It's the title after all.
However, if there's a very long title, it would wrap over 2 or 3 lines, thus I would make it a bit smaller for longer titles. At leaat that was the plan for the future. I just wanted to fix it first.

Anyway, I'll try to use a css class. Let's see how it turns out.

[laurent22]

Ok let's merge for now and we can improve if later we notice that it's causing issues. Thanks for the update.

[tessus]

I will still work on a follow-up PR to implement a new css class. It's just my sis is in town, so it could take a bit longer.