fix(mjml-core): add print to media queries #2677
Conversation
| @@ -18,7 +18,7 @@ export default function buildMediaQueriesTags(breakpoint, mediaQueries = {}, for | |||
|
|
|||
| return ` | |||
| <style type="text/css"> | |||
| @media only screen and (min-width:${breakpoint}) { | |||
| @media only screen and (min-width:${breakpoint}), print { | |||
There was a problem hiding this comment.
Maybe we can isolate them inside it's own style to ensure it won't break anything and add an attribute on mjml tag to disable it by default and only add them if needed like owa media queriees
There was a problem hiding this comment.
I like the idea of disabling it by default. I'll try to figure out a way to achieve your suggestion.
There was a problem hiding this comment.
@iRyusa I applied what you've suggested and it worked perfectly. Like me know if it needs modification and what would the next steps.
| @@ -373,6 +374,7 @@ export default function mjml2html(mjml, options = {}) { | |||
| content = skeleton({ | |||
| content, | |||
| ...globalData, | |||
| printerSupport, | |||
There was a problem hiding this comment.
I know forceOWADesktop parameter was getting the value through the attributes, but in my case it would be better to get it from the options. I guess that would not really be an issue.
forceOWADesktop: get(mjml, 'attributes.owa', 'mobile') === 'desktop',
Context:
We want to be able to use mjml to generate our invoice/statement and print them as PDF. We already have an wysiwyg editor that generates mjml for our emails and we would like to reuse it to have an editor over our invoice/statement as well.
I know the current state of my PR is not enough to have it approved and merged. I already have talked with @iRyusa in Slack and he shared his concerns around breaking email clients. I would need your help to get this PR fully tested, I'm not asking you to do it for us, but I would need some guidance.
Once those questions will be answered, we will be pleased to make all the tests required to get this PR approved.
Thanks in advance for the people that will be involved in that PR.
When the option
printerSupportis not provided it does not introduce any breaking changesBut when you want to fix the layout to support printers you just have to add the option like that:
PR for Typescript: DefinitelyTyped/DefinitelyTyped#65463
Result in Chrome using plain html:
Result when printing it as a PDF: