Support legacy table styles in markdown (#28488)

* Remove unnecessary assist styles

* Fix list styles

* Remove table styles for role="presentation"

src/components/ha-assist-chat.ts

@@ -134,7 +134,6 @@ export class HaAssistChat extends LitElement {
               })}"
               breaks
               cache
-              assist
               .content=${message.text}
             >
             </ha-markdown>
@@ -660,7 +659,7 @@ export class HaAssistChat extends LitElement {
       --markdown-table-border-color: var(--divider-color);
       --markdown-code-background-color: var(--primary-background-color);
       --markdown-code-text-color: var(--primary-text-color);
-      --markdown-list-indent: 1rem;
+      --markdown-list-indent: 1.15em;
       &:not(:has(ha-markdown-element)) {
         min-height: 1lh;
         min-width: 1lh;

src/components/ha-markdown.ts

@@ -70,11 +70,6 @@ export class HaMarkdown extends LitElement {
     a {
       color: var(--markdown-link-color, var(--primary-color));
     }
-    :host([assist]) img {
-      height: auto;
-      width: auto;
-      transition: height 0.2s ease-in-out;
-    }
     img {
       background-color: var(--markdown-image-background-color);
       border-radius: var(--markdown-image-border-radius);
@@ -86,8 +81,7 @@ export class HaMarkdown extends LitElement {
     p:first-child > img:last-child {
       vertical-align: top;
     }
-    :host > ul,
-    :host > ol {
+    ha-markdown-element > :is(ol, ul) {
       padding-inline-start: var(--markdown-list-indent, revert);
     }
     li {
@@ -138,6 +132,18 @@ export class HaMarkdown extends LitElement {
       border-bottom: none;
       margin: var(--ha-space-4) 0;
     }
+    table[role="presentation"] {
+      --markdown-table-border-collapse: separate;
+      --markdown-table-border-width: attr(border, 0);
+      --markdown-table-padding-inline: 0;
+      --markdown-table-padding-block: 0;
+      th {
+        vertical-align: attr(align, center);
+      }
+      td {
+        vertical-align: attr(align, left);
+      }
+    }
     table {
       border-collapse: var(--markdown-table-border-collapse, collapse);
     }
@@ -145,14 +151,15 @@ export class HaMarkdown extends LitElement {
       overflow: auto;
     }
     th {
-      text-align: start;
+      text-align: var(--markdown-table-text-align, start);
     }
     td,
     th {
       border-width: var(--markdown-table-border-width, 1px);
       border-style: var(--markdown-table-border-style, solid);
       border-color: var(--markdown-table-border-color, var(--divider-color));
-      padding: 0.25em 0.5em;
+      padding-inline: var(--markdown-table-padding-inline, 0.5em);
+      padding-block: var(--markdown-table-padding-block, 0.25em);
     }
     blockquote {
       border-left: 4px solid var(--divider-color);

src/resources/markdown-worker.ts

@@ -19,6 +19,7 @@ const renderMarkdown = async (
   if (!whiteListNormal) {
     whiteListNormal = {
       ...getDefaultWhiteList(),
+      table: [...(getDefaultWhiteList().table ?? []), "role"],
       input: ["type", "disabled", "checked"],
       "ha-icon": ["icon"],
       "ha-svg-icon": ["path"],