Changing the HTML and hence breaking the template

monika-agg commented 2 years ago

PLEASE NOTE: make sure the bug exists in the latest patch level of the project. For instance, if you are running a 2.x version of Apostrophe, you should use the latest in that major version to confirm the bug.

To Reproduce

Step by step instructions to reproduce the behavior:

Go to "https://npm.runkit.com/sanitize-html"

pass this html to sanitizeHtml function.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Template Design</title> <meta name="viewport" content="user-scalable=no,width=device-width, initial-scale=1" /> <style type="text/css"> @font-face { font-family: 'Open San'; font-style: italic; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); } body { font-family: 'Verdana', 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; } hr { width: 95%; margin: 0; border-top: 1px solid #ccc; } td { font-size: 14px; } td.txt_content { white-space: pre-wrap; } </style></head><body style="margin:0px auto; padding:0px;" bgcolor="#eeeeee"> <table align="center"> <tbody align="center"> <tr> <td width="32px;"></td> <td> <table height="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:348px;background-color:#fff;border-radius:10px;"> <tbody> <tr height="32px"> <td colspan="3"></td> </tr> <tr align="center"> <td width="32px"></td> <td> <table border="0" cellspacing="0" style="border-collapse: collapse;"> <tbody> <tr> <td> <table align="center" border="0" cellspacing="0" cellpadding="0" style="max-width:600px; padding:10px;"> <tbody> <tr> <td align="left" style="color:#444;" class="txt_content">Dear Monika,<br /><br />You've been assigned a new module titled <b>'xxxxxxxxxxxxx (22nd Oct, 2020)'</b>, under your Course <b>Townhalls </b>.</td> </tr> <tr height="12px"></tr> <tr height="12px"></tr> <tr> <td a lign="left" style="color:#444;" class="txt_content">< b>About this Module</b></td> </tr> <tr height="12px"></tr> <tr> <td align="left" style="color:#444;" class="txt_content">xxxxxxxxxxxxx (22nd Oct, 2020)</td> </tr> <tr height="12px"></tr> <tr> <td style="padding:!5px;"> <table align="center"> <tbody> <tr> <td> <table border="0" cellspacing="0" cellpadding="0" align="left" style="padding:10px;"> <tbody> <tr> <td> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2020-09/29/full/1601399804-0255.jpg" height="263" width="350" /> </td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr height="12px"></tr> <tr> <td style="max-width:600px;color:#444;">This module consists of the following activities:</td> </tr> <tr> <tr height="12px"></tr> <td> <table width="100%" border="0" style="border-collapse: collapse; margin- bottom: 10px;"> <tbody> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="6" style="background-color: #fff;"> <tr> <td align="center" valign="bottom" style="width: 55px;"> <img src="http://heuristixapac.blob.core.windows.net/clientcontents/EmailAssets/skilltron/activity/weblink.png" width="40px" height="40px" alt="Video" style="color: #444; font-size: 12px;" /> </td> <td> <b style="display:inline-block;max-width: 100%; min-width: 100px; color:#335572;padding-top:0.3em; padding-bottom:0.3em; text-transform:capitalize;"> Video </b> <br /> <b style="font-weight:100;color:#83b4c9;text-transform: uppercase;font-size:12px;"> WebLink </b> </td> <td style="float:right"> <b style="color:#335572;font-size:12px;"> 92 minutes </b> </td> <td width="12px"></td> </tr> </table> </td> </tr> </tbody> </table> <hr /> </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="padding-left:0;"> <table width="100%"" border=" 0" cellspacing="0" cellpadding="10" align="left" style="padding:10px;padding-left:0px;"> <tbody> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="10" align="center" style="border-collapse: collapse; max-width: 500px; background: rgba(0, 0, 0, 0);"> <tbody> </tbody> </table> </td> </tr> <tr> <td style="text-align: center;"> <a class="button" style="padding: 9px 17px; margin: 0; border-radius: 25px; text-decoration: none; background: #83b4c9; background-color:#83b4c9; color: white;" href="https://classic.yarnpkg.com/lang/en/docs/cli/upgrade/">GO TO MODULE</a> </td> </tr> <tr height="12px"></tr> <tr> <td> <table border="0" cellspacing="0" cellpadding="0" align="left" style="max-width:600px;padding:0px;"> <tbody> <tr> <td style="color:#444;" class="txt_content"><br />Happy Learning!</td> </tr> </tbody> </table> </td> </tr> <tr height="50px"> <td> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr height=10px;> <td width="100%"> <table width="100%"> <tbody> <tr height="30px"></tr> <tr height="8px"> <td width="100%" height="8px" style="background:white;"></td> </tr> <tr height="10px"></tr> </tbody> </table> </td> <td> <img src="https://disprzblobindia.blob.core.windows.net/skilltronassetspublic/EmailFooterImages/1680c702-b5f1-4385-ab68-69d9f0168a5c.png" height="67" width="200" style="height:67px;width:200px;object-fit:contain" /> </td> </tr> <tr height="8px"></tr> <tr height="8px "></tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> <td width="32px"></td> </tr> <tr height="32px"></tr> </tbody> </table> </td> <td width="32px;"></td> </tr> </tbody> </table></body></html>

3: scroll to Rendered Html after clicking on Run button.

Expected behavior

The Bottom Row containing "Go to Module" link and Happy learning text should be center aligned along with other content.

Describe the bug

The Resultant HTML is different from passed Html, the "Go To module" links in original html is a sibling of the other template text inside the same table parent. but the in the resultant string, this Html is outside the enclosing table of main content, and hence is not rendering properly.

Details

Version of Node.js: 14

Server Operating System: MacOS

Additional context:

Add any other context about the problem here. If the problem is specific to a browser, OS or mobile device, specify which.

Screenshots Expected

Getting

boutell commented 2 years ago

Thanks for the report. Would you please simplify this to the smallest test case that demonstrates the issue?

On Wed, Dec 15, 2021 at 6:44 AM Monika Aggarwal @.***> wrote:

PLEASE NOTE: make sure the bug exists in the latest patch level of the project. For instance, if you are running a 2.x version of Apostrophe, you should use the latest in that major version to confirm the bug. To Reproduce

Step by step instructions to reproduce the behavior:

Go to "https://npm.runkit.com/sanitize-html"

pass this html to sanitizeHtml function.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Template Design <meta name="viewport" content="user-scalable=no,width=device-width, initial-scale=1" /> <body style="margin:0px auto; padding:0px;" bgcolor="#eeeeee">
<td width="32px;">

<table height="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:348px;background-color:#fff;border-radius:10px;">

Dear Monika,

You've been assigned a new module titled 'xxxxxxxxxxxxx (22nd Oct, 2020)', under your Course Townhalls .

< b>About this Module

xxxxxxxxxxxxx (22nd Oct, 2020)

This module consists of the following activities:

Video
WebLink 92 minutes

GO TO MODULE

Happy Learning!

3: scroll to Rendered Html after clicking on Run button. Expected behavior The Bottom Row containing "Go to Module" link and Happy learning text should be center aligned along with other content. Describe the bug The Resultant HTML is different from passed Html, the "Go To module" links in original html is a sibling of the other template text inside the same table parent. but the in the resultant string, this Html is outside the enclosing table of main content, and hence is not rendering properly. Details *Version of Node.js:* 14 *Server Operating System:* MacOS *Additional context:* Add any other context about the problem here. If the problem is specific to a browser, OS or mobile device, specify which. *Screenshots* Expected [image: Screenshot 2021-12-15 at 5 13 22 PM] Getting [image: Screenshot 2021-12-15 at 5 12 55 PM] — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub , or unsubscribe . Triage notifications on the go with GitHub Mobile for iOS or Android .

--

THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

abea commented 2 years ago

https://npm.runkit.com/sanitize-html is not loading for me. It would help if you can set this up in a mocha test like is in the package's test series.

monika-agg commented 2 years ago

Closing this, as the html itself was broken

boutell commented 2 years ago

Thanks for checking into it more.

On Thu, Dec 16, 2021 at 7:30 AM Monika Aggarwal @.***> wrote:

Closing this, as the html itself was broken

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/apostrophecms/sanitize-html/issues/524#issuecomment-995772594, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAH27PDF2TUVISAKNZFASTURHLURANCNFSM5KDNISPA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

--

THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

apostrophecms / sanitize-html