From cf4dce3b27daf8f4d7958068e40cd48644a15cd3 Mon Sep 17 00:00:00 2001 From: Sylvain Jermini Date: Fri, 8 Mar 2024 20:02:50 +0100 Subject: [PATCH] fix body width override handling --- data/arturia.mjml | 80 ++++++++ data/basic.mjml | 64 ++++++ data/black-friday.mjml | 35 ++++ data/body-width-override.mjml | 9 + data/card.mjml | 59 ++++++ data/christmas.mjml | 81 ++++++++ data/empty-section.mjml | 5 + data/newsletter.mjml | 62 ++++++ data/onepage.mjml | 71 +++++++ data/proof.mjml | 39 ++++ data/racoon.mjml | 185 ++++++++++++++++++ data/reactivation-email.mjml | 54 +++++ data/real-estate.mjml | 124 ++++++++++++ data/receipt-email.mjml | 61 ++++++ .../digitalfondue/mjml4j/DOMSerializer.java | 1 - .../mjml4j/MjmlComponentBody.java | 13 +- .../mjml4j/MjmlComponentSection.java | 5 - .../mjml4j/BaseComponentTests.java | 10 + .../mjml4j/ComplexTemplateTests.java | 61 ++++++ .../java/ch/digitalfondue/mjml4j/Helpers.java | 8 +- 20 files changed, 1015 insertions(+), 12 deletions(-) create mode 100644 data/arturia.mjml create mode 100644 data/basic.mjml create mode 100644 data/black-friday.mjml create mode 100644 data/body-width-override.mjml create mode 100644 data/card.mjml create mode 100644 data/christmas.mjml create mode 100644 data/empty-section.mjml create mode 100644 data/newsletter.mjml create mode 100644 data/onepage.mjml create mode 100644 data/proof.mjml create mode 100644 data/racoon.mjml create mode 100644 data/reactivation-email.mjml create mode 100644 data/real-estate.mjml create mode 100644 data/receipt-email.mjml diff --git a/data/arturia.mjml b/data/arturia.mjml new file mode 100644 index 0000000..b3e377c --- /dev/null +++ b/data/arturia.mjml @@ -0,0 +1,80 @@ + + + + + + + + + NEWS
MARCH 2016 + + + + + Dear {firstname},

You used to follow rhythm, now rhythm follows you, everywhere you go!
Discover iSpark, the mobile transposition of our renowned beat-making solution Spark. + + + + + + iSpark is a powerful mobile production tool allowing you to create and play rhythmic tracks, complex grooves and even complete songs. Its sonic strike force comes along with an unwavering workflow and a real flexibility. + + + + + + Check out the iSpark introduction movie shot during the Arturia Experience event at the ADE featuring the Dutch beatmaker FilosofischeStilte. + + + + + + Follow Mauricio Garcia, Arturia Product Specialist, presenting you the many clever features of iSpark in this series of tutorials. + + + + + + iSpark includes a tremendous collection of factory kits and individual instruments covering most of the field of application of beat-making but it is also compatible with the existing Spark resources and Expansion Packs. + Learn more about iSpark + + + + + Musically yours,
The Arturia Team + + + + + + + + + + + + + + + + + + + See this email in your browser here + + + + + + Your email address is on this list as a result of a subscription, information request, competition, or other correspondence you may have had with us in the past. If you would like to be removed from our list, check the email address this newsletter + was sent to and use the following link: Unsubscribe. Privacy policy available here. + ARTURIA: https://www.arturia.com - Contact: info
ARTURIA France: 30 chemin + du vieux chêne, 38240 Meylan - FRANCE
ARTURIA US: : 5776-D Lindero Cyn Rd #239 -Westlake Village, CA 91362 - USA + + + + + \ No newline at end of file diff --git a/data/basic.mjml b/data/basic.mjml new file mode 100644 index 0000000..abd3ee1 --- /dev/null +++ b/data/basic.mjml @@ -0,0 +1,64 @@ + + + + + + + + My Company + + + + + + + + Slogan here + Promotion + + + + + + + + My Awesome Text + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. + Sed eget nulla elit. Nulla aliquet mollis faucibus. + Learn more + + + + + + + + + + + + + + + + + Find amazing places + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus. + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/data/black-friday.mjml b/data/black-friday.mjml new file mode 100644 index 0000000..aaa991c --- /dev/null +++ b/data/black-friday.mjml @@ -0,0 +1,35 @@ + + + + + + +

WOMEN       |       MEN       |       KIDS

+ + + + + + + + + + + +

Black Friday

+ + +

Take an  extra 50% off
Use code SALEONSALE* at checkout

+ + + + + + Shop Now + +

* Offer valid on Allura purchases on 17/29/11 at 11:59 pm. No price adjustments on previous 
purchases, offer limited to stock. Cannot be combined with any offer or promotion other than free.

