diff --git a/packages/pxweb2-ui/src/lib/components/MarkdownRenderer/MarkdownRenderer.tsx b/packages/pxweb2-ui/src/lib/components/MarkdownRenderer/MarkdownRenderer.tsx index bec1278ef..11576805e 100644 --- a/packages/pxweb2-ui/src/lib/components/MarkdownRenderer/MarkdownRenderer.tsx +++ b/packages/pxweb2-ui/src/lib/components/MarkdownRenderer/MarkdownRenderer.tsx @@ -15,6 +15,18 @@ function escapeDecimalLikeLabels(markdown: string): string { return markdown.replace(/^(\d+)\.(?=\s)/gm, '$1\\.'); } +function normalizeNewLines(markdown: string): string { + return markdown.replaceAll('\r\n', '\n').replaceAll('\r', '\n'); +} + +function newLineToBreak(markdown: string): string { + return markdown.replaceAll('\n', ' \n'); +} + +function splitIntoBlocks(markdown: string): string[] { + return markdown.split(/\n[ \t]*\n+/); +} + const LinkRenderer = ({ href = '', children }: LinkProps) => ( {children} @@ -32,19 +44,36 @@ const UnwantedMdRender = ({ children }: UnwantedMdRenderProps) => ( ); export const MarkdownRenderer: React.FC = ({ mdText }) => { - const mdTextEscaped = escapeDecimalLikeLabels(mdText); + const mdTextNormalized = normalizeNewLines(mdText); + const mdTextEscaped = escapeDecimalLikeLabels(mdTextNormalized); + const markdownBlocks = splitIntoBlocks(mdTextEscaped); + const blockOccurrences = new Map(); + return ( - - {mdTextEscaped} - + <> + {markdownBlocks.map((block, index) => { + const occurrence = blockOccurrences.get(block) ?? 0; + blockOccurrences.set(block, occurrence + 1); + const blockKey = `${block}-${occurrence}`; + + return ( + + + {newLineToBreak(block)} + + {index < markdownBlocks.length - 1 &&

} +
+ ); + })} + ); };