search

OfficeDev / office-js

A repo and NPM package for Office.js, corresponding to a copy of what gets published to the official "evergreen" Office.js CDN, at https://appsforoffice.microsoft.com/lib/1/hosted/office.js.
https://learn.microsoft.com/javascript/api/overview
Other
677 stars 95 forks source link

Table attributes are removed from signatures inserted in mobile Outlooks #4079

Closed eleonardos closed 6 months ago

eleonardos commented 8 months ago

There is a problem with signatures inserted by add-ins in mobile Outlooks. If the signature contains a table with cellspacing or cellpading attributes, these attributes are removed when the signature is inserted. As a result, the signature looks different then on other platforms.

Your Environment

Expected behavior

Signatures inserted in mobile Outlook should look exactly the same as signatures inserted in other Outlooks. This should be consistent across all platforms.

Current behavior

The cellspacing and cellpading table attributes are removed from the signature and because of this the default values are used for removed attributes when displaying the signature. This changes the layout of the signature and makes it look bad.

Steps to reproduce

Here is a sample add-in that you can use to reproduce the problem: https://github.com/eleonardos/mobile-addin-repro. Just deploy the add-in to your account using the following manifest: https://eleonardos.github.io/mobile-addin-repro/manifest.xml. Then open a new message in Outlook e.g. Android and OWA. The signature inserted on Outlook mobile will look bad.

Sample signature inserted in OWA: image

The same sample signature inserted in iOS and Android: image A black and red background is added to visualize the problem. The black space is added because the cellspacing attribute of the table has been removed, and the red space is added because the cellpadding attribute of the table has been removed.

Without a color backgrounds the signature would still look bad when inserted in iOS and Android as it would have to much space: image This problem is especially painful in signatures of real companies, which are much more complex.

Context

Most of our customers use table signatures because they look best on all email clients. By default, the tables have cellspacing="0" and callpadding="0" attributes added. With the new support for mobile Outlooks, the signatures look worse when inserted on mobiles.

rajjha-msft commented 8 months ago

Thanks for reporting this issue regarding the signature feature. It has been put on our backlog. We unfortunately have no timelines to share at this point.

Internal tracking Id: 8698684.

JonasBlaase commented 8 months ago

If you are trying to remove the spaces, i have found that setting these in the style property of the table works as a workaround: padding: 0px; margin: 0px; border-spacing: 0px; border-collapse:collapse

ajays-msft commented 6 months ago

@eleonardos - Thanks for reaching out regarding your issue <>. As per our internal investigation, some of the HTML attributes that are being used in the signature are not being rendered appropriately due to HTML sanitization. As a guidance, partners are recommended to use CSS Styles over HTML attributes. For best practices, please refer to code which has the list of allowed attributes: https://github.com/microsoft/roosterjs/blob/b373c89b1368b69ae1004624bad80f6100c05adb/packages/roosterjs-editor-dom/lib/htmlSanitizer/getAllowedValues.ts