+ + + + + \ No newline at end of file diff --git a/data/body-width-override.mjml b/data/body-width-override.mjml new file mode 100644 index 0000000..8055871 --- /dev/null +++ b/data/body-width-override.mjml @@ -0,0 +1,9 @@ + + + + + test + + + + \ No newline at end of file diff --git a/data/card.mjml b/data/card.mjml new file mode 100644 index 0000000..3fa29d6 --- /dev/null +++ b/data/card.mjml @@ -0,0 +1,59 @@ + + + Say hello to card + + + + + + + + + + + Writing A Good Headline For Your Advertisement + + + + + // BR&AND + + + HOME   /   SERVICE   /   THIRD + + + + + Free Advertising For Your Online Business. + + + + + + + + + + A Right Media Mix Can Make The Difference. + + + + + + Marketers/advertisers usually focus their efforts on the people responsible for making the purchase. In many cases, this is an effective approach but in other cases it can make for a totally useless marketing campaign. + CALL TO ACTION + + + + + + + + + + Unsubscribe from this newsletter
52 Edison Court Suite 259 / East Aidabury / Cambodi
Made by svenhaustein.de + + + + \ No newline at end of file diff --git a/data/christmas.mjml b/data/christmas.mjml new file mode 100644 index 0000000..4ae42d9 --- /dev/null +++ b/data/christmas.mjml @@ -0,0 +1,81 @@ + + + + + + +

Product | Concept | Contact

+ + + + + + + + + + + +

- Our Holiday Recipes -

+ + + + + + + + + +

Cake Title

+

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

+

Choose me >

+ + + + + + + + + +

Cake Title

+

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

+

Choose me >

+ + + + + + + + + +

Cake Title

+

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

+

Choose me >

+ + + + + + Discover all desserts + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/data/empty-section.mjml b/data/empty-section.mjml new file mode 100644 index 0000000..3adf395 --- /dev/null +++ b/data/empty-section.mjml @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/data/newsletter.mjml b/data/newsletter.mjml new file mode 100644 index 0000000..50d7b08 --- /dev/null +++ b/data/newsletter.mjml @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + Here is what you've missed + + + + + + + + + + + + Sed ut perspiciatis + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + + + + + + + + Explore our new features + + + + + + + + + + + + + Right on time! + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + + + + + Stay in touch! + + + + + + + + \ No newline at end of file diff --git a/data/onepage.mjml b/data/onepage.mjml new file mode 100644 index 0000000..95b0a94 --- /dev/null +++ b/data/onepage.mjml @@ -0,0 +1,71 @@ + + + + + [[HEADLINE]] + + + [[PERMALINK_LABEL]] + + + + + + + + Home        Features         + Portfolio + + + + + More than an email template

Only on Mailjet template builder + SUBSCRIBE + + + + + + Best audience

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend sagittis nunc, et fermentum est ullamcorper dignissim. + + + + Higher rates

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend sagittis nunc, et fermentum est ullamcorper dignissim. + + + + 24/7 Support

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend sagittis nunc, et fermentum est ullamcorper dignissim. + + + + + Why choose us? + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. + + + + + + + + Great newsletter for the best company out there

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam. + READ MORE + + + + + +

[[DELIVERY_INFO]]

+ + +

[[POSTAL_ADDRESS]]

+ + + + + \ No newline at end of file diff --git a/data/proof.mjml b/data/proof.mjml new file mode 100644 index 0000000..d786d34 --- /dev/null +++ b/data/proof.mjml @@ -0,0 +1,39 @@ + + + + + + + + + + + + + Article Title + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet ipsum consequat. + READ MORE + + + + + + Article Title + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + READ MORE + + + + Article Title + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + READ MORE + + + + Article Title + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + READ MORE + + + + \ No newline at end of file diff --git a/data/racoon.mjml b/data/racoon.mjml new file mode 100644 index 0000000..6f14180 --- /dev/null +++ b/data/racoon.mjml @@ -0,0 +1,185 @@ + + + + + + + + + home + blog + store + + + + + + +

SPRING PROMO

+

50%

+

OFFER

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+ + SHOP NOW + + + + + + + + + + + +

FREE SHIPPING ON ORDER OVER 55�

+ + + + + + + +

CHESTERK TANK

+

15�

+ + BUY NOW + + + + +

BEYOND BACKPACK

+

20�

+ + BUY NOW + + + + +

JENSEN SHORTS

+

28�

+ + BUY NOW + + + + + + +

VERDANT CAP

+

20�

+ + BUY NOW + + + + +

BLAKE POLO SHIRT

+

25�

+ + BUY NOW + + + + +

SKETCH FLORAL

+

23�

+ + BUY NOW + + + + + + + + +

ANDERSON SWEATER

+

75�

+

The Anderson Sweater features a floral all-over print with contrast colour.

