Error message body as html without style

dab246 commented 3 years ago

Description

We use flutter_widget_from_html library to display the content as html. In case the html content contains many css styles that the library cannot parse, the content cannot be rendered.
issue raised: https://github.com/daohoangson/flutter_widget_from_html/issues/578

Exp: Text message sent from email address noreply@qa.open-paas.org

\n    <!doctype html>\n    <html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n      <head>\n        <title>\n          \n        </title>\n        <!--[if !mso]><!-->\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n        <!--<![endif]-->\n        <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style type=\"text/css\">\n          #outlook a { padding:0; }\n          body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }\n          table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }\n          img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }\n          p { display:block;margin:13px 0; }\n        </style>\n        <!--[if mso]>\n        <xml>\n        <o:OfficeDocumentSettings>\n          <o:AllowPNG/>\n          <o:PixelsPerInch>96</o:PixelsPerInch>\n        </o:OfficeDocumentSettings>\n        </xml>\n        <![endif]-->\n        <!--[if lte mso 11]>\n        <style type=\"text/css\">\n          .mj-outlook-group-fix { width:100% !important; }\n        </style>\n        <![endif]-->\n        \n      <!--[if !mso]><!-->\n        <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\" rel=\"stylesheet\" type=\"text/css\">\n        <style type=\"text/css\">\n          @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);\n        </style>\n      <!--<![endif]-->\n\n    \n        \n    <style type=\"text/css\">\n      @media only screen and (min-width:480px) {\n        .mj-column-per-100 { width:100% !important; max-width: 100%; }\n      }\n    </style>\n    \n  \n        <style type=\"text/css\">\n        \n        \n        </style>\n        \n        \n      </head>\n      <body style=\"word-spacing:normal;\">\n        \n        \n      <div style>\n        \n      \n      <!--[if mso | IE]><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"\" style=\"width:600px;\" width=\"600\" ><tr><td style=\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\"><![endif]-->\n    \n      \n      <div style=\"margin:0px auto;max-width:600px;\">\n        \n        <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"width:100%;\">\n          <tbody>\n            <tr>\n              <td style=\"direction:ltr;font-size:0px;padding:20px 0;padding-bottom:32px;text-align:center;\">\n                <!--[if mso | IE]><table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td class=\"\" width=\"600px\" ><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"\" style=\"width:600px;\" width=\"600\" ><tr><td style=\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\"><![endif]-->\n    \n      \n      <div style=\"margin:0px auto;max-width:600px;\">\n        \n        <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"width:100%;\">\n          <tbody>\n            <tr>\n              <td style=\"direction:ltr;font-size:0px;padding:20px 0;padding-bottom:0;padding-top:0;text-align:center;\">\n                <!--[if mso | IE]><table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td class=\"alarm-title-container-outlook\" style=\"vertical-align:top;width:600px;\" ><![endif]-->\n            \n      <div class=\"mj-column-per-100 mj-outlook-group-fix alarm-title-container\" style=\"background: #eaeefe; border-radius: 4px; border: 1px solid #eaeefe; font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;\">\n        \n      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n        <tbody>\n          <tr>\n            <td style=\"vertical-align:top;padding-top:4px;padding-bottom:4px;\">\n              \n      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style width=\"100%\">\n        <tbody>\n          \n              <tr>\n                <td align=\"left\" style=\"font-size:0px;padding:0;padding-top:8px;padding-right:20px;padding-bottom:8px;padding-left:20px;word-break:break-word;\">\n                  \n      <div style=\"font-family:Roboto;font-size:16px;line-height:1;text-align:left;color:#222222;\">This event is about to begin</div>\n    \n                </td>\n              </tr>\n            \n        </tbody>\n      </table>\n    \n            </td>\n          </tr>\n        </tbody>\n      </table>\n    \n      </div>\n    \n          <!--[if mso | IE]></td><td class=\"content-outlook\" style=\"vertical-align:top;width:600px;\" ><![endif]-->\n            \n      <div class=\"mj-column-per-100 mj-outlook-group-fix content\" style=\"border: 1px solid #ccc; border-radius: 4px; margin-top: 24px; font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;\">\n        \n      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"vertical-align:top;\" width=\"100%\">\n        <tbody>\n          \n              <tr>\n                <td align=\"left\" style=\"font-size:0px;padding:20px;word-break:break-word;\">\n                  \n      <div style=\"font-family:Roboto;font-size:20px;font-weight:500;line-height:1;text-align:left;color:#434343;\"></div>\n    \n                </td>\n              </tr>\n            \n              <tr>\n                <td align=\"left\" style=\"font-size:0px;padding:20px;padding-top:0px;word-break:break-word;\">\n                  \n      <table cellpadding=\"4px\" cellspacing=\"0\" width=\"100%\" border=\"0\" style=\"color:#434343;font-family:Roboto;font-size:14px;line-height:22px;table-layout:auto;width:100%;border:none;\">\n        <tr><td valign=\"top\" style=\"min-width: 80px;\"><strong>Time</strong></td><td><span style=\"display: inline-block;\">Tuesday 26 November 2019 04:30 - 05:30</span><span style=\"display: inline-block; color: #787878; font-weight: 400;\">&nbsp;Europe/Paris</span>&nbsp;(<a class=\"link\" href=\"https://dev.open-paas.org/calendar/#/calendar?start=11-26-2019\" style=\"text-decoration: none; color: #4d91c9;\">See in Calendar</a>)</td></tr><tr><td valign=\"top\"><strong>Attendees</strong></td><td><ul style=\"padding-inline-start: 16px; margin: 0;\"><li><span style=\"font-weight: 500\">userb@qa.open-paas.org</span><span style=\"color: #787878;\">&nbsp;&lt;userb@qa.open-paas.org&gt;</span><span style=\"font-weight: 500\">&nbsp;(Organizer)</span></li></ul></td></tr>\n      </table>\n    \n                </td>\n              </tr>\n            \n        </tbody>\n      </table>\n    \n      </div>\n    \n          <!--[if mso | IE]></td></tr></table><![endif]-->\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        \n      </div>\n    \n      \n      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        \n      </div>\n    \n      \n      <!--[if mso | IE]></td></tr></table><![endif]-->\n    \n    \n      </div>\n    \n      </body>\n    </html>\n

