Exporting to pdf

[mariomui]

Describe the bug When exporting to pdf, the pdf does not show the custom stylings.

To Reproduce

Steps to reproduce the behavior:

1. make a border around any div like normal.
2. export to pdf
3. See error, pdf does not reflect css.

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Device (please complete the following information):

• Operating System: [e.g. Linux | Android | MacOS | Windows | IOS]
• Obsidian version:

Additional context Add any other context about the problem here.

[LilaRest]

@mariomui Thanks for this report. I'll invesgate it soon.

Have you any idea about the source of the problem ?

I've never neither faced this problem nor interacted with the PDF export functionnality from a plugin.

[mariomui]

Yes. Obsidian doesn't pack in your custom css class if it doesnt see that it's wrapped up in a div or a block quote. I'll look into it/fix it if you want

[mariomui]

https://forum.obsidian.md/t/export-to-pdf-does-not-respect-page-level-css/10082/2

[mariomui]

After checking the forums, (I like to do this before I work on something) I think the whitenoise promised that this would be fixed in 1.1.15 the version released yesterday. I'll check it and get back to you.

[LilaRest]

@mariomui I looked a bit on the Obsidian forum too but hadn't found this post, thanks for that !

Let me know, I've the 1.1.15 version and it doesn't seems to fix this issue. I'll be happy to accept your PR if needed :)

[mariomui]

the class isn't injected, if it was the border would be red instead of orange. Basically, i colored all possible elements and exported the pdf.

I'll start work on it but since the solution seems to either be a) it can't be done or b) some async await has to happen with the processing ---> which is more involved. https://github.com/jamiebrynes7/obsidian-todoist-plugin/issues/98

i'm happy to work on it but I would like to know if the MutationObserver code is where the processing tasks take place (where does the class injection take place)

Current theory is that export is exporting before the plugin code has a chance to render.

[LilaRest]

@mariomui I had performed a similar test which indeed shows that the custom classes are not inserted.

The details you just gave me made sense to me, and I spent 20 mins trying to ensure that the process() method is awaited, but with no success (I've tried what Licat mentions here).

Indeed, in the MutationObserver the process() method is called which is responsible for the render of the custom classes. I've also tried to remove this MutationObserver with no success too.

To ensure that it is possible I tried with a minimal example that injected a single class to each element of the page and it has been rendered properly in PDF export. So yes it can be done.

So actually I guess that at some point in the process() method an async function is not awaited, but I couldn't find out which one.

[LilaRest]

@mariomui Any news ? Have you performed some tries on your side ?

[mariomui]

could i get the code that you used to ensure that it is possible? It could just be an assumption that the export waits for async. It could just be FAST inserts are okay, but not the high level multi level inserts. I injected som promise sleepers and it doesn't seem to respect waiting for the resolve before processing the print export.

[mariomui]

I think I have something with the context promises resolving

[LilaRest]

could i get the code that you used to ensure that it is possible? It could just be an assumption that the export waits for async. It could just be FAST inserts are okay, but not the high level multi level inserts. I injected som promise sleepers and it doesn't seem to respect waiting for the resolve before processing the print export.

Yeah that could make sense, maybe we could contact Obsidian devs to get precise infos about this ?

To test if applying classes from a plugin is possible in PDF rendering I've simply replaced the customClassReadMode() function of read-mode.ts with something like :

export function customClassReadMode (element: HTMLElement, context: any) {
    element.classList.add("green");
}

and added a CSS snippet with :

.green {
    background-color: green !important;
}

[mariomui]

Cool. I did the same thing. I was trying out the promises array in ctx before I had to run errands. In any case , I updated the typescript dependencies as well as the obsidian lib, as well as updated esbuild mjs file, and added a guide on hot loading (so contributors don't have to quit/restart obsidian to see changes), so I have a PR. But let me see what I can do with this undocumented api before I submit tomorrow.

[LilaRest]

Great, thanks for that !

Have you been able to fix the problem by appending a promise to the promises array of the context ?

Yeah, take all the time you need :)

[mariomui]

I’m still eating lunch with a visiting relative. But that’s where I left off

On Sat, Feb 25, 2023 at 2:51 PM Lila Rest @.***> wrote:

Great, thanks for that !

Have you been able to fix the problem by appending a promise to the promises array of the context ?

— Reply to this email directly, view it on GitHub https://github.com/LilaRest/obsidian-custom-classes/issues/4#issuecomment-1445221674, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHB7EBH3MRR7IZPPFRRRM4LWZKEIHANCNFSM6AAAAAAVE4UMYM

[LilaRest]

Ok let me know if there is anything I can do to help you in this work. Bye !

[mariomui]

i think you should leave a comment to the obsidian guys to expose the pdf apis. I've done it by anchoring to a custom block-language

but i breaks all the other features. While i think it'd be a good thing to have to be able to export to pdf, it seems like its only hacky solutions. i've tested out loadpdjs and i dont think it exposes the pdf api either. I'm gonna close this bug and attribute it to api limitations.

[LilaRest]

@mariomui Ok I'll contact them to get more infos about how the PDF exporting works. Thanks for your time :)