+ + BUY NOW + + + + + +

ALDER TWO JONES JACKET

+

100�

+

Colour-block design, zip entry, oxford hood lining, side pockets & TC lining.

+ + BUY NOW + + + + + + + + +

DISCOVER OUR

+

SUMMER COLLECTION

+ + + + + + + +

TOPAZ C3 SHOES

+

70�

+ + BUY NOW + + + + +

CAMDEN BACKPACK

+

50�

+ + BUY NOW + + + + + + +

PAYMENT METHODS

+

We accept all majors payments options

+ + + + + +

CURRENCIES CHOICE

+

You have the choice to pay with your own currencies

+ + + + + +

EXPRESS SHIPPING

+

Delivered tomorrow before noon

+ + + + + + + + + +

Privacy policy

+ + + + + + + + + + + + + \ No newline at end of file diff --git a/data/reactivation-email.mjml b/data/reactivation-email.mjml new file mode 100644 index 0000000..387a42e --- /dev/null +++ b/data/reactivation-email.mjml @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + the only way to travel + + + + + + Hey {{FirstName}} +
+
+ It's been a long time since you last traveled with us. + + Have a look at some of the top destinations people are booking right now! + + + + + + New York
+

$399

+ + + + + London
+

$399

+ + + + + Berlin
+

$399

+ + + + + + Best,

The {{Company}} Team + + + + \ No newline at end of file diff --git a/data/real-estate.mjml b/data/real-estate.mjml new file mode 100644 index 0000000..f756516 --- /dev/null +++ b/data/real-estate.mjml @@ -0,0 +1,124 @@ + + + Say hello to RealEstate + + + + + + + + + + + + + + + + Real Estate + ⚊

 + + + + + Aliquam lorem ante, dapibus in hasellus viverra nulla ut metus varius laoreet. Quisque rutrum lorem dellorus. Aenean imperdiet. + + + + + + + + Villa Semperin + + + + – first offer – + 340,000 $ + Nascetur ridiculus mus. Donec quam felis, ultricies nec + view details + + + + + Lorem Ipsum + Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Lorem Ipsum + + + + + + + + + + + + + + Lorem Ipsum + + Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Lorem Ipsum + Call to action + + + + + + + + + + + + + Lorem Ipsum + Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. + + + + + + Nullam dictum felis eu pede + + + + + + Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Lorem Ipsum + + + Phasellus viverra null aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Lorem Ipsum + + + Quisque rutrum. Aenean imperdiet viverra nulla ut metus varius laoreet. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Lorem Ipsum + + + + + + – 2. offer – + 198,700 $ + Donec quam felis, ultricies Nascetur ridiculus mus. + view details + + + Window House 23 + + + + + + + + + + Unsubscribe from this newsletter
Icon made by Freepik from www.flaticon.com
Made by svenhaustein.de + + + + \ No newline at end of file diff --git a/data/receipt-email.mjml b/data/receipt-email.mjml new file mode 100644 index 0000000..7b31165 --- /dev/null +++ b/data/receipt-email.mjml @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + HELLO +

[[FirstName]]