Solutions

Use sanitize_html to clean html message content

Result

The html content can be displayed, but the style attribute in the tags is removed resulting in incorrect display.

simulator_screenshot_5672B045-F316-45E4-BE58-FAD77B6036D4

Expect

chibenwa commented 3 years ago

(Being able to display is better than nothing.)

Please list the corresponding tickets you opened upstream in the tickets so that we can all monitor them.

IMO if there is not quick fixes we may move forward with the sanitiing option when rendering fails IMO while waiting for more robust options coming from the eco-system.

hoangdat commented 3 years ago

https://github.com/daohoangson/flutter_widget_from_html/issues/578

chibenwa commented 3 years ago

Have you tried https://github.com/Sub6Resources/flutter_html

Seems more popular for what it is worth.

How the two compares?

dab246 commented 3 years ago

Have you tried https://github.com/Sub6Resources/flutter_html

Seems more popular for what it is worth.

How the two compares?

I tried it and it can't display html content with nested table tags. You can read their feedback here. https://github.com/Sub6Resources/flutter_html/issues/810

dab246 commented 3 years ago

After sanitizing html content and removing attributes with size equal to 0px (Ex: font-size, width, height,...). All messages are displayed. But padding, background still not like the expected image.

Simulator Screen Shot - iPhone 12 Pro Max - 2021-08-24 at 13 49 16

chibenwa commented 3 years ago

I think we can live with this for now.

hoangdat commented 2 years ago

Solution is change to webview_inapp library

linagora / tmail-flutter