The Mastodon API returns HTML which dashboards display raw. The Mastodon plugin deals with that by stripping HTML tags which is minimally OK but not great. Here is rough go at a way to enable HTML to render in table cells.
In ~/steampipe/ui/dashboard/src/components/dashboards/Table/index.tsx:
Add these imports:
import parse from 'html-react-parser'
import ReactShadowRoot from 'react-shadow-root';
Then use them like so:
if (!cellContent) {
cellContent = href ? (
<ExternalLink
to={href}
className="link-highlight tabular-nums"
title={showTitle ? `${column.name}=${value}` : undefined}
>
{value}
</ExternalLink>
) : (
<span className="tabular-nums"
title={showTitle ? `${column.name}=${value}` : undefined}
style={{"wordBreak":"keep-all"}}
>
<ReactShadowRoot>
<span>
{ parse(value) }
</span>
</ReactShadowRoot>
</span>
);
}
In light mode:
In dark mode
The yarn start console makes this complaint:
I can dismiss it and things seem to work, so maybe not a blocker? I tried the type definition downgrade here -- https://stackoverflow.com/questions/71831601/ts2786-component-cannot-be-used-as-a-jsx-component -- and it didn't seem to help.
It seems that style={{"wordBreak":"keep-all"}} is necessary in the outer tabular-nums span in order to prevent the default, break-all, from influencing the shadow content. I don't understand that. The shadow DOM's purpose is to neuter outside styles, and indeed it does neuter the inline styles in the Mastodon's markup as desired.
Apart from the workBreak bleedthrough, what's in the shadow elements seems to be the expected defaults. But those won't always be wanted. The default link color, for example, doesn't play nicely in dark mode. How to control the styles inside the shadow element? What styles would look OK for any random HTML injected into the table cell?
It seems like doing this might be feasible, but I don't know enough to evaluate whether these issues are blockers. And there are undoubtedly others I haven't encountered.
It would be great (and not only for the Mastodon case of course) if this did turn out to be feasible!