+ + + + + + + Thank you very much for your purchase. +
+ Please find the receipt below. + + + + + Order Number + [[OrderNumber]] + + + Order Date + [[OrderDate]] + + + Total Price + [[TotalPrice]] + + + + + Download Receipt + + + Track My Order + + + + + + Best, +
+ The [[CompanyName]] Team + + + + \ No newline at end of file diff --git a/src/main/java/ch/digitalfondue/mjml4j/DOMSerializer.java b/src/main/java/ch/digitalfondue/mjml4j/DOMSerializer.java index 62fc2da..6b24916 100644 --- a/src/main/java/ch/digitalfondue/mjml4j/DOMSerializer.java +++ b/src/main/java/ch/digitalfondue/mjml4j/DOMSerializer.java @@ -139,7 +139,6 @@ private static void start(Node node, StringBuilder appendable, boolean trim) { Text t = (Text) node; var text = literalAppend ? t.getData() : escapeTextData(t.getData()); appendable.append(trim ? text.trim() : text); - } else if (node.getNodeType() == Node.COMMENT_NODE) { appendable.append(""); } else if (node.getNodeType() == Node.DOCUMENT_TYPE_NODE) { diff --git a/src/main/java/ch/digitalfondue/mjml4j/MjmlComponentBody.java b/src/main/java/ch/digitalfondue/mjml4j/MjmlComponentBody.java index b194cca..4455f50 100644 --- a/src/main/java/ch/digitalfondue/mjml4j/MjmlComponentBody.java +++ b/src/main/java/ch/digitalfondue/mjml4j/MjmlComponentBody.java @@ -11,16 +11,19 @@ class MjmlComponentBody extends BaseComponent.BodyComponent { MjmlComponentBody(Element element, BaseComponent parent, GlobalContext context) { super(element, parent, context); + + if (hasAttribute("width")) { + context.containerWidth = getAttribute("width"); + } + + if (hasAttribute("background-color")) { + context.backgroundColor = getAttribute("background-color"); + } } @Override void setupPostConstruction() { super.setupPostConstruction(); - if (hasAttribute("width")) - context.containerWidth = getAttribute("width"); - - if (hasAttribute("background-color")) - context.backgroundColor = getAttribute("background-color"); } private static final LinkedHashMap ALLOWED_DEFAULT_ATTRIBUTES = mapOf( diff --git a/src/main/java/ch/digitalfondue/mjml4j/MjmlComponentSection.java b/src/main/java/ch/digitalfondue/mjml4j/MjmlComponentSection.java index e5cb38c..3804fe0 100644 --- a/src/main/java/ch/digitalfondue/mjml4j/MjmlComponentSection.java +++ b/src/main/java/ch/digitalfondue/mjml4j/MjmlComponentSection.java @@ -345,11 +345,6 @@ private StringBuilder renderSection(HtmlRenderer renderer) { @Override StringBuilder renderChildren(HtmlRenderer renderer) { var sb = new StringBuilder(); - - if (getChildren().isEmpty()) { - return sb; - } - sb.append("\n\n"); diff --git a/src/test/java/ch/digitalfondue/mjml4j/BaseComponentTests.java b/src/test/java/ch/digitalfondue/mjml4j/BaseComponentTests.java index 292ce31..a0ded53 100644 --- a/src/test/java/ch/digitalfondue/mjml4j/BaseComponentTests.java +++ b/src/test/java/ch/digitalfondue/mjml4j/BaseComponentTests.java @@ -210,4 +210,14 @@ void testSectionColumnPrecision2() { void testEmptyColumnEmptyNodeSocial() { testTemplate("empty-column-empty-node-social"); } + + @Test + void testBodyWidthOverride() { + testTemplate("body-width-override"); + } + + @Test + void testEmptySection() { + testTemplate("empty-section"); + } } diff --git a/src/test/java/ch/digitalfondue/mjml4j/ComplexTemplateTests.java b/src/test/java/ch/digitalfondue/mjml4j/ComplexTemplateTests.java index f200312..14b54f7 100644 --- a/src/test/java/ch/digitalfondue/mjml4j/ComplexTemplateTests.java +++ b/src/test/java/ch/digitalfondue/mjml4j/ComplexTemplateTests.java @@ -30,4 +30,65 @@ void testSpheroMini() { void testAmario() { testTemplate("amario"); } + + @Test + void testArturia() { + testTemplate("arturia"); + } + + @Test + void testBasic() { + testTemplate("basic"); + } + + @Test + void testBlackFriday() { + testTemplate("black-friday"); + } + + @Test + void testCard() { + testTemplate("card"); + } + + @Test + void testChristmas() { + testTemplate("christmas"); + } + + @Test + void testNewsletter() { + testTemplate("newsletter"); + } + + @Test + void testOnepage() { + testTemplate("onepage"); + } + + @Test + void testProof() { + testTemplate("proof"); + } + + @Test + void testRacoon() { + testTemplate("racoon"); + } + + @Test + void testReactivationEmail() { + testTemplate("reactivation-email"); + } + + @Test + void testRealEstate() { + testTemplate("real-estate"); + } + + @Test + void testReceiptEmail() { + testTemplate("receipt-email"); + } + } diff --git a/src/test/java/ch/digitalfondue/mjml4j/Helpers.java b/src/test/java/ch/digitalfondue/mjml4j/Helpers.java index df6963e..896a136 100644 --- a/src/test/java/ch/digitalfondue/mjml4j/Helpers.java +++ b/src/test/java/ch/digitalfondue/mjml4j/Helpers.java @@ -42,6 +42,12 @@ static String beautifyHtml(String html) throws IOException { } } + + + static String simplifyBrTags(String input) { + return input.replaceAll("", "
"); + } + // align all values defined in ids -> mjml use random strings, for coherence reason we find all id="...." and replace them with // a sequence. this allows to align id=".." and for=".." static String alignIdFor(String input) { @@ -65,7 +71,7 @@ static void testTemplate(String name) { var template = FileUtils.readFileToString(new File("data/" + name + ".mjml"), StandardCharsets.UTF_8); var res = Mjml4j.render(template); var comparison = FileUtils.readFileToString(new File("data/" + name + ".html"), StandardCharsets.UTF_8); - Assertions.assertEquals(alignIdFor(beautifyHtml(comparison)), alignIdFor(beautifyHtml(res))); + Assertions.assertEquals(simplifyBrTags(alignIdFor(beautifyHtml(comparison))), alignIdFor(beautifyHtml(res))); } catch (IOException e) { throw new IllegalStateException(e); }