Changing the HTML and hence breaking the template
monika-agg opened this issue · comments
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
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.
Closing this, as the html itself was broken