@grafana/ui
Version:
Grafana Components Library
50 lines (47 loc) • 1.5 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import memoize from 'micro-memoize';
import { renderMarkdown } from '@grafana/data';
import { MaybeWrapWithLink } from '../components/MaybeWrapWithLink.mjs';
import { getActiveCellSelector, isTableCellStylesKeyEqual } from '../styles.mjs';
;
function MarkdownCell({ field, rowIdx, disableSanitizeHtml }) {
const rawValue = field.values[rowIdx];
if (rawValue == null) {
return null;
}
const renderValue = field.display(rawValue);
return /* @__PURE__ */ jsx(MaybeWrapWithLink, { field, rowIdx, children: /* @__PURE__ */ jsx(
"div",
{
className: "markdown-container",
dangerouslySetInnerHTML: {
__html: renderMarkdown(renderValue.text, { noSanitize: disableSanitizeHtml }).trim()
}
}
) });
}
const getStyles = memoize(
(theme, { maxHeight }) => css({
[`&, ${getActiveCellSelector(Boolean(maxHeight))}`]: {
whiteSpace: "normal"
},
".markdown-container": {
width: "100%",
// for elements like `p`, `h*`, etc. which have an inherent margin,
// we want to remove the bottom margin for the last one in the container.
"> *:last-child": {
marginBottom: 0
}
},
"ol, ul": {
paddingLeft: theme.spacing(2.5)
},
p: {
whiteSpace: "pre-line"
}
}),
{ isMatchingKey: isTableCellStylesKeyEqual }
);
export { MarkdownCell, getStyles };
//# sourceMappingURL=MarkdownCell.mjs.map