covalent icon indicating copy to clipboard operation
covalent copied to clipboard

MarkdownComponent drops table alignment

Open f-loris opened this issue 2 years ago • 0 comments

Describe the bug When specifying the text alignment of columns in a markdown table it is not considered in the rendered html although showdown supports it. I could verify that showdown is providing the alignment in the html it correctly, but I suspect the DomSanitizer is dropping the inline css styles: https://github.com/Teradata/covalent/blob/c930381eb342173e93ec3a3701d5403e34282f3f/libs/markdown/src/lib/markdown.component.ts#L332)

The sample from below is rendered from showdown as:

<table>
<thead>
<tr>
<th>Tables</th>
<th style="text-align:center;">Are</th>
<th style="text-align:right;">Cool</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>col 3 is</strong></td>
<td style="text-align:center;">right-aligned</td>
<td style="text-align:right;">$1600</td>
</tr>
<tr>
<td>col 2 is</td>
<td style="text-align:center;"><em>centered</em></td>
<td style="text-align:right;">$12</td>
</tr>
<tr>
<td>zebra stripes</td>
<td style="text-align:center;">are neat</td>
<td style="text-align:right;">$1</td>
</tr>
</tbody>

But in the rendered html of the MarkdownComponent the inline style of the th and td elements are gone.

To Reproduce Steps to reproduce the behavior:

  1. Use the following markdown with a td-markdown component
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| **col 3 is**  | right-aligned | $1600 |
| col 2 is      | *centered*    |   $12 |
| zebra stripes | are neat      |    $1 |
  1. The table is shown but the column 2 is not centered and column 3 not right-aligened as the inline style is dropped by the MarkdownComponent.

Expected behavior The style or at least some css class should be in the rendered html to be able to style the table appropriately.

Desktop:

  • OS: Windows
  • Browser chrome
  • Version 109.0.5414.75

f-loris avatar Feb 07 '23 08:02 f-loris