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 && }
+
+ );
+ })}
+ >
);
};